【Cocoon】コピペで簡単！カルーセルをオシャレにカスタマイズする方法！

どうもおはようポテト(@ohayoupoteto22)です。

という方に向けてCocoonの「カルーセルをオシャレにカスタマイズする方法」をごまとめました。

参考になれば幸いです⸝⸝- ̫ -⸝⸝

カルーセルの完成イメージ

カスタマイズ後のカルーセルはこんな感じに。

そう、とてもオシャレなのですが…

タイトルを消しているので「タイトルが無いと記事の概要が全く分からない」という方より、「アイキャッチ画像だけで十分概要が分かるようにしている」という方にオススメのカスタマイズになります。
というわけで早速カスタマイズの方に移りましょう。

カスタマイズ手順

バックアップを忘れずに

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

「バックアップするの初めて…」という方は以下の記事を参考にしてみてください。

【WordPress】CSSをカスタマイズする際のバックアップの取り方

Cocoonのカルーセルをカスタマイズする方法

CSSをコピペする

以上のどれかの方法でカスタマイズコードをコピペします。

【初心者向け】WordPressでCSSを編集する3つの方法

コードはこちら

/************************************
** カルーセルカスタマイズ
************************************/
#carousel .a-wrap{
  margin-top:-6px !important;
  margin: initial;
  padding-top:-10px;
}
#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 rgba(0, 0, 0, 0.22);/*お好みで*/
}
.carousel-entry-card-thumb {
  width: 95%;
}
.carousel .cat-label {
  display: none;/*カテゴリーを消す*/
}

/************************************
** カルーセルカスタマイズ
************************************/
#carousel .a-wrap{
  margin-top:-6px !important;
  margin: initial;
  padding-top:-10px;
}
#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 rgba(0, 0, 0, 0.22);/*お好みで*/
}
.carousel-entry-card-thumb {
  width: 95%;
}
.carousel .cat-label {
  display: none;/*カテゴリーを消す*/
}

(任意)functions.phpをいじる

サイズを調整したい場合

アイキャッチ画像が途切れていたり、サイズが変なことになってたりしたらこちらを子テーマのfunctions.phpにコピペしてください

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

これによりカルーセルに表示される画像のサイズを変えることができます

表示数を変えたい場合

「カルーセルに表示させる記事の数を変えたい！」なんて場合は、わいひら神様がそれに対する方法をご提示なさっていたのでそちらを参考にしてみてください

しかし上の記事にもあるように、変に表示数を変えてしまうとパランスがおかしくなってしまう可能性もあるので、調整する場合はお気をつけて…(›´ω`‹ )

CSSの変更が反映されない場合

「あれ…?CSSが反映されないぞ…」となった場合は、キャッシュが原因であることが多いので以下の2つの方法を試してみてください。

キャッシュ系プラグイン

「WP Fastest Cache」や「WP Super Cache」をはじめとしたキャッシュ系プラグインをお使いの場合は、そちらの方でキャッシュを削除してください。

プラウザのキャッシュを削除

お使いのブラウザのキャッシュを削除してみてください。

Chromeをお使いの場合は

上のショートカットキーで削除できます。

まとめ

カルーセルはヘッダーの下に配置する以上、必ず目に入る箇所だと思うのでデザインには気を配っておきたいですよね…！

【初心者でも簡単】Cocoonのおしゃれなカスタマイズ総まとめ

参考になれば幸いです！では⸝⸝- ̫ -⸝⸝