【はてなブログ】日付・タイトルのデザインを変更

人生初めてのブログは、「はてなブログ」で開始しました。
選んだデザインテーマは「Report」で、噂どおりシンプルで奇麗なデザインでしたが、デフォルトは真っ白なデザインでしたので、色々調べて、自分なりにカスタマイズしてみました。
備忘を兼ねて、内容をご紹介したいと思います。

なお、変更前のトップページは以下のイメージです。

カスタマイズの設定は、はてなブログ管理画面の「デザイン」ー「カスタマイズ」ー「デザインCSS」に入力しています。

 

日付を変更

まずは、少し寂しい日付をカスタマイズしてみました。

日付の前にアイコンを付ける

日付の前に、可愛い時計のアイコンを付けてみます。

解説

• 2行目の before は擬似要素と呼ばれ、対象となる要素 date の前に指定した内容を追加することができます。
• 3行目は固定。フォントの種類を指定する時に使います。
• 4行目の content: “\f043” で表示するアイコンを指定しています。
• 5行目でアイコンの右側に微調整で空白を入れています。

なお、4行目の \f043 を変更すると、はてなブログ側で用意された様々なアイコンに変更することができます。

アイコンは、こちらのサイト（FOXISM）で一覧にまとめられています。

FOXISM管理人様、大変参考になりました。ありがとうございました。

変更した結果、以下のとおり、日付が少し可愛らしくなりました。

日付の背景に色を付ける

日付の背景に色を付けてみます。

解説

• 3行目で色を付ける背景の範囲を指定しています。
• 4行目で色を付けました。ちなみに色はペールターコイズ（なんだろこれ笑）。
• 5行目で背景の4つの角を若干丸めました。
• 6行目で日付表記の上下左右の空白を調整しました。
• 7行目で幅が指定した100pxで収まるようにしています。

日付の背景に色が付き、目立つようになりました。
デフォルトで日付にグレイのアンダーバーが引いてあったので、影のようになりました。

なお、カラーはこちらのサイト（原色大辞典）で様々な色をを選ぶことができます。

 

 

 

サイドバーを変更

サイドバー（はてなモジュール）も少し寂しかったので、変更しました。

サイドバーのタイトルの背景に色を付ける

解説

• 3行目でタイトルにグレイのアンダーバーを引いています。
• 4行目で色を付けました。色はミッドナイトブルー。
• 5行目で背景の4つの角を若干丸めました。
• 6行目でサイドバーのタイトルの上下左右の空白を調整しました。
• 7行目で背景の色が濃かったので、タイトル文字を白にしました。このままでは一部のタイトルの文字しか白に変更できなかったので、9~11行目を追記しています。

サイドバーのタイトルも少し目立たせることができました。
上記で解説しました、日付のアイコンと同様の手順で、タイトルの前にアイコンを付けて、より可愛くすることもできそうです。

記事タイトルを変更

記事タイトルも本文との違いを出したかったので、背景に色を付けてみました。

記事タイトルの背景に色を付ける

解説

• 3行目でタイトルにグレイのアンダーバーを引いています。
• 4行目で色を付けました。色はサイドバーに合わせました。
• 5行目で背景の4つの角を丸めました。
• 6行目でサイドバーのタイトルの上下左右の空白を調整しました。
• 9~11行目で記事タイトル文字を白にしました。

これで、記事タイトルも目立たさせることができました。

 

まとめ

変更後のブログトップページは以下のようになりました。

色のセンスは置いといて（笑）、タイトル等がよりはっきりして、どこに何があるのかわかりやすくなったと思います。

ちなみに、Googleアドセンス申請の際も、同様のカスタマイズを行っていました。

今回の変更は、下記のサイトを参考にさせていただきました。大変勉強になりました。ありがとうございました。

Minimal-green