【Cocoon】カルーセルをオシャレにカスタマイズする方法

完成イメージ

Before

After

• タイトル名を消してスッキリと
• 角を丸めドロップシャドウを付けることで可愛く

※ タイトルを消しているため、アイキャッチ画像だけで十分概要が分かるようにしている方向けのカスタマイズになります。

カスタマイズ方法

0. バックアップを忘れずに

早速カスタマイズしていきたいところですが、万が一の事態に備えて事前にバックアップを取っておくことをおすすめします。

その方法について詳しくは下記記事にまとめているでぜひ参考にしてください。

WordPressでCSSのバックアップをとる方法【カスタマイズ時に必須】2020-10-30

1. CSSを追記

#carousel .a-wrap {
  padding-top: -10px;
  margin: initial;
  margin-top: -6px !important;
}

#carousel .carousel-entry-card-title {
  display: none; /* タイトル消す */
}

#carousel .carousel-in {
  background-color: transparent;
}

#carousel .slick-dots {
  display: none !important;
}

.slick-slide img {
  border-radius: 10px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 22%);
}

.carousel-entry-card-thumb {
  width: 95%;
}

.carousel .cat-label {
  display: none; /* カテゴリーを消す */
}

上記コードを、テーマで読み込んでいるCSSファイルにコピペします。

CSSを編集する方法について、詳しくは下記記事にまとめているでぜひ参考にしてください。

【初心者向け】WordPressでCSSを編集・追加する方法2020-10-24 【WordPress】CSSの変更が反映されない場合の原因・対処法2022-05-13

 .slick-slide img {
   border-radius: 10px;
-   box-shadow: 0 2px 4px rgb(0 0 0 / 22%);
+   box-shadow: <任意の値>;
 }

シャドウの濃さや範囲を変えたい場合は上記箇所を編集してみてください。

2. 表示設定を変更（任意）

サイズを調整したい場合

// カルーセルの画像のサイズを調整
add_image_size('carousel_thumb', 140, 74, true); // サイズは要調整
add_filter('get_carousel_entry_card_thumbnail_size', function (){
  return 'carousel_thumb';
});

アイキャッチ画像が見切れていたりしてサイズを調整したい場合は、上記コードを子テーマのfunctions.phpにコピペしてください。

参考：Cocoon各部分のサムネイルサイズを変更するカスタマイズサンプル集 | Cocoon

表示数を変えたい場合

カルーセルに表示させる記事数を変えたい場合は、フォーラムの投稿にある方法を参考にしてください。

ただし安易に表示数を変えてしまうとパランスがおかしくなってしまう可能性もあるので、適宜確認しつつ調整する必要があります。

以上でカスタマイズは完了です 🎉

他のCocoonカスタマイズも全て下記記事にまとめているので、ぜひ参考にしてください。 Cocoonのおしゃれなカスタマイズ全集【初心者もコピペで簡単】2021-01-19