TOC+(Table of Contents Plus)はWordPressのブログに簡単に目次を設置できる便利で有名なプラグインです。
この記事ではTOC+で作成した目次を中央に寄せて表示する方法をご紹介します。
TOC+のCSSを読み込む場合
TOC+はデフォルトではプラグイン独自のCSSを読み込む設定になっており、その設定のまま目次を中央寄せにしたい場合は以下のようにします。
目次を中央寄せにする
WordPressの管理画面から 外観 → テーマエディター をクリックします。
![外観→テーマエディター](https://1mmnote.net/wp-content/uploads/2021/03/toc-c5.png)
スタイルシート (style.css) に以下のコードを記述します。
#toc_container {
margin: 0 auto;
}
TOC+のCSSを読み込む場合はこれだけで目次を中央寄せにできると思います。
次にCSSを読み込まない場合の方法を説明します。
TOC+のCSSを除外する場合
TOC+を独自でカスタマイズしている場合はプラグインのCSSを読み込まない設定にするのが一般的だと思います。
TOC+のCSSを除外する設定
WordPressの管理画面から 設定 → TOC+ をクリックします。
![設定→TOC+](https://1mmnote.net/wp-content/uploads/2021/03/toc-c1.png)
「上級者向け(表示)」の表示をクリックします。
![上級者向け(表示)](https://1mmnote.net/wp-content/uploads/2021/03/toc-c2-500x258.png)
「CSS ファイルを除外」にチェックを入れます。
![CSSファイルを除外](https://1mmnote.net/wp-content/uploads/2021/03/toc-c3-500x378.png)
一番下の「設定を更新」をクリックします。
![設定を更新](https://1mmnote.net/wp-content/uploads/2021/03/toc-c4.png)
目次を中央寄せにする
上記の設定でTOC+のCSSを除外した場合に目次を中央寄せにする方法です。
まずWordPress管理画面から 外観 → テーマエディター をクリックします。
![外観→テーマエディター](https://1mmnote.net/wp-content/uploads/2021/03/toc-c5.png)
スタイルシート (style.css) に以下のコードを記述します。
#toc_container {
display: table;
margin: 0 auto;
}
最後に「ファイルを更新」をクリックしてスタイルシートを保存してください。
以上の方法でTOC+のCSSを除外した場合でも目次を中央寄せにできると思います。
当サイトでもこの方法でTOC+の目次を中央寄せにしています。
「display: table;」を中央寄せの目的で使用するのが本来の使い方として適切かどうかは分かりませんが、ひとつの方法として興味があればお試しください。
コメント