サムネイルの配置を自由にカスタマイズ〜Cocoon

WordPressで記事一覧のサムネイルを自由にカスタマイズしたい！と思うことはありませんか？

Cocoonテーマを使って、サムネイルの配置を自由にデザインする方法をご紹介します。
初心者の私でも簡単にできた方法なので、ぜひ参考にしてみてください。

ナビカードを使って記事一覧を表示する

例えば、お気に入り記事を選んでリストを作るには
ナビカードのショートコード[ navi_list ]を使います。
詳しくは→こちら

他のショートコードの人気リストや新着記事一覧でも可能です。

サムネイルをCSSで自由にデザインする

CSSを編集する場所

CSSを編集するにはWordPressの管理画面から
ダッシュボード→外観→背景→追加CSSを選びます。

ここに今回使うCSSコードを追加していきます。

CSSコード例

以下のCSSコードを追加することで
[ navi_list ] のサムネイルを
おしゃれに設定できます。

変更前にバックアップをお忘れなく。

/* ウィジェット記事全体*/
.widget-entry-cards.card-large-image .a-wrap {
  max-width: 100%;/*カード幅調整*/
}


/***記事横並べ(flex)***/
.widget-entry-cards.large-thumb{
   display: flex; /* フレックスにする */
   flex-wrap: wrap; /* 折り返し設定 */
  justify-content: center; /* 横方向の中央揃え */
}

/*navi_list のサムネイルPCでの設定*/
.navi-entry-cards.large-thumb a{
  width:calc(88% / 3);/*pcで横3列に並べる*/
}

/*834px以下のスマホでの設定*/
@media screen and (max-width: 834px){
       .navi-entry-cards.large-thumb a{
		width:calc(100% / 2);/*スマホで横2列に*/
	}
}

こちらの設定は Cocoonで作るサイト型トップページ を参考にしました。

ショートコードで表示する

CSSを設定したら
以下のようにショートコードを書いて
おしゃれなサムネイルのナビカードを表示しましょう。

[navi_list name="メニュー名" navi_list type="large_thumb"]

まとめ

CocoonテーマのナビカードとCSSを使えば、簡単に選んだ記事一覧をおしゃれに表示することができます。

初めてでも、少しの工夫ででサイト全体の印象を大きく変えることができるのでぜひ試してみませんか？

「難しそう…」と思うかもしれませんが、挑戦することであなたのサイトがもっと愛着の湧く素敵な場所になるはずです。

ぜひ一歩踏み出してみてください。