WordPress Related Posts 関連記事 AMP用のカスタマイズ

tacsan

4年前

WordPress Twenty Seventeen
関連記事プラグイン WordPress Related Posts
AMPページ用のカスタマイズ

関連記事プラグイン「WordPress Related Posts」を使用しているが、AMPページではスタイルが崩れてしまう。

以下、AMPページ用にCSSをカスタマイズした記録。

　目　次

1.　「WordPress Related Posts」の設定と関連記事の表示
2.　通常ページでのカスタマイズ
3.　AMPページでのカスタマイズ
4.　AMPページでの課題

1. 「WordPress Related Posts」の設定と関連記事の表示

「Themes」は、【Vertical(Large)】を選択。

「Customize」は、【Display Thumbnails...】のみを選択。

通常ページでの、関連記事の表示。

AMPページでの、関連記事の表示。

AMPページでは、スタイルが崩れてしまう。

2. 通常ページでのカスタマイズ

「Customize」で、【Enable custom CSS】にチェックをいれ、サムネイルに枠線を設定してみる。

画像に枠線が入り、少し見やすくなった。

画像が正方形で縦長になっているので、【width: 160px】と【height: 96px】を設定してみる。

画像が横に拡がり、更に見やすくなる。

タイトルの文字を太字にし、大きさを 14pxにしてみる。

タイトルの文字は太字になったが、大きさは 14pxになっていない。

文字サイズの指定を、「 a { 」の中に記述する様に、位置を変更。

タイトルの文字サイズが、14pxになった。

【Enable custom CSS】への記述内容。

.related_post_title {
}
ul.related_post {
}
ul.related_post li {
width: 160px !important;
font-weight: bold;
}
ul.related_post li a {
font-size: 14px !important;
}
a.wp_rp_thumbnail {
    border: solid 1px #000000;
}
ul.related_post li img {
width: 160px !important;
height: 96px !important;
}

3. AMPページでのカスタマイズ

通常ページでのカスタマイズを、AMPページにも適用すべく、ampのテンプレート「style.php」にCSSを追記する。

組み込んだCSS。

/*-----------------------------------------------------------*/
/*    関連記事一覧 WordPress Related Posts CSS               */
/*-----------------------------------------------------------*/
.related_post_title {
}
ul.related_post {
}
ul.related_post li {
    position: relative !important;
    display: inline-block !important;
    vertical-align: top !important;
    zoom: 1 !important;
    *display: inline !important;
    width: 160px !important;
    margin: 10px 10px 10px 0 !important;
    padding: 0 !important;
    background: 0 0 !important;
	font-weight: bold;
}
ul.related_post li a {
	margin-bottom: 20px;
	font-size: 14px;
	font-weight: bold;
}
/* a.wp_rp_thumbnail {
	border: solid 2px #000000;
} */
ul.related_post li img {
	width: 160px !important;
	height: 96px !important;
}
/*-----------------------------------------------------------*/

AMPページでの、関連記事の表示結果。

4. AMPページでの課題

①．画像に枠線が入らない。

②．タイトル文字に、リンクの下線が付いている。

以上。
(2020.01.24)