https://daisuke20240310.hatenablog.com/entry/2024/03/29/015621

ブログカスタマイズの第4回目です！

今回は、見出し（大見出し、中見出し、小見出し）をカスタマイズしていきます。

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

「Minimalism」テーマの見出しは、シンプル過ぎて、大見出し、中見出し、小見出しの差が分かりにくいです。

大見出しは、周りを囲う感じにして、中見出しは左に縦線、小見出しはアンダーラインだけ、のように、区別がつくようにしていきます。

参考文献

作者:JOE AOTO
ソーテック社

作者:相澤裕介
カットシステム

はじめに

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

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

準備編：はてなブログの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の末尾にコピペすればいいコードを貼っておきます。

変更前

変更後

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

.entry-content h3 {
  padding: 0.5em;
  background: #404040;
  color: white;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.23);
}

.entry-content h4 {
  padding: 0.5em;
  background: #f8f8f8;
  border-left: solid 5px black;
}

.entry-content h5 {
  padding: 0.5em;
  border-left: solid 5px black;
  border-bottom: solid 5px black;
}

準備物

下記準備物の入手方法については、第1回目の事前準備（【解説】はてなブログ：「Minimalism」テーマのコードブロックの行間を調整する - daisukeの技術ブログ）で説明しています。

事前準備

・テスト用ブログに投稿した「サンプルエントリー」を開いておく
　（デベロッパーツールを使うため）
・テスト用ブログの管理画面から、
　「デザイン→ カスタマイズをクリック→{} デザインCSS」で開いておく
・「Minimalism」テーマのCSSソースファイル
・「サンプルエントリー」のHTMLのソースファイル

「Minimalism」テーマの見出しのカスタマイズ

見出しのHTMLを把握する

【解説】はてなブログのHTML/CSSの構造を解析する（2） - daisukeの技術ブログで、目次も含めて、はてなブログの大まかなパーツの配置を特定しました。

下図は、「サンプルエントリー」のHTMLのソースファイルで、<h[0-9]で正規表現で検索した結果です。

サンプルエントリーの見出しがh2タグな件

ここで一つ気づいたことがあります。はてなブログの大見出しは、見出しボタン（アイコン）を使って書いていると、h3タグが使われます。はてなブログの見出しは、そういうシステムになっています。

しかし、はてなブログが提供している「サンプルエントリー」は、Markdown記法で書かれており、##で書かれていて、つまり、h2タグで書かれています（理由が知りたくて、Web検索でh2タグを検索したが、「はてなブログの大見出しはh2タグ」騒動しか引っかかりません）。

これは、「普段もh2タグを使った方がいい」ということなのでしょうか？（結局理由は分かりませんでしたが、このページの言いたいことではないので、これ以上は追及しないことにします）

このままでは、見た目の調整が失敗するかもしれないので、投稿した「サンプルエントリー」を再編集して、大見出しに相当するところは、h2タグからh3タグに書き直しました。

これに伴い、準備していた「サンプルエントリー」のHTMLのソースファイルも更新しました。

「Minimalism」の見出しのCSSを理解する

具体的な進め方は、（【解説】はてなブログ：「Minimalism」テーマのコードブロックの行間を調整する - daisukeの技術ブログ）で書いたので、その通りに進めていきます。

「Minimalism」テーマのCSSのソースファイルのh3タグが5か所あります。

最初の3つは、以下（H3タグだけを抽出しましたが、他のHタグも同じ）であり、正確な意図は分かりませんが、おそらく、見出しにリンクを設定した場合（普通はそういうケースは少ないと思う）に、他の文字色（黒）と同じ色にしたい（つまりリンクを貼った場合でも、リンクのような外観にはしたくない）ということだと思います。

h3 a,
h3 a:hover,
h3 a:visited {
  color: #333333;
  text-decoration: none;
}

残り2つは、以下（H3タグだけを抽出したが、他のHタグも同じ）であり、マージン、行間、フォントサイズの設定です。

.entry-content h3 {
  margin: 1.3em 0 0.8em 0;
  line-height: 1.5;
  font-size: 140%;
}

というわけで、ほとんど飾りは付いてない状態です。

「Minimalism」の見出しをカスタマイズする

見出しはページのイメージを大きく変える要素なので、1回で決まらないと思います。

よって、とりあえず、気に入った感じに変えてみて、様子を見ようと思います。

.entry-content h3 {
  padding: 0.5em;
  background: #404040;
  color: white;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.23);
}

.entry-content h4 {
  padding: 0.5em;
  background: #f8f8f8;
  border-left: solid 5px black;
}

.entry-content h5 {
  padding: 0.5em;
  border-left: solid 5px black;
  border-bottom: solid 5px black;
}