前回（【解説】はてなブログのHTML/CSSの構造を解析する（2） - daisukeの技術ブログ）、前々回（【解説】はてなブログのHTML/CSSの構造を解析する - daisuke20240310のブログ）と、はてなブログのHTML/CSSの構造を調べました。
これからは、実際に、はてなブログのテーマ「Minimalism」をカスタマイズしていきます。
このブログでは、「Minimalism 」テーマを使用していますが、なるべく、どのテーマの場合でも対応ができる方法で説明していきます。
まずは、コードブロックの行間が広すぎるので、その調整方法について書いていきます。
※2024/3/30追記：全体の背景色が白なので、コードブロックは少し違う背景色を設定しました
参考文献
参考サイト
はじめに
ブログカスタマイズの一覧です。良かったら参考にしてください。
準備編2：はてなブログのHTML/CSSの構造を解析する（2）
第1回：「Minimalism」テーマのコードブロックの行間を調整する ← 今回
第2回：「Minimalism」テーマのスマホで太字にならない問題の原因と対策
第3回：「Minimalism」テーマの目次の外観とリンク文字をカスタマイズする
第4回：「Minimalism」テーマの見出しをカスタマイズする
第5回：「Minimalism」テーマのサイドバーの各モジュールをカスタマイズする
第6回：カテゴリを階層化する（補足と問題点を追記）
第7回：Minimalismのカスタマイズ2点と、2つの問題点（スマホで見たときの画像余白と画像と背景の境界）の解決
第8回：CSS対応のタイトル付きの囲み枠を使う方法（定型文に登録）
第9回：ページ全体の表示フォントを変更する
番外編：編集ボタンを表示させる（編集ボタンを復活させる）
番外編2：カテゴリー階層化のソースコードを解析する
最初に、今回のまとめとして、外観のビフォーアフターと、デザインCSSの末尾にコピペすればいいコードを貼っておきます。
変更前
変更後
デザインCSSに追記する内容
.entry-content pre { line-height: 23px; background: #fdfdfd; }
事前準備
テスト用のブログを開設する
はてなブログでは、無料アカウントの場合、3個までブログを開設することができます（有料アカウントは10個まで開設できるそうです）。
「デザインテーマ制作の手引き」にも書かれてるように、作成、変更したテーマを確認するためのテスト用のブログを開設します。
新しくブログを開設するには、はてなブログの管理画面から、「ダッシュボード」を開き、「新しいブログを作成」を押して、希望のURLを選ぶと、ブログが開設できます。
サンプルエントリーを投稿する
参考サイトの「デザインテーマ制作の手引き」には、デザインを確認するために、はてなブログの記事に必要な要素をまとめた「サンプルエントリー」を用意してくれています。
この「サンプルエントリー」を、テスト用のブログに投稿しておきます。
なお、この「サンプルエントリー」は、Markdown記法で用意されているので、編集モードをMarkdown記法に設定してから、貼り付けてください。
投稿した「サンプルエントリー」を表示して、「右クリック→ページのソースを表示」を行い、表示されたHTMLのソースコードを、全て選択してコピー、テキストファイルに保存しておきます。
「Minimalism」テーマのCSSを入手する
はてなブログのブログの管理から、「 デザイン→ カスタマイズをクリック→{} デザインCSS」し、@import "http...";となっているので、http...の部分をコピーして、ブラウザのアドレスバーに貼り付けます。
すると、「Minimalism」テーマのCSSが表示されるので、全て選択してコピー、テキストファイルに保存します。キレイに書かれているので、今回は整形は必要ありません。
「Minimalism」テーマをカスタマイズする
まず、上記で開設したテスト用のブログの投稿した「サンプルエントリー」を開き、Chromeのデベロッパーツール（F12キー or メニュー→その他のツール→デベロッパーツール）を開きます。
そして、以下の図のように、デベロッパーツールの「ページ内の要素を選択して検査」をクリックしてから、「Minimalism」テーマの気になった場所をクリックします。
これで変更するところが明らかになったので、あとは、好みの見た目になるように、デベロッパーツールで変更していきます（具体的なやり方は後述）。
変更内容のCSSが決まったら、はてなブログのブログの管理から、「 デザイン→ カスタマイズをクリック→{} デザインCSS」で、末尾に変更内容を貼り付ければOKです。
では、順番にカスタマイズした内容について順番に書いていきます。
コードブロックの行間が広すぎるので調整する
上記の図にあるように、「Minimalism」テーマのコードブロックは行間が広すぎるので、変更します。
上記の手順で、デベロッパーツールで、コードブロックのHTML（preタグ）とCSSを特定します。CSSは、上から順番に適用されるので、怪しそうな内容を順に見ていきます。
すると、.entry-contentのline-height: 34px;というのが見つかります。その左にあるチェックボックスをON/OFFして、コードブロックが変化するかを確認します。
1つ目の図は、チェックボックスがONでline-height: 34px;が有効な状態であり、2つ目の図は、チェックボックスがOFFでline-height: 34px;が無効な状態です。
このことから、.entry-contentのline-height: 34px;がコードブロックの行間を広くしていた原因であることが分かります。
では、あとは気に入った感じに変更すればいいですが、変更方法はよく考えなければなりません。
.entry-contentというクラスは、記事の本文全体の定義になっており、line-height: 34px;を削除してしまうと、記事の本文全体の行間が狭くなってしまいます。
実際に、チェックボックスをOFFにした状態で、コードブロック以外の場所を見ると、行間が狭くなってしまっていることが分かります。
他の方が作ったソースコードを変更する場合、全体を把握してないため、なるべく影響が出ないような変更にするべきでしょう。
では、具体的にどうすればいいかというと、「Minimalism」テーマのCSSを保存したファイルを開き、entry-contentで検索します。
これを見ると、今回は、preタグで、codeクラスなので、.entry-content pre、.entry-content pre > code、.entry-content codeという3つが見つかりますが、最後のはドットが付いてないので、codeクラスではなくcodeタグであり、真ん中も、preタグ内のcodeタグという意味なので、今回の対象ではないですね。よって、最初の.entry-content preが一番影響を与えにくいので、これを変更します。
具体的には、line-height: 34px;が良くなかったので、同じプロパティで、line-height: 23px;と上書きしてみます。どの数値がいいかは、以下の図のように、デベロッパーツールで、いろいろ試して、いい値を選べばOKです。
デベロッパーツールで行った変更は、一時的なものであり、リロードすると、元の状態に戻ります。ブログに反映するときは、以下のようにデザインCSSに追記する必要があります。
以下は、.entry-content preのプロパティの変更前と、デザインCSSに追記する内容です。
変更前
.entry-content pre { border: 1px solid #ECEEF1; margin: 0 0 10px; padding: 20px; white-space: pre; }
デザインCSSに追記する内容
.entry-content pre { line-height: 23px; }
背景色の指定を追加する
現在のブログ全体の背景色が白なので、コードブロックは少し違う色に変えようと思います。
デザインCSSに追記する内容
.entry-content pre { line-height: 23px; background: #fdfdfd; }
おわりに
あとは、はてなブログの管理画面から、「 デザイン→ カスタマイズをクリック→{} デザインCSS」で、末尾に変更後の内容を貼り付けて、変更を保存すれば、ブログに反映されます。
今回は以上です！
