こんにちは祐（@yuu30810）です。
今回は『最新記事、関連記事、注目記事を2列表示にカスタマイズする方法』について、解説していきます。
下記が完成イメージです⇩
とくに難しい作業は必要なく、コピペと、画像サイズを多少イジる程度で可能です。
ぜひ参考にしてみてください。
・最新記事、関連記事、注目記事を2列表示にする方法
・画像やタイトルが見切れてしまったときの対処法
・画像サイズの変更の方法
2列表示するまでの手順
①ダッシュボードの【デザイン】を選択
②【スパナマーク】→【デザインCSS】の順で選択し、これから紹介するコードを枠内に貼り付ける
2列表示にするCSSコード
.urllist-with-thumbnails {
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.urllist-with-thumbnails li {
width: calc( 50% - 5px);
}
.urllist-with-thumbnails li:nth-child(2n) {
margin-left: 10px;
}
.urllist-with-thumbnails li .urllist-image {
margin: 0 0 4px;
}
上記のコードを、デザインCSSに貼り付けます。
これだけで、おおまかな作業は完了です。
当ブログでは、人気記事と、関連記事しか表示していないのですが、最新記事でも問題なく反映します。
下記のコードをコピペしてください。
スマホのみ2列表示にするCSSコード
@media (max-width: 767px){
.urllist-with-thumbnails {
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.urllist-with-thumbnails li {
width: calc( 50% - 5px);
}
.urllist-with-thumbnails li:nth-child(2n) {
margin-left: 10px;
}
.urllist-with-thumbnails li .urllist-image {
margin: 0 0 4px;
}
}
スマホ表示のみ2列にし、PC表示では1列のままにしたい方は、上記のコードをデザインCSSに貼り付けてください。
個別で表示の仕方を設定したい場合
最新記事や、注目記事、関連記事すべてに表示したいわけでなく「一部だけ2列表示したい」という方は、上記のCSSの.urllist-with-thumbnails部分を下記のセレクタに書き換えてください。
最新記事→.recent-entries
関連記事→.related-entries
注目記事→.entries-access-ranking
上記の通りに書き換えることで、それぞれの表示の仕方を調節することができます。
画像サイズの設定方法
恐らくコードを貼っただけの現段階では、画像が見切れてしまっていたり、タイトルのバランスが悪くなっていたりすると思います。
僕は、下記のようなデザインになっていました。
というわけで、デザインを整えていきましょう。
画像サイズの変更手順
①ダッシュボードの【デザイン】を選択
②【スパナマーク】→【サイドバー】の順で選択し、2列表示に設定した【関連記事（例）】を選択
デフォルトでは、画像サイズが100×100の正方形になっているので、お好みで調節します。
当ブログは170×105に設定しました。
上記のようなデザインになり、完成です。
少しでも参考になれば嬉しいです。
