SimplicityでAMP化したら目次プラグイン(TOC)の表示が崩れた際の対処法

webサイトをスマホで見る人がますます増える中、googleが薦めているwebサイトを高速に表示してくれるらしい技術、AMP(Accelerated Mobile Pages)対応をうちのサイトもそろそろやらねば･･･と一念発起。

週末を使ってさっそくトライしてみたのですが･･･。

案の定、一筋縄ではいかず、あちこちつまづいてしまいました。(^_^;)

わたしがつまづいた点、対処した方法について、備忘録も兼ねて書いておきます。

設定は簡単だけど、万能ではない

うちのwebサイトはご覧のとおり、わいひらさんのSimplicityを使わせて頂いております。

Simplicity

内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。

wp-simplicity.com

SimplicityはすでにAMP対応しているので、管理画面でAMP機能の箇所をチェックするだけ。

とっても簡単、お手軽にAMP対応できます。

プログラミングには疎いので詳しくはわかっていませんが、WordPressが動的にWebページを作る際、Simplicity側でHTMLをAMP対応に書き換えてくれるようですね。

なんて便利なんでしょう！

ユーザーがAMPに関する専門的な知識を持ってなくても、特に意識することもなく、自動で表示するHTMLを書き換えて表示してくれるのはとってもありがたいのですが、さすがに万能とはいかないようです。

どうやらAMPの仕様にはさまざまな制約があるようで、webサイトの作りによっては、表示が崩れてしまい、もともとのサイトのデザイン通りには表示されないことも多々あるようです。

目次が崩れる･･･

当サイトもAMP機能をONにしたところ、投稿記事の目次プラグインとして使っていたTable of Contents Plusの表示が崩れてしまいました。

SimplicityのAMP機能を適用する前のTOC(Table of Contents Plus）の表示がこちら。

このようにデフォルトのシンプルなデザインの目次を使っていました。

ところが、AMP機能をONにすると･･･

AMPを適用した後のTOC(Table of Contents Plus）の表示がこちら。

どうやらCSSの装飾がOFFとなってしまったようです。

せっかくAMP対応して高速にwebサイトが表示されるにしても、見た目がかっこ悪くなるのはやっぱり忍びない･･･。

そこで、もともとの表示に近いデザインをあらたに適用させることにしました。

新たにCSSを設定してAMP表示をした際のTOC（Table of Contents Plus）の表示がこちら。

ちなみに、AMP対応する前のものがこちら。

スマホの縦画面で表示したときの見た目は、ほぼ元通りになりました！

文字サイズなど多少の誤差はありますが、まぁそこまではこだわりません。

CSSソースコード

備忘録かねて「amp.css」に適用したCSSのソースコードを載せておきますね。

#toc_container {
	background-color: #f9f9f9;
	border: 1px solid #aaa;
}
#toc_container .toc_title {
	margin: 10px 15px 0 15px;
	text-align: center;
}
#toc_container ul.toc_list   {
	list-style: none;
	line-height: 1.6em;
	margin: 0px 0px;
	padding: 10px;
}
#toc_container ul.toc_list a {
	text-decoration: none;
}
#toc_container ul.toc_list ul li   {
	padding-left: 20px;
}
#toc_container ul.toc_list li  {
	list-style: none;
}
#toc_container ul.toc_list li ul  {
	margin: 0;
	padding: 0;
}