今日はトップページで新着記事を横並びに表示する方法をご紹介します。
当サイトは【cocoon】テーマを使用しています。
スタイルシートにCSSを追加するだけで簡単にできるので是非やってみてくださいね☺︎
CSSコードはこちらを参考にさせていただきました。
トップページの変化
変更前
このような2列の表示方法は別記事に書いておりますのでそちらを参考にしてみてください。
変更後
新着記事を横に3つ並んだ表示に変更しました。
新着記事欄を横並びにするCSS
下準備
「外観」から「テーマエディター」を選択。
Cocoon Childのスタイルシート (style.css)に以下のコードを追加します。
/* 新着記事表示 */
.new-entry-cards.large-thumb {
display: flex;
flex-wrap: wrap;
}
.new-entry-cards.large-thumb a {
width: 33.333%;
}
/768px以下/
@media screen and (max-width: 768px){
.new-entry-cards.large-thumb a {
width: 50%;
}
}
/480px以下/
@media screen and (max-width: 480px){
.new-entry-cards.large-thumb a {
width: 100%;
}
}トップページ用の固定ページの編集
1.トップページ用に作成した固定ページを開きます。
2.新着記事を表示したい場所に以下のショートコードを入力します。
[〜new_list count=3 type=large_thumb children=1〜] （左右の〜は消してくださいね）
これで新着記事が横並びに表示されるようなります。
最後に
いかがでしたか？
この記事では基本のコードしかご紹介していないので色々カスタマイズして楽しんでみてくださいね。
最後までご覧いただきありがとうございました。
comment