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

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

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

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

 

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

 

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

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

 

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

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

 

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

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

SponserLink

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ページの目次デザインの変更方法でした。

SimplicityWordPressブログ運営

関連おすすめ記事

宜しければシェアをお願い致します
運営者プロフィール
jin

妻と娘の3人で暮らしています。
「お金、時間、そして家族を大事にしたい」と考えるパパにとって、少しでもプラスになれたらいいなと思って情報発信しています。宜しくお願い致します。

jinをフォローする
ぱぱたす(PaPa+)

コメント