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

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

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

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

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

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

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

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

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

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

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

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

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

.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;
}

/*-----------------------------------------------------------*/
/*    関連記事一覧 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ページでの、関連記事の表示結果。