Table of Contents Plus の見出し位置を修正する方法【更新後に文字が埋もれたので】

WordPress の有料テーマとして「Sango」を利用している人なんかは特に多いと思いますが、「目次」を簡単に表示できるプラグイン「Table of Contents Plus」は有名ですよね。

その辺りの詳しい経緯は、Sangoの目次をEasy Table of Contentsに変更してみたの記事に書いています。

ただつい先日、３年以上ぶりに更新通知が来たんです。

おおぉっ！！

と思ってすぐさま更新ボタンを押してみたら、案の定デザインが崩れたんです。笑

３年くらい更新されず、音沙汰なかったプラグイン「Table of Contents Plus」が数日前に更新されとる😲

更新してみたら、表示が変になっとる😱笑

— りょう@ Befriend Music (@iamryosan) February 14, 2020

どうなったかというと、このように「もくじ」の文字がアイコンの中に埋もれてしまっていたんです。

まあ、更新作業には付きものですもんね、こういう問題は…

ということで、「Table of Contents Plus」を更新して見出しタイトルがアイコンに埋もれてしまった時の対処方法を紹介します。

Table of Contents Plus の見出し位置を修正する方法

Table of Contents Plus の見出し位置を修正する方法は、２通りあります。

テーマかプラグインがここら辺を修正したら元に戻す必要がありますけど、それまではどちらかでデザインを修正しておけます。

アナログにスペースを入れるだけ

ぶっちゃけですけど、見出しの部分がメニューアイコンに埋もれているだけなので、表示させる文字の前にスペースを入れたらメニューアイコンの右側に表示されるようになります。

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

「ちょっとくらい…」という人は、この方法でも良いでしょうね。

スマートに CSS を追加するだけ

個人的にはこちらの方がオススメですし、これから紹介するコードを追加すれば良いだけなので、スペースを入れるのとさほど変わらないと思います。

WordPress 管理画面の「外観 > カスタマイズ > 追加 CSS」に、下記のコードを追加してください。

#toc_container p.toc_title{
	padding-left: 60px;
	padding-top: 5px;
}

すると、見出しがアイコンの右側に表示されているはずです。

使っているテーマによって位置が変ることもあると思うので、「padding-left: 60px;」と「padding-top: 5px;」の数字を調整してみてください。

さいごに

今回のこの情報が必要な人はほとんどいないような気がしますけど、備忘録として残しておきます。

久しぶりに更新された「Table of Contents Plus」なんですけど、次にまたいつ更新されるのかどうか…笑