サイトマップ(全ページ一覧)

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

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

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

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

こんな感じです↓

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

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

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

― スポンサーリンク ―
― スポンサーリンク ―

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

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

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

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

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

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

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

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

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

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

新着記事一覧-大きなサムネイル横並び

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

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

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

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

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

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

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

新着一覧/人気一覧を置きたいページのカスタム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」という項目があります。

カスタムCSS

この赤枠内に貼り付けてくださいね^^

Cocoonのテーマ更新で表示が崩れる場合がある

テーマの更新をしたら、表示が崩れてしまったことがありました。

原因は、大きいサムネイルの新着記事/人気記事に割り当てられていたCSSクラスが微妙に変更されたことでした。

すぐにディベロッパーツールで変更箇所を確認して、修正済みです。

今後またテーマ更新時に同様のことが起きたら、なるはやで修正して記事の更新をしますので、またこのページをご確認いただければと思いますm(_ _)m

最後に

説明がなくてごめんなさい^^;

おそらくこの記事を読んでいる方は、ある程度カスタマイズに慣れている方だと想定しています。

何かおかしいな?という部分がありましたらお気軽にご連絡ください。

お読みいただきありがとうございました。

タイトルとURLをコピーしました