【解説】ブログカスタマイズ：「Minimalism」テーマの目次の外観とリンク文字をカスタマイズする

はてなブログのテーマ「Minimalism」のカスタマイズの第3回目です！

今回は、目次の外観と、目次のリンクの文字色をカスタマイズしていきます。

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

「Minimalism」テーマの目次は少し文字のサイズが小さいです。

また、目次のリンクは、本文の文字色と同じ色であり、パッと見て、リンクなのかどうかが分かりにくいです。

デフォルト（Smooth）のように分かりやすい目次、リンクにしていきます。

• 参考文献
• はじめに
• 準備物
• 「Minimalism」テーマの目次のカスタマイズ
  • 目次の位置を特定する
• 目次の外観をカスタマイズする
  • 目次全体のスタイル指定 「.table-of-contents」
  • 「目次」の指定 「.table-of-contents::before」
  • 「目次の各項目」の指定 「.table-of-contents li a」
  • スマホ表示の目次全体の指定 「.table-of-contents」
• おわりに

参考文献

はじめに

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

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

変更前

変更後

デザイン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の技術ブログ）で説明しています。

「Minimalism」テーマの目次のカスタマイズ

目次の位置を特定する

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

目次の外観をカスタマイズする

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

「Minimalism」テーマのCSSのソースファイルには、table-of-contentsが4か所あります。

目次全体のスタイル指定 「.table-of-contents」

• 背景色はそのままにしておく
• 目次のフォントサイズは14pxで、本文は15pxだった、本文に合わせる
• 行間は「目次」に影響するだけなので、そのままにしておく
• 賛否両論ありそうだが、目次に影を付けてみる

影を付けるには、box-shadowを使用する。数値の指定は、1つ目が「影を右方向にずらす量」、2つ目が「影を下方向にずらす量」、3つ目が「影をぼかす量」、4つ目が「影を拡散する量」です。

影の調整については、Chromeのデベロッパーツールが非常に便利です。下図のように、●をマウスの左ドラッグでいろいろ動かすと、リアルタイムにページ中の影の状態が変化してくれます（便利すぎです！）。好みの影が決まったら、その値を「デザインCSSに追記する内容」に反映すればOKです。

参考文献の「」を読み返してみると、影を付けたときは、その下にあるブロック要素との距離が短くなるため、少し間隔をあけた方がいい、と書かれていました（細かいが、アドバイスがとても適切です）。

ちなみに、周囲の要素との間隔は、marginで指定します。似たようなセレクタであるpaddingは、自分の要素の外枠（border）と自分の要素の文章との間隔を指定で使用します。

下側の要素との間隔なので、margin-bottomを使用し、サイズは、影のぼかしのサイズと同じ7pxとします。 → テストブログに反映してみた結果、変わりませんでした！

理由は、目次の下にある大見出しのmarginと相殺されるためでした。

メカニズムとしては、例えば、上下で並ぶ要素があり、上の要素がmargin-bottom: 7pxと指定し、下の要素がmargin-top: 27.3pxだった（今回の実際のサイズです、ちなみに、調べるのはデベロッパーツールが便利）として、結果として、この2つの要素の間隔は2つのmarginが足されるのではなく、値の大きい方が採用されます（相殺されるということです）。

つまり、目次に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に追記する内容」を貼り付けて、変更を保存すれば、ブログに反映されます。

今回は以上です！

最後までお読みいただき、ありがとうございました。