【WordPress】TOC+の目次を中央表示

目次を表示する際にWordPressプラグインの「Table of Contents Plus」（TOC+）を使っている方も多いと思います。

そのままでも全く問題なく使えますが、通常は表示位置が左寄せ（左揃え）になっています。

これを中央寄せ（中央揃え）で表示する方法を解説します。

　 このページはAmazonアソシエイト含むアフィリエイト広告を掲載しています。

外観カスタマイズの選択

TOC+のインストールがまだの方はこちら

【WordPress】プラグインで目次を付ける

まず、管理画面のメニューから[外観]＞[カスタマイズ]と進みます。

カスタマイズメニューが表示されるので、下のほうにある[追加CSS]を選択します。

すると、CSSの入力ができるようになります。

追加CSSの入力

CSSの入力スペースをクリックしてカーソルを表示し、次のコードを入力します。

1#toc_container {
2  margin: 0 auto;
3}

入力出来たら、右上の[公開]ボタンを押します。

記事ページを表示してみると、左寄せだった目次が中央寄せになっています。

CSS内容について

設定自体は上記の入力ができていればOKですが、折角なので入力したCSSについて簡単に解説します。

toc_container

CSSでは最初にセレクタを記載します。

セレクタはCSSがどの部品に適用されるかという指定です。”#”はhtml上の部品のIDを示しています。

TOC+では、表示する目次の部品のIDに”toc_container”が設定されていますので、「#toc_container」で目次の部品に対するCSSを指定することになります。

margin: 0 auto;

marginは部品周りの余白を指定するプロパティです。今回は、目次の周りの余白を指定します。

次にmarginに対する値として「0 auto」を設定しています。marginに2つの値を設定すると、前の値は「上下」、後の値は「左右」に対する余白指定となります。

「0 auto」という設定により、上下の余白は0で左右の余白はauto（＝自動で左右均等）になり、結果として中央寄せになります。

「margin: auto;」でもいい？

marginの値に1つのみ値を設定すると「上下左右」に対する余白指定となりますので、「margin: auto;」という指定でも恐らく同じ結果になるでしょう。

ただ、意図しない箇所（今回だと上下のmargin指定）への設定は、後々プラグインのアップデートでTOC+側に仕様変更があった場合などに思わぬ影響があるかもしれません。

今回に限らず、独自の設定追加については、極力必要な箇所だけに絞るほうが安全だと思います。

CSSはいろんな書き方ができます。異なる書き方で同じ見た目を表現することもできますが、最適な書き方を模索していきましょう。

you-tnb-298

理系大学卒業後、音楽の専門学校へ。ギター・ドラムでの音楽活動を経て、30歳手前でプログラマーへ転身。

---

ウェブシステム・スマホアプリ・マクロツールなど様々な受託開発を経験した後、メーカー企業で業務アプリケーションの開発に携わる。45歳を過ぎて独立、グローナレッジ設立。

---

応用情報処理技術者、ウェブデザイン技能検定3級、色彩検定2級、日商簿記2級。登山は富士山経験あり、マラソンはハーフ1h58m。