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

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

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

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

customibu.hatenablog.jp

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

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

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

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

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

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

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

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

上の画像のように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カスタマイズでしたが、また何かあれば記事にしていこうと思っています。

最後迄お読みいただきありがとうございます。感謝

関連記事

• ブログレイアウトを考えてみた。
• はてなブログカスタマイズ経過報告。
• はてなブログをカスタマイズ。基本の3箇所をCSSでデザインする。
• 【コピペで使える】はてなブログの関数を使ってソーシャルボタンを記事毎に対応させる方法
• はてなブログPROに変更して設定とカスタマイズしてみた。

現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4