【Cocoonカスタマイズ】ショートコードで新着記事や人気記事一覧をページ内に表示する際、横並びに並べるCSS

当サイトはワードプレスで運営し、Cocoonという無料テーマを使っています。

かなり機能豊富なテーマで、なんとショートコードを使って簡単に新着記事や人気記事を固定ページや投稿記事内に入れることができます。

こんな感じです↓

【新着記事一覧】

【人気記事一覧】

ショートコードの書き方次第で、サムネイルを大きくしたり、カテゴリーを指定したり、表示数を変えたり、などなど色んな見せ方ができます。

ただデフォルトでは縦並びになるので、横並びに表示するために自分なりにカスタマイズしてみました。

ご興味ある方はどうぞご覧ください＾＾

Cocoon新着記事・人気記事一覧のショートコードの使い方
大きなサムネイルで横並び3列で表示するためのCSS
1. 新着一覧/人気一覧を置きたいページのカスタムCSSにコードをコピペする
Cocoonのテーマ更新で表示が崩れる場合がある
最後に

Cocoon新着記事・人気記事一覧のショートコードの使い方

公式ホームページに詳しく書いてあるので、そちらをご覧ください。

新着記事一覧を表示するショートコードの利用方法

人気記事一覧を表示するショートコードの利用方法

大きなサムネイルで横並び3列で表示するためのCSS

Cocoonのフォーラムで同様の質問があり、テーマ作者であるわいひらさんが回答されています。

ただ、私はこれでうまく行かず、自分でまったく別のCSSでカスタマイズをしました。

（こちらの質問者様はウィジェット利用で、私はショートコード利用なので、それが原因かもしれません）

フォーラムの回答にあるやり方でうまく行かなかったら、以下でご紹介するCSSコードをお試しください。

※先に断っておきますが、私はWeb屋でもなんでもなく、素人が試行錯誤しながらサイトを作っています。

なので、色々と間違いはあるかもしれません。参考程度にしていただき、カスタマイズは自己責任でお願い致しますm(_ _)m

さて、PCで見た場合の完成形はこんな感じです。あかえほのトップページに設置しているものです。

表示数を6にしていて、上段左→中央→右、下段左→中央→右の順です。

スマホで見る場合は1列になります。

広い1カラム（サイドバーなし）でトップページを作る場合にご活用ください*。

*というのも、サイドバーに大きなサムネイルで新着記事、人気記事一覧を表示している場合、同じCSSクラスが割り当てられてるため、サイドバーの表示が崩れてしまうんですよね。

実際にこの記事を参考にカスタマイズをしてくださった方がいましたm(_ _)m

サイドバーの表示が崩れる件についても書かれています。

https://karin365day.com/blog/customize/making-toppage

ご紹介感謝です(*^^*)

新着一覧/人気一覧を置きたいページのカスタムCSSにコードをコピペする

私が実際に書いているコードがこちら。

.widget-entry-cards.card-large-image .a-wrap {
width:33%;
height:auto;
display: inline-flex;
}

@media screen and (max-width: 768px) {
.widget-entry-cards.card-large-image .a-wrap {
width:260px;
display: inline-flex;
}
}

.widget-entry-cards.not-default figure img {
padding: .5em;
}

.widget-entry-cards.card-large-image .a-wrap {
font-size: 95%;
text-align: left;
padding:.5em;
}

解説は割愛します・・・ごめんなさい^^;

サイズはwidthやpaddingの部分で、ご自身のサイトに合うよう数字をご調整ください。

ちなみに子テーマのCSSや追加CSSに書いてしまうと、他のページで思わぬ影響を与えてしまうかもしれないので、ショートコードを書きたいページのカスタムCSS*に書いてね。

*Cocoonの独自機能です。

固定ページ/投稿の編集画面で、ページを下にスクロールしていくと、「カスタムCSS」という項目があります。