パソコンで表示した際に、Cocoonの人気記事一覧を横並びにするようにCSSでカスタマイズしました。
備忘録も兼ねて、利用しているCSSを紹介します。
Cocoonの人気記事一覧とは
WordPressの無料テーマであるCocoonではショートコードを利用して本文中に人気記事一覧を表示することができます。
人気記事一覧のショートコードと表示の基本形は以下になります。
[popular_list]
この他、引数を指定してある程度カスタマイズすることができますが、縦並びになっている表示方法は変えることができません。
固定ページやトップページで表示するには少し見づらいなぁ…。
それならCSSを指定して横並び表示にしちゃいましょう！
ということで、人気記事一覧を横並びにするCSSを紹介します。
ショートコードの引数指定はここでは割愛します。詳細は公式サイトをご覧ください。
人気記事一覧を横並びにする
ショートコードにclass属性を持たせる
CSSでカスタマイズするためにショートコードにclass属性を持たせます。このclass属性を指定して表示方法を調整していきます。
ここでは仮にclass属性を「class=”popularlist”」とします。
[popular_list class="popularlist"]
自分でわかりやすいと思うものであればclass名は何でもOKです。
CSSでレイアウトを調整
CSSを書く場所は2パターンあります。
- 特定のページでのみ反映させたい場合はページの編集画面の下部の「カスタムCSS」
- サイト全体に反映させたい場合は「テーマエディターのstyle.css」または「カスタマイズの追加CSS」
レイアウトを調整するCSSはこちら。
/*人気記事一覧を横並びに*/
.popularlist {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.popularlist a{
margin: 0 10px 20px 0;
padding: 0;
width: 32%;
flex-grow: 1;
border-radius: 3px;
box-shadow: 0 0 3px rgb(0 0 0 / 20%);
}指定した後の人気記事一覧は以下のような表示になります。
※サンプル表示の人気記事一覧のショートコードはこちら
[popular_list count=3 type=large_thumb class="popularlist"]スマホ表示の指定
スマホで閲覧する際は縦並びの方が見やすいと思いますが、上記のCSSを追加するとスマホでも横並びになってしまいます。
そこでスマホでは縦並びになるように指定します。
/*スマホ*/
@media screen and (max-width: 480px){
.popularlist {
display: block;
}
.popularlist a{
width: 100%;
}
}横並び指定のCSSの下に書き込んでください。
まとめ
- Cocoonではショートコードを利用して本文中に人気記事一覧を表示できる
- デフォルトでは縦並びだがCSSを指定することで横並びにできる
- PCとスマホとでそれぞれレイアウトを調整できる
今回紹介したCSSは実際に当サイトの人気記事一覧ページで利用しています。
どのようなものになるか確認されたい方はこちらのページをご覧ください。
この記事が役に立った・助けになったという方は下のボタンからサポートをお願いします。
コメント