【WordPress】関連記事プラグイン「Related Posts」をスマホで2列に

WordPress（ワードプレス）で、ブログ記事に「関連記事」を並べてくれるプラグイン「Wordpress Related Posts」をPC表示で4列ｘ2行、スマホ表示でで2列ｘ4行にして「良い感じ」にする方法。

関連記事プラグイン「Wordpress Related Posts」

関連記事を表示するプラグインにの中で、一番しっくり来た「Wordpress Related Posts」。

他のプラグインでも試みたのですが、理想通りになったのがこのプラグインのみ。

通常の設定だとバランスが悪い

WordPress Related Postsの設定で、レイアウトを「Vertical (Large)」に変更することで4ｘ2、2ｘ4の形にはなります。

しかし、テーマによってはパソコン表示、スマホ表示ともにバランスが悪くなってしまします。

横に空いた隙間を埋めて綺麗に並べたいんです↓↓↓

その場合、設定ページの「Enable custom CSS」を使うことである程度はいじれるのですがイメージ通りにはならないなと。

cssファイルを直接いじる

レイアウト設定を「Vertical (Large)」のまま、cssファイルを直接いじります。

「wp-content」→「plugins」→「wordpress-23-related-posts-plugin」→「static」→「themes」→「vertical.css」

35行あたりのここ↓↓↓

ul.related_post li {
position: relative !important;
display: inline-block !important;
vertical-align: top !important;
zoom: 1 !important;
*display: inline !important;
width: 150px !important;
margin: 10px 10px 10px 0px !important;
padding: 0 !important;
background: none !important;
}

↓↓↓

ul.related_post li {
position: relative !important;
display: inline-block !important;
vertical-align: top !important;
zoom: 1 !important;
*display: inline !important;
width: 24%;/*ここを変更*/
margin: 10px 1% 10px 0px;/*ここを変更*/
padding: 0 !important;
background: none !important;
}

55行あたりのここ↓↓↓

ul.related_post li img {
display: block !important;
width: 150px !important;
height: 150px !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
border: none !important;

border-radius: 3px !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

↓↓↓

ul.related_post li img {
display: block !important;
width: 100% !important;/*ここを変更*/
height: auto !important;/*ここを変更*/
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
border: none !important;

border-radius: 3px !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

78行あたりのここ↓↓↓

ul.related_post li {
display: inline-block !important;
width: 150px !important;
clear: both !important;
}

↓↓↓

ul.related_post li {
display: inline-block !important;
width: 46%!important;/*ここを変更*/
margin: 10px 2%!important;/*これを追加*/
clear: both !important;
}

これでPC表示で4列ｘ2行、スマホ表示でで2列ｘ4行で良い感じになりました。

ついでにサムネイルも変える

関連記事で使用されるサムネイルのサイズは、デフォルトで150ｘ150なのでテーマによっては引き伸ばして表示されると思います。

設定から「Custom size thumbnails」にチェックを入れて、テーマで使用されている程よいサイズの画像サイズを入れます。

これでしっくりきました↓↓↓

参考までに。

Byさちお

＼ SHARE ／