スキナモノート

SEOやマーケティング、WEB系に役立つ情報を発信しています。好きな事を中心に、文房具の記事もたまに。

はてなブログをカスタマイズ。基本の3箇所をCSSでデザインする。

このエントリーをはてなブックマークに追加

f:id:tubamenote:20150403164451j:plain

はてなブログをこれからカスタマイズをしていきたい。そんな時におすすめなテーマが『Report』です。公式テーマなのでインストールをしなくても使えます。

なぜ、このReportがカスタマイズにおすすめかと言うと、限りなくシンプルだからです。
特にサイドバーのアイコンも付かないところが良い。本当になんの飾りもない。限りなくゼロに近いんですよね。だからこそ、カスタマイズにはうってつけのテーマだと思います。

これからこのブログもカスタマイズをしていく訳ですが、まずはReportの中身をもっと知ろうと思い、もう一つ、カスタマイズ用にブログを作ってみました。
スキナモノートでカスタマイズしていくと、なんかごちゃごちゃになってしまいそうなので(笑)

customibu.hatenablog.jp

それに、せっかくはてなブログもPROにしたのですから、ブログを10個作れると言う特典も有効利用しようかと。

ちなみに、何個ブログを作ってもPRO仕様で作れるんですね。当たり前かも知れないですが、ちょっとした喜びでした。サイズ参考の為にAdSenseも貼ってみました。

今回は基本的な3つの項目を簡単にカスタマイズしたので、忘備録的にコードを貼っておきます。もし必要な人が居たら、ご参考になればと思います。

今後、はてなカスタマイ部の方でいろいろなCSSを試していきます。

f:id:tubamenote:20150403161850p:plain

  • 全体の幅
  • 記事タイトル
  • 見出し 大 中

Report仕様のCSSなので、他のテーマではデザインが崩れる事があります。ご利用のテーマに合わせて変更してみてください。もしも、崩れてしまった場合は、入れたCSSを消せば元に戻ります。
どのテーマであっても、基本的なCSSのidやclassは恐らくすべて同じだと思います。

まずはCSSを入れる部分ですが、

デザイン>カスタマイズ>デザインCSS

f:id:tubamenote:20150403024215p:plain

上の画像のようにCSSを記入する欄が表示されます。

最後の/* system */の後に自分で書いたCSSを入れていきます。

全体の幅

#container はブログの全体の幅になります。一番の大枠ですね。大体960pxが多いですが、私は広めの幅が好きなので、1080pxにしています。margin: 0 auto;で画面の中央に表示させて下さいね、と言うのを指定しています。

#wrapperは記事。#box2はサイドバーの部分です。

記事とサイドバーのfloat: left;とfloat: right;を交換すれば、右が記事で左にサイドバーを入れ替えて表示させる事ができます。

#wrapperと#box2の足した数字は1080pxに対して、少し余裕を持たせて設定をしましょう。私の場合は足して、1020pxになります。少し余裕を持たないと、記事とサイドバーの距離が近くなり、見づらくなってしまいます。また、サイドバーが段落ちしてしまう事もあります。見やすいように数値を設定します。

 

記事タイトル

.entry h1がタイトルの周りの部分。ここに色をつけたり飾りをつけたりします。
.entry-title aはタイトル文字の部分。文字の大きさや色を変更したりします。タイトルは大きめの方が目立つので、私は好きです。結構有名ブログなんかでも大きめの文字の所が多いですね。

 

見出し 大 中

.entry-content h3.entry-content h4で見出しの装飾をします。装飾が同じであれば同時にCSSを書いても良いですね。ここは結構色々なCSSを設定していける所ではないでしょうか。シンプルなのもいいですし、少し派手に見せるのもいいですね。その辺も今後試していきます。
 
今回は3つの基本的な部分のCSSカスタマイズでしたが、また何かあれば記事にしていこうと思っています。
最後迄お読みいただきありがとうございます。感謝