2017.12.25人生初めてのブログは、「はてなブログ」で開始しました。選んだデザインテーマは「Report」で、噂どおりシンプルで奇麗なデザインでしたが、デフォルトは真っ白なデザインでしたので、色々調べて、自分なりにカスタマイズしてみました。備忘を兼ねて、内容をご紹介したいと思います。変更前のトップページは以下のイメージです。変更前トップページカスタマイズの設定は、はてなブログ管理画面の「デザイン」ー「カスタマイズ」ー「デザインCSS」に入力しています。記事タイトルの背景に色を付ける解説まとめ日付を変更まずは、少し寂しい日付をカスタマイズしてみました。日付の前にアイコンを付ける日付の前に、可愛い時計のアイコンを付けてみます。前に指定した内容を追加することができます。フォントの種類を指定する時に使います。表示するアイコンを指定しています。5行目でアイコンの右側に微調整で空白を入れています。変更すると、はてなブログ側で用意された様々なアイコンに変更することができます。アイコンは、こちらのサイト(FOXISM)で一覧にまとめられています。ありがとうございました。変更した結果、以下のとおり、日付が少し可愛らしくなりました。日付のアイコン日付の背景に色を付ける日付の背景に色を付けてみます。5px;box-sizing:border-box;}解説3行目で色を付ける背景の範囲を指定しています。4行目で色を付けました。ちなみに色はペールターコイズ(なんだろこれ笑)。5行目で背景の4つの角を若干丸めました。6行目で日付表記の上下左右の空白を調整しました。7行目で幅が指定した100pxで収まるようにしています。日付の背景に色が付き、目立つようになりました。デフォルトで日付にグレイのアンダーバーが引いてあったので、影のようになりました。カラーはこちらのサイト(原色大辞典)で様々な色をを選ぶことができます。日付背景の色変更サイドバーを変更サイドバー(はてなモジュール)も少し寂しかったので、変更しました。#ffffff;}解説3行目でタイトルにグレイのアンダーバーを引いています。4行目で色を付けました。色はミッドナイトブルー。5行目で背景の4つの角を若干丸めました。6行目でサイドバーのタイトルの上下左右の空白を調整しました。7行目で背景の色が濃かったので、タイトル文字を白にしました。このままでは一部のタイトルの文字しか白に変更できなかったので、9~11行目を追記しています。サイドバーのタイトルも少し目立たせることができました。上記で解説しました、日付のアイコンと同様の手順で、タイトルの前にアイコンを付けて、より可愛くすることもできそうです。記事タイトルも本文との違いを出したかったので、背景に色を付けてみました。#ffffff;}解説3行目でタイトルにグレイのアンダーバーを引いています。4行目で色を付けました。色はサイドバーに合わせました。5行目で背景の4つの角を丸めました。6行目でサイドバーのタイトルの上下左右の空白を調整しました。9~11行目で記事タイトル文字を白にしました。これで、記事タイトルも目立たさせることができました。記事タイトル変更まとめ変更後のブログトップページは以下のようになりました。変更後トップページ色のセンスは置いといて(笑)、タイトル等がよりはっきりして、どこに何があるのかわかりやすくなったと思います。ちなみに、Googleアドセンス申請の際も、同様のカスタマイズを行っていました。今回の変更は、下記のサイトを参考にさせていただきました。ありがとうございました。育児・マイホームアイテムレビューブロガーだちたまこんにちは!「だちたま」です。2人(4才・0才)の4人家族。元エンジニアの夫に教えてもらいながら、WordPressのカスタマイズ・プログラミングについてお勉強中。