【Table of Contents Plus】目次を横幅いっぱいにすると微妙にずれる

スポンサーリンク

 

WordPressで目次といえば

Table of Contents Plus

というくらい誰しもが使っているプラグインでしょう。

 

使っている覚えがなくとも、テーマなどで目次を表示しているものはTable of Contents Plusを内部で使用していることが多いです。

 

とても使い勝手のいいプラグインなのですが、

一つだけ問題があります。

 

それは、

横幅

です。

スポンサーリンク

Table of Contents Plusで目次を横幅いっぱいにしようとすると微妙にずれてしまう

 

Table of Contents Plusでは横幅の設定が、デフォルトで「自動」になっています。

これは、目次に表示する文字列の長さによって目次の幅が決まります。

 

たとえば、

このように目次に表示する文字列が短いと、目次の幅も短くなってしまいます

 

こうなってしまうのが嫌だという方は少なからずいると思います。

そこで、Table of Contents Plusの設定で目次の幅を「100%」にすることができます。

 

この設定を行うと…

 

こうなります!

いやいや、なんか違うんですよ…そうじゃない…

 

この辺がとても邪魔ですね。

 

今回は、この邪魔な部分をとっぱらって、目次がちゃんと横幅いっぱいになるようにする方法をご紹介します。

 

邪魔な部分ができてしまう原因

 

対処の方法を紹介する前に、軽くこうなってしまう原因を説明します。

 

ずばり、

paddingとborderのせい

です。

 

CSSができる人であれば、あるあるな事象なのですが、

目次の外枠に、

  • padding: 10px
  • border: 1px

が設定されています。

 

この2つのパラメーター分の幅の22px(padding-left: 10px, padding-right: 10px, border-left: 1px, border-right: 1px)が考慮されておらずに、その分はみ出てしまっています。

 

目次の微妙なずれを直す方法

 

では、目次の微妙なずれを直す方法をご紹介します。

といっても、直し方はとても簡単で、CSSのパラメーターをひとつ追加するだけで直すことができます。

 

まずは、Table of Contents Plusの幅の設定を「100%」にしてはみ出た状態にしておきます。

 

 

次に、子テーマの「style.css」に次のコードを追記します。

※必ず子テーマのstyle.cssに記述してください。

 

追記したら保存して完了です。

たったこれだけで、邪魔だった部分が以下のようになります。

 

 

まとめ

 

Table of Contents Plusで作成した目次を横幅いっぱいにしたい場合は、

Table of Contents Plusの設定で横幅を「100%」にして、「box-sizing: border-box;」を追加しましょう。

コメント