HOME → 3 WordPress → 04 運用とトラブル → 

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

WordPress Twenty Seventeen
関連記事プラグイン WordPress Related Posts
AMPページ用のカスタマイズ
 
関連記事プラグイン「WordPress Related Posts」を使用しているが、AMPページではスタイルが崩れてしまう。
 
関連記事プラグイン「WordPress Related Posts」を使用しているが、AMPページではスタイルが崩れてしまう
 
以下、AMPページ用にCSSをカスタマイズした記録。
 

 

スポンサー リンク

 

 
 
 
 
 
1. 「WordPress Related Posts」の設定と関連記事の表示
 
「Themes」は、【Vertical(Large)】を選択。
「Themes」は、【Vertical(Large)】を選択
 
「Customize」は、【Display Thumbnails...】のみを選択。
「Customize」は、【Display Thumbnails...】のみを選択
 
通常ページでの、関連記事の表示。
通常ページでの、関連記事の表示
 
AMPページでの、関連記事の表示。
関連記事プラグイン「WordPress Related Posts」を使用しているが、AMPページではスタイルが崩れてしまう
 
AMPページでは、スタイルが崩れてしまう。
 
 
 
2. 通常ページでのカスタマイズ
 
「Customize」で、【Enable custom CSS】にチェックをいれ、サムネイルに枠線を設定してみる。
「Customize」で、【Enable custom CSS】にチェックをいれ、サムネイルに枠線を設定してみる
 
画像に枠線が入り、少し見やすくなった。
画像に枠線が入り、少し見やすくなった
 
画像が正方形で縦長になっているので、【width: 160px】と【height: 96px】を設定してみる。
画像が縦長になっているので、【width: 160px】と【height: 96px】を設定してみる
 
画像が横に拡がり、更に見やすくなる。
画像が横に拡がり、更に見やすくなる
 
タイトルの文字を太字にし、大きさを 14pxにしてみる。
タイトルの文字を太字にし、大きさを 14pxにしてみる
 
タイトルの文字は太字になったが、大きさは 14pxになっていない。
タイトルの文字は太字になったが、大きさは 14pxになっていない
 
文字サイズの指定を、「 a { 」の中に記述する様に、位置を変更。
文字サイズの指定を、「 a { 」の中に記述する様に、位置を変更
 
タイトルの文字サイズが、14pxになった。
タイトルの文字サイズが、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ページでの、関連記事の表示結果。
AMPページでの、関連記事の表示結果
 
 
 
4. AMPページでの課題
 
①.画像に枠線が入らない。
 
②.タイトル文字に、リンクの下線が付いている。
 
 
以上。
(2020.01.24)
 

 

スポンサー リンク

 

             

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください