Hugo beautifulhugoテーマでレスポンシブかつダークモード対応の目次ボックスを作る

beautifulhugoテーマでブログを作っていると、見やすくておしゃれな目次（TOC）を投稿ごとに追加したくなる。だが、多くのユーザーと同じく、「ダークモード時に目次ボックスの背景や文字が読めなくなる」「スマホだと背景色や枠が消えてボックスが埋もれる」などの問題に直面する。

この記事では、インラインスタイルを一切使わず、CSSクラスだけで柔軟＆保守性の高いTOCボックスを作る方法を解説。

1. 問題点

デフォルトやコピペ実装のTOCは、下記のようにインラインスタイルで書かれていることが多い。

<div class="toc-wrapper toc-box" style="text-align:center; margin: 2em auto;">   <div class="toc-inner" style="display: inline-block; background: #f8f8f8; border: 1px solid #ccc;">     <!-- 目次の内容 -->   </div> </div> 

これが困る理由

• インラインstyle属性はCSSで上書きしづらい。特にダークモードやスマホ専用デザインにしたい場合に融通が効かない

• ダークモード時、背景色が薄いまま、文字色だけ白くなり「白背景に白文字」で見えなくなる場合がある

• スマホではボックスの背景や枠がページ全体の色と同化し、ボックスが消えたように見える

2. 解決策：クラス＋CSSだけで管理

HTMLからすべてのインラインstyleを排除。クラスのみでレイアウトや装飾を制御。

single.htmlでの例（インラインスタイルなし）

{{ $toc := .TableOfContents }}
{{ if gt (len (plainify $toc)) 0 }}
  <div class="toc-wrapper toc-box">
    <div class="toc-inner">
      <h2>
        {{ if eq .Site.Language.Lang "ja" }}
          目次
        {{ else }}
          Table of Contents
        {{ end }}
      </h2>
      <nav id="TableOfContents">
        {{ $toc | safeHTML }}
      </nav>
    </div>
  </div>
{{ end }}

インラインスタイルはゼロ！

custom.cssに追加するべきCSS例

.toc-wrapper {
  text-align: center;   /* ボックス全体を中央配置 */
  margin: 2em auto;
}
.toc-inner {
  display: inline-block;
  background: #f8f8f8;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 1em 2em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  text-align: left;     /* 目次リスト中身は左寄せ */
}
.toc-inner h2 {
  margin-top: 0;
  text-align: center;   /* 見出しだけ中央寄せにしたい場合 */
}
/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
  .toc-inner {
    background: #222;
    border-color: #444;
    color: #f8f8f8;
  }
  .toc-inner a {
    color: #aadfff;
  }
}

3. なぜこの方法が効くのか

• スタイルはすべてCSSで制御するので、いつでも簡単にオーバーライド・拡張できる

• ボックスはページ中央、リスト内容は左寄せで見やすい

• ダークモードはCSSのメディアクエリでしっかり切り替え、どんな端末でもコントラスト良好

• モバイルでも同じ装飾が適用されるので、変な色になったり消えたりしない

• 間隔・角丸などもCSSファイルだけで自由に変更できる

4. 補足Tips

• モバイル用にだけ特別な上書きをしない限り、すべての端末で見た目が揃う

• 保守性を高めたいなら「CSSクラス」による装飾管理を徹底し、インラインスタイルは使わない

• 必ずPC/スマホ・ライト/ダーク両方で見た目をテストする

5. まとめ

インラインスタイルではなく、クラス＆最新CSSで装飾を管理すれば、どんな端末・モードでも崩れないキレイな目次ボックスが作れる。 シンプルHTML＋このCSSセットを組み合わせれば、見やすくて安定したTOCがいつでも完成。