「Easy Table of Contents」導入後、スマホで画面がはみ出るようになった時の対処法

目次生成プラグイン「Easy Table of Contents」

WordPressで目次を作ってくれるプラグインといえば、「Table of Contents Plus」が有名ですね。ただ、数年間更新されていないことと、個人的に少し使いづらい印象がありましたので、他のプラグインを探していました。

そこで、「Easy Table of Contents」を見つけてインストールしたところ、理想的な目次ができました。この記事の上のほうに目次がついていると思いますが、それはこのプラグインで自動生成されたものです。

スマホで表示が乱れるトラブル発生

PCでの表示は問題なかったのですが、スマホでは横スクロールバーが表示される問題が発生しました。この状態で下にスクロールすると左右に揺れるように表示されてしまうため、非常に見づらいのです。他のブログでも、ときどき見かける症状ですね。

いろいろ原因を探っていたところ、どうやら「Easy Table of Contents」のタイトル部分が悪さをしていることが分かりました。この部分に横幅が指定されておらず、画面からはみ出るように表示されていたわけですね。当サイトでは「目次」と書かれている部分ですね。なので、この部分のクラスに横幅を指定することにしました。

CSSを一行書くだけで解決!

.ez-toc-title-container{ width: 90%;}

今回は「.ez-toc-title-container」というクラスに、横幅「width: 90%;」を指定しました。「目次」という二文字が表示される横幅があれば問題ありませんので、例えば「width: 100px;」などでも大丈夫です。

同様の症状が現れて困っている方は、ぜひ試してみてくださいね!

参考リンク

WordPressプラグイン「Easy Table of Contents」
WordPressプラグイン「Table of Contents Plus」