はてなブログのテーマ「Minimalism」のカスタマイズの第3回目です！
今回は、目次の外観と、目次のリンクの文字色をカスタマイズしていきます。
このブログでは、「Minimalism 」テーマを使用していますが、なるべく、どのテーマの場合でも対応ができる方法で説明していきます。
「Minimalism」テーマの目次は少し文字のサイズが小さいです。
また、目次のリンクは、本文の文字色と同じ色であり、パッと見て、リンクなのかどうかが分かりにくいです。
デフォルト（Smooth）のように分かりやすい目次、リンクにしていきます。
参考文献
はじめに
ブログカスタマイズの一覧です。良かったら参考にしてください。
ブログカスタマイズのまとめ
最初に、今回のまとめとして、外観のビフォーアフターと、デザインCSSの末尾にコピペすればいいコードを貼っておきます。
変更前
「Minimalism 」オリジナルの目次
変更後
「Minimalism 」テーマの目次をカスタイマイズした
デザインCSSに追記する内容
.table-of-contents {
font-size: 15px;
background: #f8f8f8;
box-shadow: 4px 4px 7px 0px #666666;
margin-bottom: 35px;
}
.table-of-contents li a {
line-height: 27px;
}
.table-of-contents li a {
color: #1487bd;
}
.table-of-contents li a:visited {
color: #789dae;
}
.table-of-contents li a:hover {
color: #0f5373;
}
準備物
下記準備物の入手方法については、第1回目の事前準備（【解説】はてなブログ：「Minimalism」テーマのコードブロックの行間を調整する - daisukeの技術ブログ）で説明しています。
事前準備
・ テスト用ブログに投稿した「サンプルエントリー」を開いておく
（デベロッパーツールを使うため）
・テスト用ブログの管理画面から、
「 デザイン→ カスタマイズをクリック→{} デザインCSS」で開いておく
・「Minimalism」テーマのCSSソースファイル
・「サンプルエントリー」のHTMLのソースファイル
「Minimalism」テーマの目次のカスタマイズ
目次の位置を特定する
【解説】はてなブログのHTML/CSSの構造を解析する（2） - daisukeの技術ブログで、目次も含めて、はてなブログの大まかなパーツの配置を特定しました。
目次の位置を特定した
目次の外観をカスタマイズする
具体的な進め方は、（【解説】はてなブログ：「Minimalism」テーマのコードブロックの行間を調整する - daisukeの技術ブログ）に書いたので、その通りに進めていきます。
「Minimalism」テーマのCSSのソースファイルには、table-of-contentsが4か所あります。
4つのtable-ob-contents
目次全体のスタイル指定 「.table-of-contents」
- 背景色はそのままにしておく
- 目次のフォントサイズは14pxで、本文は15pxだった、本文に合わせる
- 行間は「目次」に影響するだけなので、そのままにしておく
- 賛否両論ありそうだが、目次に影を付けてみる
影を付けるには、box-shadowを使用する。数値の指定は、1つ目が「影を右方向にずらす量」、2つ目が「影を下方向にずらす量」、3つ目が「影をぼかす量」、4つ目が「影を拡散する量」です。
影の調整については、Chromeのデベロッパーツールが非常に便利です。下図のように、●をマウスの左ドラッグでいろいろ動かすと、リアルタイムにページ中の影の状態が変化してくれます（便利すぎです！）。好みの影が決まったら、その値を「デザインCSSに追記する内容」に反映すればOKです。
Chromeのデベロッパーツールで影を調整する1
Chromeのデベロッパーツールで影を調整する2
参考文献の「はてなブログカスタマイズガイド: HTML & CSSで「はてなブログ」を次のステップへ!」を読み返してみると、影を付けたときは、その下にあるブロック要素との距離が短くなるため、少し間隔をあけた方がいい、と書かれていました（細かいが、アドバイスがとても適切です）。
ちなみに、周囲の要素との間隔は、marginで指定します。似たようなセレクタであるpaddingは、自分の要素の外枠（border）と自分の要素の文章との間隔を指定で使用します。
下側の要素との間隔なので、margin-bottomを使用し、サイズは、影のぼかしのサイズと同じ7pxとします。 → テストブログに反映してみた結果、変わりませんでした！
理由は、目次の下にある大見出しのmarginと相殺されるためでした。
メカニズムとしては、例えば、上下で並ぶ要素があり、上の要素がmargin-bottom: 7pxと指定し、下の要素がmargin-top: 27.3pxだった（今回の実際のサイズです、ちなみに、調べるのはデベロッパーツールが便利）として、結果として、この2つの要素の間隔は2つのmarginが足されるのではなく、値の大きい方が採用されます（相殺されるということです）。
margin、paddingを確認するにはデベロッパーツールが便利
つまり、目次にmargin-bottom: 7pxと指定しても影響は与えません（見た目が変化しない）。また、margin-bottom: 27.3pxと指定しても影響を与えなません（実際にデベロッパーツールで値を変えて試した）。今回は、目次と大見出し（H3タグ）の間隔を調整したいわけですが、大見出し側を変更すると、ページ内の他の場所に影響を与える可能性があります。一方、目次はページ内に1つしかないため、指定したmargin-bottomは、この目次と大見出しの間にしか影響を与えません。よって、この場合は、目次のmargin-bottomで調整すべきです（正しい結論にたどり着けると達成感があります）。
小数点までは必要ないと思うので、今回は、margin-bottom: 35px;とします。
変更前
.table-of-contents {
position: relative;
background-color: #fafafa;
border:1px solid #ECEEF1;
padding: 60px 70px 25px;
border-radius: 0;
font-size: 14px;
line-height: 28px;
}
デザインCSSに追記する内容
.table-of-contents {
font-size: 15px;
box-shadow: 4px 4px 7px 0px #666666;
margin-bottom: 35px;
}
※2024/3/28追記：その後、「Minimalism 」テーマの見出しをカスタマイズした後で、全体を見直してみると、目次の背景色を変えた方がいいと考えましたので、以下を追記しました
.table-of-contents {
background: #f8f8f8;
}
「目次」の指定 「.table-of-contents::before」
気にならないので、今のところ変更しません。
「目次の各項目」の指定 「.table-of-contents li a」
- 行間は広すぎるので、フォントサイズの35pxから27pxに変更
- ページ全体で使われてるリンクの色が使われていないのは、ここでフォントカラー指定しているため →
color:#3f3f3f;を削除するだけでいい
フォントカラーについて、colorプロパティを削除すればいいと思っていたが、削除しても、テーマで指定されたCSSは残っているため、テーマで指定されたcolor:#3f3f3f;が有効になるだけで、無効化されなません。何とか無効化する方法を探してみましたが、見当たりません。ひとまず、MinimalismのCSSの値で上書きすることで対応しておきます。 → 後日、CSSのinitialかunsetを使うことで、無効化できることが分かりました
変更前
.table-of-contents li a {
text-decoration: none;
line-height: 35px;
color:#3f3f3f;
}
デザインCSSに追記する内容
.table-of-contents li a {
line-height: 27px;
}
.table-of-contents li a {
color: #1487bd;
}
.table-of-contents li a:visited {
color: #789dae;
}
.table-of-contents li a:hover {
color: #0f5373;
}
スマホ表示の目次全体の指定 「.table-of-contents」
上の3つを適用した後で、必要に応じて変更します。
おわりに
あとは、ブログの管理画面から、「 デザイン→ カスタマイズをクリック→{} デザインCSS」を開いて、末尾に「デザインCSSに追記する内容」を貼り付けて、変更を保存すれば、ブログに反映されます。
今回は以上です！
最後までお読みいただき、ありがとうございました。
