Simplicity2のAMPページでTable of Contents Plusを綺麗に表示する

WordPress の無料テーマSimplicity2は、手軽に AMP 対応ができてとても便利です。

ただ、AMP ページの見映えについては、自分で調整してキレイに見えるよう頑張らないといけない部分もあります。

頑張るポイントの1つが、Table of Contents Plus プラグインを利用している場合の目次部分の見映えです。

今回は、AMP ページでも TOC Plus の目次がキレイに見えるようなカスタマイズの方法をご紹介します。

カスタマイズといっても、コピペでできるので、簡単です。

(なお、下記では TOC Plus のバージョンは、執筆時点の最新である1601を前提としています。)

スポンサーリンク

問題点を確認

通常ページでの TOC Plus の目次は次のように見えます。

ところが、Simplicity2 の AMP ページでは次のような表示となり、スタイルが無くなっていることが分かります。

これを修正します。

amp.css に追記

やり方は簡単です。Simplicity2 の amp.css に、TOC Plus のスタイルファイルの内容をコピペするだけです。

TOC Plus のスタイルファイルは次のようにすれば確認できます。

  1. 管理画面の「プラグイン」>「プラグイン編集」
  2. 「編集するプラグインを選択」で「Table of Contents Plus」を選択
  3. table-of-contents-plus/screen.min.css をクリックして表示

面倒臭い人は、次の内容をコピペすればOKです。

上記をコピーして、Simplicity2 のamp.css (子テーマを使用している場合は、子テーマの amp.css)に貼り付けて保存してください。

なお、コピーするのは screen.min.css ではなく、改行等が入っていて見やすい screen.css でも構いません。

screen.css の内容はこちら。

結果を確認

上記を実施すると、AMP ページでも TOC Plus 目次がキレイに表示されます。

めでたしめでたし♪