【Swell】もくじ（目次）の横幅をカスタマイズする方法を紹介【CSSのコピペで解決】

「Swell」のもくじだけ横幅が狭いんだけど、記事と同じ幅に設定できないかな…

と思っている人もいるでしょう。

そこで、この記事では下記の内容を解説します。

WordPress テーマ「Swell」では、「もくじ（目次）」を表示させると記事幅よりちょっと細い感じで表示される仕様になっています。

このままでもいいんですが、個人的には記事幅に合わせたい、、、

ということで、「Swell」に表示される「もくじ（目次）」の横幅をカスタマイズする方法を紹介します。

「Swell」に表示される「もくじ（目次）」を記事幅に変える方法

スマホでページを見てみると「もくじ（目次）」が横幅いっぱいに表示されているんですが、PC で見たときだけ中途半端な横幅になっています。

どろいもん

まあ、昨今は PC で記事を読む人はほとんどいないので、いちいち気にするなと言われそうですけどね。

でも CSS をちょいと追加すれば変更できるので、カスタマイズしたいと思っていた人は参考にしてみてください。

追加すると、こんな感じで記事幅に合わせた「もくじ（目次）」が表示されるようになります。

サイドバーを表示させているサイトの場合

サイドバーを表示させている人がほとんどだと思うので、まずはサイドバーを表示させているサイトで「もくじ（目次）」を記事幅にする方法を紹介します。

どろいもん

実は、サイドバーありのサイトとこのブログのように 1 カラムのサイトでは CSS が変わってきます。

#main_content .p-toc {
    width: 100%;
}

逆に横幅を狭くしたいという人は、100% の部分の割合を変更すれば変えられます。

サイドバーがない 1 カラムのサイトの場合

おそらくタブレットで表示することを考慮してだと思うのですが、元々「もくじ（目次）」の幅が少し制限されています。

そのため、サイドバーを表示させているサイトと同じ CSS を追加しても、横幅いっぱいに表示されません。

どろいもん

サイドバーを表示させるときは記事幅が 844px に対して、1 カラムの時の記事幅は 940px になっています。

何にせよ、これから紹介する CSS を追加すれば記事幅で「もくじ（目次）」が表示されるようになります。

#main_content .p-toc {
  max-width: 100%;
}

@media (min-width: 960px) {
  #main_content .p-toc {
    width: 100%;
  }
}

「Swell」に表示される「もくじ（目次）」の横幅を自由に変えてみよう

今回はどちらかというと記事幅にまで横幅を広げる方法でしたが、記事内でも紹介した通り、100% の部分の割合を変更すれば逆に狭くすることも可能です。

中には「もくじ（目次）」を細くしたいという人もいると思うので、この記事の方法を参考にして横幅を自由に変えてみてください。

どろいもん

検索しても全然出てこなかったので、横幅をカスタマイズしたい人なんてあまりいないんだろうなと思いつつ、記事にしてみました。