【記事一覧を横並び】Cocoon人気記事一覧を横並びにするCSS

WordPressテーマ「Cocoon」で人気記事一覧のを横並びに表示する様にカスタマイズしました。

さらにレスポンシブにしたかったので、メディアクエリを使って、スマホでの表示は縦並びになるようにしています。

Contents

【予備知識】人気記事のショートコード

WordPressテーマ Cocoonでは、本文にショートコードを設置するだけで、簡単に人気記事の一覧を表示させることができます。

[popular_list rank=1 count=3]

人気記事のショートコードのサンプル

人気記事のショートコードの表示サンプル

引数を組み合わせれば、順位表示や表示数や表示デザインの変更も手軽に行うことができます。

しかし、このショートコードで表示された人気記事一覧は縦並び（ブロック要素）で表示されます。

サイドバーに表示させたい時なんかはバッチリはまるのですが、固定ページの本文に組み込みたい時などデザイン次第では、思うように利用できないことがあります。

そこで今回は、人気記事ショートコードの表示を横並びにしていきます。

このサイトのトップページでは、以下のショートコードとほぼ同じコードで人気記事を表示しています。

[popular_list rank=1 count=3 type=large_thumb_on class="popularlist"]

内容はこんな感じ。

あとでクラス属性を指定して、調整するので” class=”popularlist” “を付け加えています。

人気記事ショートコード
- 順位表示＝あり
- 表示数 = 6記事
- デザイン = 大きなサムネイルにタイトルを重ねる
- クラス属性 = popularlist

実際に表示するとこんな感じ。

まだ縦並びどす。
そのままショートコードを使うと縦並びになります。

本文中に表示する場合、パソコンで閲覧するなら、縦よりも横に並べた方が明らかに見やすくなります。

ただし、6記事が横に並ぶとせっかくの画像が小さくなるので、3記事×2行で表示させたいと思います。

また、パソコンと比べて画面の小さいスマホでは、画像を大きく見せたいので縦並びのままにしたいと思います。

おもわく
- クラス属性を指定しておく。（class=”popularlist”）
- パソコン表示では横並び、スマホ表示では縦並びで表示する。
- パソコンでは3記事×2行で表示する。

CSSを使って、上のショートコードの見た目を調整します。

特定のページのみで使う場合は、ページの編集画面の下部のカスタムCSS。
サイト全体に反映させたい場合は、テーマエディターのstyle.cssに以下を書き込みます。

/* 人気記事の表示 */
.popularlist {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}
.popularlist a{
 width: 32%;
 flex-grow: 1;
}

/* モバイル */
@media screen and (max-width: 480px){
/* 人気記事の表示 */
.popularlist {
 display: block;
}
.popularlist a{
 width: 100%;
}
}

このCSSを反映すると、表示がこのようになります。

パソコンでは3記事×2行。
スマホでは縦並びで6記事表示されるようになりました。

CSSの内容は以下になります。

	css	意味
■	.popularlist {	○人気記事一覧全体に適用
	display: flex;	レイアウトを flex にする。
	flex-wrap: wrap;	flex 内で折り返す。
	justify-content: space-between;	flex 内で均等配置。最初と最後は端に寄せる。
	}	○ここまで
■	.popularlist a{	△個々の人気記事に適用
	width: 32%;	幅を画面に対して32%にする。
	flex-grow: 1;	伸びの比率指定
	}	△ここまで
■	@media screen and (max-width: 480px){	★画面サイズ480pxまでの場合に適用
■	.popularlist {	●人気記事一覧全体に適用
	display: block;	レイアウトを block にする。
	}	●ここまで
■	.popularlist a{	▲個々の人気記事に適用
	width: 100%;	幅を画面に対して100%にする。
	}	▲ここまで
	}	★ここまで

	よくある原因	対処方法
■	コード・CSS
	文字の打ち間違い	スペースやアルファベット、記号などを全角で入力している箇所はありませんか？
	クラス属性の設定・指定	ショートコードで設定したクラス属性とCSSのクラス指定は一致していますか？
■	wordPress
	投稿記事の数	表示数以上の記事を投稿してください。
■	ブラウザ
	キャッシュの影響	ブラウザ設定からキャッシュをクリアしてください。

反映されない場合の確認ポイント
- 打ち間違いが無いか？
- クラス属性の設定が抜けていないか？
- 投稿記事の数表示記事数以上に公開されているか？
- キャッシュの影響はないか？