【解説】ブログカスタマイズ：「Minimalism」テーマのコードブロックの行間を調整する

前回（【解説】はてなブログのHTML/CSSの構造を解析する（2） - daisukeの技術ブログ）、前々回（【解説】はてなブログのHTML/CSSの構造を解析する - daisuke20240310のブログ）と、はてなブログのHTML/CSSの構造を調べました。

これからは、実際に、はてなブログのテーマ「Minimalism」をカスタマイズしていきます。

このブログでは、「Minimalism 」テーマを使用していますが、なるべく、どのテーマの場合でも対応ができる方法で説明していきます。

まずは、コードブロックの行間が広すぎるので、その調整方法について書いていきます。

※2024/3/30追記：全体の背景色が白なので、コードブロックは少し違う背景色を設定しました

参考文献

はてなブログ Perfect GuideBook [改訂第2版]

はてなブログカスタマイズガイド: HTML & CSSで「はてなブログ」を次のステップへ!

参考サイト

help.hatenablog.com

はじめに

ブログカスタマイズの一覧です。良かったら参考にしてください。

ブログカスタマイズのまとめ

準備編：はてなブログのHTML/CSSの構造を解析する（1）
準備編2：はてなブログのHTML/CSSの構造を解析する（2）
第1回：「Minimalism」テーマのコードブロックの行間を調整する ← 今回
第2回：「Minimalism」テーマのスマホで太字にならない問題の原因と対策
第3回：「Minimalism」テーマの目次の外観とリンク文字をカスタマイズする
第4回：「Minimalism」テーマの見出しをカスタマイズする
第5回：「Minimalism」テーマのサイドバーの各モジュールをカスタマイズする
第6回：カテゴリを階層化する（補足と問題点を追記）
第7回：Minimalismのカスタマイズ2点と、2つの問題点（スマホで見たときの画像余白と画像と背景の境界）の解決
第8回：CSS対応のタイトル付きの囲み枠を使う方法（定型文に登録）
第9回：ページ全体の表示フォントを変更する
番外編：編集ボタンを表示させる（編集ボタンを復活させる）
番外編2：カテゴリー階層化のソースコードを解析する

最初に、今回のまとめとして、外観のビフォーアフターと、デザインCSSの末尾にコピペすればいいコードを貼っておきます。

変更前

「Minimalism 」オリジナルのコードブロック

変更後

「Minimalism 」テーマのコードブロックをカスタイマイズした

デザインCSSに追記する内容

.entry-content pre {
  line-height: 23px;
  background: #fdfdfd;
}

事前準備

テスト用のブログを開設する

はてなブログでは、無料アカウントの場合、3個までブログを開設することができます（有料アカウントは10個まで開設できるそうです）。

「デザインテーマ制作の手引き」にも書かれてるように、作成、変更したテーマを確認するためのテスト用のブログを開設します。

新しくブログを開設するには、はてなブログの管理画面から、「ダッシュボード」を開き、「新しいブログを作成」を押して、希望のURLを選ぶと、ブログが開設できます。

サンプルエントリーを投稿する

参考サイトの「デザインテーマ制作の手引き」には、デザインを確認するために、はてなブログの記事に必要な要素をまとめた「サンプルエントリー」を用意してくれています。

この「サンプルエントリー」を、テスト用のブログに投稿しておきます。

なお、この「サンプルエントリー」は、Markdown記法で用意されているので、編集モードをMarkdown記法に設定してから、貼り付けてください。

投稿した「サンプルエントリー」を表示して、「右クリック→ページのソースを表示」を行い、表示されたHTMLのソースコードを、全て選択してコピー、テキストファイルに保存しておきます。

テストブログのサンプルエントリー

「Minimalism」テーマのCSSを入手する

はてなブログのブログの管理から、「 ãƒ‡ã‚¶ã‚¤ãƒ³â†’ ã‚«ã‚¹ã‚¿ãƒžã‚¤ã‚ºã‚’クリック→{} デザインCSS」し、@import "http...";となっているので、http...の部分をコピーして、ブラウザのアドレスバーに貼り付けます。

すると、「Minimalism」テーマのCSSが表示されるので、全て選択してコピー、テキストファイルに保存します。キレイに書かれているので、今回は整形は必要ありません。

「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;が無効な状態です。

line-heightのチェックボックスがONの状態

line-heightのチェックボックスがOFFの状態

このことから、.entry-contentのline-height: 34px;がコードブロックの行間を広くしていた原因であることが分かります。

では、あとは気に入った感じに変更すればいいですが、変更方法はよく考えなければなりません。

.entry-contentというクラスは、記事の本文全体の定義になっており、line-height: 34px;を削除してしまうと、記事の本文全体の行間が狭くなってしまいます。

実際に、チェックボックスをOFFにした状態で、コードブロック以外の場所を見ると、行間が狭くなってしまっていることが分かります。

他の方が作ったソースコードを変更する場合、全体を把握してないため、なるべく影響が出ないような変更にするべきでしょう。

では、具体的にどうすればいいかというと、「Minimalism」テーマのCSSを保存したファイルを開き、entry-contentで検索します。

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プロパティの追記を開始する

デベロッパーツールでCSSプロパティの追記が可能になった

デベロッパーツールでCSSプロパティの追記ができた

デベロッパーツールで行った変更は、一時的なものであり、リロードすると、元の状態に戻ります。ブログに反映するときは、以下のようにデザイン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」で、末尾に変更後の内容を貼り付けて、変更を保存すれば、ブログに反映されます。

今回は以上です！