WordPressの悩み相談「目次を中央寄せにしたい」を解決。
ひと昔はアメブロのカスタム相談が多かったですが、最近はWordPress（ワードプレス）に移行しているブロガーの方が多くなってきた気がします。
ココナラでの相談所でもWordPress（ワードプレス）の悩みをよく聞きますね。
その中でもコーディングの部類に入る、CSSデザイン調整が多いです。今回の悩みもCSSで解決しました。
当ブログでも↓のように使っています。これも中央寄せしてます。
相談内容
「目次を中央寄せにしたい」目次というのは、記事内のHタグを自動取得しアンカーリンクを貼ってくれるプラグイン「Table of Contents Plus」の利用が主ですね。今回もこれを利用した相談でした。
解決方法
「Table of Contents Plus」には設定がありますが、中央寄せというのはありません。なので、CSSで調整いたします。
なお、設定内の外観で「グレー（デフォルト）」である場合になります。
まず、現在のソースをみると出力している部分が以下のようになります。
<div id="toc_container" class="no_bullets"> <p class="toc_title">目次 <span class="toc_toggle">[<a href="#">hide</a>]</span></p> <ul class="toc_list"> <li><a href="#i"><span class="toc_number toc_depth_1">1</span> 見出し1</a></li> <li><a href="#i-2"><span class="toc_number toc_depth_1">2</span> 見出し2</a></li> <li><a href="#i-3"><span class="toc_number toc_depth_1">3</span> 見出し3</a></li> </ul> </div>
一番外側のDIVにIDがありますので、これを利用しCSSを設定します。
この場合の中央寄せは、margin:0 auto; で良いでしょう。なので、CSSを適用させるには以下のように書きます。
#toc_container {margin:0 auto;}
これだけで、目次は中央寄せとなります。
CSSを追記する場所は、テーマにより異なりますが、テーマ設定にCSS項目があればそこに記載すれば良いし、無ければ「外観＞テーマの編集」からCSSを選択し追記しましょう。
なお、追記する場合は表示崩れが発生する場合もありますのでバックアップは必ずとってから行いましょう。
また、テーマ自体をいじるとテーマのアップデートで上書きされる場合もあります。基本的には「子テーマ」を利用するのが推奨です。
「子テーマ」導入については、ググってください。そちらの方が分かりやすいと思います。