前回（【解説】はてなブログのHTML/CSSの構造を解析する（2） - daisukeの技術ブログ）、前々回（【解説】はてなブログのHTML/CSSの構造を解析する - daisuke20240310のブログ）と、はてなブログのHTML/CSSの構造を調べました。
これからは、実際に、はてなブログのテーマ「Minimalism」をカスタマイズしていきます。
このブログでは、「Minimalism 」テーマを使用していますが、なるべく、どのテーマの場合でも対応ができる方法で説明していきます。
まずは、コードブロックの行間が広すぎるので、その調整方法について書いていきます。
※2024/3/30追記：全体の背景色が白なので、コードブロックは少し違う背景色を設定しました
参考文献
参考サイト
help.hatenablog.com
はじめに
ブログカスタマイズの一覧です。良かったら参考にしてください。
ブログカスタマイズのまとめ
最初に、今回のまとめとして、外観のビフォーアフターと、デザイン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」で、末尾に変更後の内容を貼り付けて、変更を保存すれば、ブログに反映されます。
今回は以上です！
