本サイトはSimplicityの機能を利用して、比較的簡単にAMP対応が完了しました。
参考 SimplicityでAMP適用前とAMP適用後に確認した8個のこと
ただし、AMPの仕様でデザインはかなりシンプルなものになります。特に目次について「Table of Content Plus」を使用していると、かなり読みづらいデザインとなってしまいます。今回はAMPページの目次のデザインを変更しました。
デフォルトのままだと、このようなデザインですが、
もう少し見やすくなるよう、このように変更しました。
作業時間はコピペするだけですので、約1分です。
AMPページの目次のデザインに悩んでいる方の参考になれば幸いです。
Table of Contents PlusのAMPデザインを変更する方法
本サイトは、Table of Contents Plus(TOC+)を使って目次を自動生成しています。WordPressを使ってサイトを構築している方は、このTOC+を使っている方がほとんどではないでしょうか。
参考 WordPressプラグインで記事の目次を自動生成する-Table of Contents Plus
通常のモバイルページでは、以下のように目次が表示されます。（上記の記事でも紹介していますが、デフォルトから少しデザインを変更しています）
しかし、AMP化すると以下のようなデザインになってしまいます。
SimplicityにおけるAMPの目次のデザインを変更する手順
AMP化すると目次のデザインが崩れてしまいます。これを解消する方法は「既存のモバイルページのCSSをAMP用のCSSにコピペ」するだけです。
Simplicityの場合はSimplicity子テーマの下にampファイルを作成してください。
- simplicity2-child
- amp.css ←新規作成
- style.css
- functions.php
そもそも、子テーマって何？という方は以下の記事を参考に子テーマを作成してください。
参考 Simplicityを使うなら子テーマをインストールしておいた方がいい
なお、Simplicityの場合、子テーマが公開されており、AMP用のCSSが子テーマに含まれています。
AMPの子テーマが用意できれば、WordPressの管理画面から「外観」＞「テーマの編集」を選択してください。
続いて、画面右下にある「amp.css」を選択してください。
そこで、以下のcssをコピペしてください。
/*--------------------------------------
TOC+ デザイン変更
--------------------------------------*/
#toc_container {
display: block !important;
width: 85% !important;
background: #ffffff ;
border: 1px solid #ccc;
font-size: 95%;
box-sizing: border-box;
line-height: 1.4;
margin: 36px auto;
padding: 1em 2em;
}
#toc_container .toc_title {
text-align: center;
}
#toc_container .toc_list {
width: 95% ;
padding-left: 0;
}
#toc_container ul {
list-style: none;
margin-bottom: 0;
}
#toc_container ul li {
margin: 1px;
padding-left: 0;
text-indent: 0;
}
#toc_container ul a {
display: block;
text-decoration: none;
color: #444; /* リンク色 */
border-bottom: 1px dotted #ccc; /* リンク下線(1pxの間隔と色指定)*/
}
#toc_container .toc_list > li {
margin-bottom: 30px;
}
#toc_container .toc_list > li > ul > li {
margin-bottom: 8px;
}
#toc_container .toc_list > li > a {
margin-bottom: 8px;
border-bottom: 2px solid #00f; /* 大見出しの下線 */
font-size: 110%; /* 大見出しのフォントサイズ */
}
#toc_container ul ul {
padding: 0;
}
#toc_container li {
margin-bottom: 1em;
padding-bottom: 0.2em;
}
これであとは、AMPページのデザインを確認してみてください。デザインが以下のように変わっていれば、OKです。
なお、Google検索に反映されるまでには少し時間がかかりますので、ご注意ください。（私の場合は10分程度でした）
以上、AMPページの目次デザインの変更方法でした。
コメント