こんにちは！朝日奈（@asahinablog）です。
目次プラグインで一番使いやすいのはTable of Contents Plusだと思うのですが、意外にも中央寄せにする設定項目がありません。
プラグインを有効化しただけでは下図のように左寄せになってしまいます。
WordPressテーマによっては自動で中央寄せになるようになっていますが、僕が使っているテーマは中央寄せにはなりません。
ですので、CSSをカスタマイズする必要があります。
といってもほんの数行をコピペするだけです。
目次
Table of Contents Plusを中央寄せにするCSS
下記コードをコピーしてください。
[su_box title=”中央寄せコード”]#toc_container {
margin: auto;
}
そして、ダッシュボードから【外観】⇒【カスタマイズ】を開きます。
【追加CSS】を開きます。
先ほどのコードを貼り付けて保存します。
これで中央寄せになりました。
中央寄せが反映されない時の対処法
今回は【外観】⇒【カスタマイズ】の追加CSSにコードを貼り付けましたが、【外観】⇒【テーマエディター】で直接スタイルシートに書き込んでいる人もいるかもしれません。
実はスタイルシートに直接書き込んだ場合は設定が反映されないことがあります。
これを解決するには次の2つの方法があります。
- 【外観】⇒【カスタマイズ】の【追加CSS】にコードを貼り付ける
- !importantを付ける
1個目は上記で紹介した通りです。
それでも反映されない場合は2個目を試してみてください。!importantを付けた下記コードを貼り付けます。
[su_box title=”中央寄せコード”]#toc_container {
margin: auto !important;
}
Table of Contents Plusは、プラグイン自体もCSSを出力しているため、WordPressテーマのCSSが無視される場合があります。
しかし、!importantを付けることで、優先してそのコードを反映してくれます。
横幅をMAXにして中央寄せの見た目にする
目次を囲んでいるボックス部分を横幅最大にして、中央寄せのような見た目にすることもできます。
ダッシュボードから【設定】⇒【TOC+】を開きます。
外観の【横幅】を100%に設定して保存します。
これで横幅が最大になりました。
コードの編集が面倒な場合は、これでもいいかもしれませんね。
ただ、目次タイトルだけが中央寄せになっているのが気になりますね。これも左寄せにしてしまいましょう。
下記コードを【外観】⇒【カスタマイズ】の【追加CSS】に貼り付けてください。
[su_box title=”目次タイトル左寄せコード”]#toc_container .toc_title {
text-align: left !important;
}
これで目次タイトルも左寄せになりました。
でもここまでするなら最初から中央寄せコードを書いた方が早いですね。笑
Table of Contents Plusで完読率をあげよう
読者が検索エンジン経由で自分の記事を見つけてくれた時、この記事にはどんな内容が書いてあるんだろう？と目次を見てざっと判断します。
ですので、わかりやすい見出しを付けて目次を見ただけで記事の内容が把握できるにようするといいですね。
目次を見て、「この記事には私が求めていることが書いてありそう！」と思ってくれれば最後まで読んでくれる可能性も高いです。
そうすればブログの評価も上がってSEOも強くなりますね。
僕の無料メール講座では、他にもブログのノウハウをご紹介したり、稼ぎ続けるための考え方などを配信していますので、こちらもあわせてご覧ください。
