この記事が気に入ったらシェアしてください

SimplicityにおけるAMPの目次デザインを変更する方法

この記事が気に入ったらシェアしてください

ampの目次デザインを変更する方法

本サイトはSimplicityの機能を利用して、比較的簡単にAMP対応が完了しました。

参考 SimplicityでAMP適用前とAMP適用後に確認した8個のこと

ただし、AMPの仕様でデザインはかなりシンプルなものになります。特に目次について「Table of Content Plus」を使用していると、かなり読みづらいデザインとなってしまいます。今回はAMPページの目次のデザインを変更しました。

デフォルトのままだと、このようなデザインですが、

ampの目次デザイン(変更前)

もう少し見やすくなるよう、このように変更しました。

ampの目次デザイン(変更後)

作業時間はコピペするだけですので、約1分です

AMPページの目次のデザインに悩んでいる方の参考になれば幸いです。

スポンサーリンク
広告

Table of Contents PlusのAMPデザインを変更する方法

本サイトは、Table of Contents Plus(TOC+)を使って目次を自動生成しています。WordPressを使ってサイトを構築している方は、このTOC+を使っている方がほとんどではないでしょうか。

参考  WordPressプラグインで記事の目次を自動生成する-Table of Contents Plus

通常のモバイルページでは、以下のように目次が表示されます。(上記の記事でも紹介していますが、デフォルトから少しデザインを変更しています)

tableofcontentsplusのデザイン

しかし、AMP化すると以下のようなデザインになってしまいます。

ampの目次デザイン(変更前)

SimplicityにおけるAMPの目次のデザインを変更する手順

AMP化すると目次のデザインが崩れてしまいます。これを解消する方法は「既存のモバイルページのCSSをAMP用のCSSにコピペ」するだけです。

Simplicityの場合はSimplicity子テーマの下にampファイルを作成してください。

  • simplicity2-child
    • amp.css ←新規作成
    • style.css
    • functions.php

そもそも、子テーマって何?という方は以下の記事を参考に子テーマを作成してください。

参考  Simplicityを使うなら子テーマをインストールしておいた方がいい

なお、Simplicityの場合、子テーマが公開されており、AMP用のCSSが子テーマに含まれています。

参考  Simplicity2の子テーマ

AMPの子テーマが用意できれば、WordPressの管理画面から「外観」>「テーマの編集」を選択してください。

テーマの編集への移動方法

続いて、画面右下にある「amp.css」を選択してください。

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の目次デザイン(変更後)

以上、AMPページの目次デザインの変更方法でした。

スポンサーリンク
広告
広告

この記事が気に入ったらシェアしてください

もし良かったらフォローしてください