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を使えば、簡単に選んだ記事一覧をおしゃれに表示することができます。

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

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

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