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

f:id:tubamenote:20150403164451j:plain

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

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

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

<a href="http://customibu.hatenablog.jp/" data-mce-href="http://customibu.hatenablog.jp/">はてなカスタマイ部</a>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になります。少し余裕を持たないと、記事とサイドバーの距離が近くなり、見づらくなってしまいます。また、サイドバーが段落ちしてしまう事もあります。見やすいように数値を設定します。