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

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

でも、更新が3年以上もされてなかったから別のプラグインを Sango の公式で勧めてたよね。

くま五郎

リョウ

そうそう、だから僕も「Easy Table of Contents」に変えたんだー。

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

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

おおぉっ!!

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

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

Table of Contents Plus

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

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

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

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

見出し位置を修正する方法
  • アナログにスペースを入れるだけ
  • スマートに CSS を追加するだけ

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

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

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

Table of Contents Plus

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

Table of Contents Plus

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

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

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

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

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

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

Table of Contents Plus

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

さいごに

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

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

リョウ

なので、そこら辺に不安がある人は「Easy Table of Contents」に変えておいた方が良いかもしれませんよ。