はてなブログにお引越ししてきて以来、ずっとブログのテーマ（見ため）には、Minimalismを使っていました。 シンプルで使いやすいテーマで気に入っていたけど、もう少し親しみやすいテーマにしたくて、MinimalismからColor Bookへ模様替え。
あわせて、ちょこっとだけカスタマイズを頑張ってみたので、その方法を共有します。
テーマのインストール方法
公式はてなの「【はてなブログ】デザインを変えたいです」を参考にしながら、テーマを探して、プレビューを見て・・・を繰り返して、「Color Book」をインストールしました。 わたしのブログ「小さな箱庭Diary」では、ヘッダー画像を使っているので、それがきれいに表示される「Color Book」を。シンプルだけどカスタマイズすれば自分好みのイメージになりそうだったのが、こちらのテーマを選らんだ大きなポイントです。
カスタマイズしたところ
行間の調整
インストールしたままだと行間が広すぎるように感じたので、行間を狭くしました。
【管理画面】→【デザイン】→【カスタマイズ】から 高度な設定の｛｝デザインCSSへ次のCSSを追加
.entry-content p
{
line-height: 1.6;
margin: 0;
margin-bottom: 0.1em;
}
アイキャッチサイズの調整
Color Bookのサンプルブログにある、はてなブログテーマ「Color Book」の記事一覧ページで、アイキャッチ画像が見切れないようする方法。を参考にさせていただきました。
【管理画面】→【デザイン】→【カスタマイズ】から 高度な設定の｛｝デザインCSSへ次のCSSを追加
.page-archive .entry-thumb{
background-size:contain;
}
記事タイトルの文字色変更
記事タイトルを薄い黒色で表示するように変更しました。
【管理画面】→【デザイン】→【カスタマイズ】から 高度な設定の｛｝デザインCSSへ次のCSSを追加
.entry-title-link {
color:#666;
}
見出しのデザイン変更
はてなブログには「大見出し」「中見出し」「小見出し」の3種類があって、それぞれ次のように表示されるようにカスタマイズしました。ぜんぶサルワカさんの「CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選」を参考にさせていただいています。
大見出し
【管理画面】→【デザイン】→【カスタマイズ】から 高度な設定の｛｝デザインCSSへ次のCSSを追加
.entry-content h3 {
background: none;
padding: 0;
}
.entry-content h3 {
padding: 0.25em 0.5em;/*上下 左右の余白*/
color: #494949;/*文字色*/
background: transparent;/*背景透明に*/
border-top: solid 1px #CDE6C7;
border-right: solid 1px #CDE6C7;
border-left: solid 8px #CDE6C7;/*左線*/
border-bottom: solid 1px #CDE6C7;
}
中見出し
優しい色合いで蛍光ペンを引くように。イメージは大好きなマイルドライナーです。
【管理画面】→【デザイン】→【カスタマイズ】から 高度な設定の｛｝デザインCSSへ次のCSSを追加
.entry-content h4 {
background: none;
padding: 0;
}
.entry-content h4 {
padding: 0.25em 0.5em;/*上下 左右の余白*/
background: linear-gradient(transparent 70%, #CDE6C7 70%);
}
小見出し
Font Awesomeというインターネット上の無料アイコンサイトを利用した、アイコン付きのものにしました。 ヘッダ画像にちなんだ葉っぱ（クローバ）のアイコンです。
【管理画面】→【デザイン】→【カスタマイズ】から 高度な設定の｛｝デザインCSSへ次のCSSを追加
.entry-content h5 {
color:#3D3F44;
position: relative;
padding-left: 1.2em;
line-height: 1.4;
margin:20px 0 8px 0;
}
.entry-content h5:before{
font-family: "FontAwesome";
content: "\e139";/*アイコンのユニコード*/
color: #CDE6C7;
position: absolute;
font-size: 1em;
left: 0;
top: 0;
}
さらに【管理画面】→【設定】→【詳細設定】の<head>要素にメタデータを追加へ 次のメタデータを追加
<script src="●●●.js" crossorigin="anonymous"></script>
※●●●.jsには、Font Awesome登録時に表示される自分のものを入力
葉っぱのマークを使うには、Font Awesomeのバージョン6なる新しめのものを使う必要があったのですが、なかなかそれが分からず・・・。いろいろ調べていたところ、【Font Awesome】バージョン6で変わったCSS擬似要素の設定でアイコン表示する時の備忘録いろいろ | 株式会社アップリーチのサイトにお世話になりました。Font Awesomeのバージョンが6になってから、書き方が変わったようです。見出しに使うのはあまり想定されてないのかな？ どうにかこうにか、やりたいことが実現できてうれしいかぎりです。
思ったよりカスタマイズに時間がかかってしまったけれど、ブログのカスタマイズはたのしくて、深夜まで夢中になってしまうほどでした。自分だけの好きを作り上げてく、まるでどうぶつの森を遊んでるときのようなクリエーター気分になったものです。
まだまだ未熟だけど、いつかはてなブログ用のテーマを出してみたいな。もちろんブログのメインとなる記事も！いっしょに、 これからも「小さな箱庭diary」をこつこつ続けていきます🍀
