WordPress の有料テーマとして「Sango」を利用している人なんかは特に多いと思いますが、「目次」を簡単に表示できるプラグイン「Table of Contents Plus」は有名ですよね。
くま五郎
リョウ
その辺りの詳しい経緯は、Sangoの目次をEasy Table of Contentsに変更してみたの記事に書いています。
ただつい先日、3年以上ぶりに更新通知が来たんです。
おおぉっ!!
と思ってすぐさま更新ボタンを押してみたら、案の定デザインが崩れたんです。笑
3年くらい更新されず、音沙汰なかったプラグイン「Table of Contents Plus」が数日前に更新されとる😲
更新してみたら、表示が変になっとる😱笑
— りょう@ Befriend Music (@iamryosan) February 14, 2020
どうなったかというと、このように「もくじ」の文字がアイコンの中に埋もれてしまっていたんです。

まあ、更新作業には付きものですもんね、こういう問題は…
ということで、「Table of Contents Plus」を更新して見出しタイトルがアイコンに埋もれてしまった時の対処方法を紹介します。
Table of Contents Plus の見出し位置を修正する方法
Table of Contents Plus の見出し位置を修正する方法は、2通りあります。
- アナログにスペースを入れるだけ
- スマートに CSS を追加するだけ
テーマかプラグインがここら辺を修正したら元に戻す必要がありますけど、それまではどちらかでデザインを修正しておけます。
アナログにスペースを入れるだけ
ぶっちゃけですけど、見出しの部分がメニューアイコンに埋もれているだけなので、表示させる文字の前にスペースを入れたらメニューアイコンの右側に表示されるようになります。

簡単ではあるんですが、この方法では見出しの位置が気持ち少し上気味に表示されています。

「ちょっとくらい…」という人は、この方法でも良いでしょうね。
スマートに CSS を追加するだけ
個人的にはこちらの方がオススメですし、これから紹介するコードを追加すれば良いだけなので、スペースを入れるのとさほど変わらないと思います。
WordPress 管理画面の「外観 > カスタマイズ > 追加 CSS」に、下記のコードを追加してください。
#toc_container p.toc_title{
padding-left: 60px;
padding-top: 5px;
}
すると、見出しがアイコンの右側に表示されているはずです。

使っているテーマによって位置が変ることもあると思うので、「padding-left: 60px;」と「padding-top: 5px;」の数字を調整してみてください。
さいごに
今回のこの情報が必要な人はほとんどいないような気がしますけど、備忘録として残しておきます。
久しぶりに更新された「Table of Contents Plus」なんですけど、次にまたいつ更新されるのかどうか…笑
リョウ