小さな箱庭Diary

<本ブログはアフィリエイト広告を利用しています>

【やりかたメモ】はてなブログのデザインをカスタマイズしました

はてなブログにお引越ししてきて以来、ずっとブログのテーマ(見ため)には、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」をこつこつ続けていきます🍀