Table of Contents Plus でぶら下げインデントする方法

錨

WordPress の目次出力プラグインTable of Contents Plus。便利ですよね。私のブログでも使わせてもらっています。

すごく良いプラグインなんですが、もうちょっとこうだったらなぁ!という点も無いわけではありません。その一つは、インデントに関すること。

見出しが長くなった際に、目次内の見出しテキストが改行されることがあるのですが、2行目以降の字下げ(Word で言う「ぶら下げインデント」)が無いんですよね。

こんな感じで、少し見づらい。

インデント前

私の場合、「見出しテキストに番号を振る設定」にしています。なので赤い矢印のところが、もうちょっと右寄りになっていてほしい。

PC で閲覧する場合は、よほど見出しが長くないと改行はされませんが、画面幅の狭いスマホなどの端末で見ると改行されていることがよくあり、気になっていました。

そこで、スタイルシートを使って字下げのカスタマイズを行いましたので、この記事にまとめておきます。

コピペできる形にしておきますので、良かったら使ってくださいね。

スポンサーリンク

コピペでOK!TOC+ ぶら下げインデント用 CSS

やり方は簡単。テーマのスタイルシートに下記の記述をコピペして保存してください。

そうすると私のブログでは次のような完成形となります。

インデント後

緑色の矢印部分が字下げされているのがお分かりいただけると思います。随分見やすくなりました!

CSS がある程度分かる人向けに少し補足します。

上記の例では !important を書いているのですが、これは無くてもおそらく大丈夫です。AMPページ用のスタイルとして使う場合は、むしろ外したほうが良いでしょう(!importantがあるとAMPエラーになるため)。

ちょっとした注意点

このカスタマイズをご自身のブログで実施される場合は、いくつか注意していただきたいことがあります。

字下げの量はフォント依存

上記の字下げは em という単位を使って行っています。

em はアルファベットの大文字の M の横幅を基準にした長さなので、フォントによって 1em の実際の長さは微妙に異なってきます。

なので、ご自身で上記スタイルを適用したあと、-1em, -1.8em, -2.4em の値を少し調整していただく必要が出てくると思います。

ちなみに、-1em が h2 見出し、-1.8em が h3 見出し、 -2.4em が h4 見出しに対応しています。

動くのは1行目

実際に-1em, -1.8em, -2.4em の値を増やしたり減らしたりすると分かりますが、実は、この値を変えると動くのは2行目ではなく1行目です。

これは上記スタイルが「まず目次内のテキストを全部右に寄せて、そのあと1行目のみ左に動かす」というテクニックで出来ているためです。

カスタマイズするにあたり必ず理解している必要は無いのですが、もう少し説明しますので、参考にされてください。

まず第1段階として、次のスタイルで目次の各見出しテキストのパディング左を増やします。

左側の余白が大きくなりますので、全体的に右に寄ります。

次の段階として、残りのスタイルで、それぞれの1行目を左に引き戻します。

1行目だけ左に戻った結果、全体としては「ぶら下げインデント」風に見えている、っていうことなのです。

謝辞

このカスタマイズをするにあたり、下記ブログ記事を参考にさせていただきました。

CSSで1行目の見出し項目をぶら下げインデントする
自宅用に新しいパソコンを買った sakai です。 スペック重視とお店で伝えたら「ちょっと値が張りますよ~」と店員に言われたのでドキドキしていたのですが、CPU が Core i7、メモリが 6GB

ありがとうございました。m(_ _)m

まとめ

ちょっとしたことですが、スタイルを工夫することで目次が見やすくなり、その分、ブログの印象も良くなるのではないかなと思います。

うまくいかない等、何かありましたらコメントにてどうぞ!

スポンサーリンク
スポンサーリンク