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

くるみ

Cocoonのカルーセル少し地味じゃない?

ということで今回は

Cocoonのカルーセルをオシャレにしたい
カルーセルをカスタマイズしてトップページをいい感じにしたい

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

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

お品書き

カルーセルの完成イメージ
カスタマイズ手順
- バックアップを忘れずに
Cocoonのカルーセルをカスタマイズする方法
- CSSをコピペする
- (任意)functions.phpをいじる
CSSの変更が反映されない場合
- キャッシュ系プラグイン
- プラウザのキャッシュを削除
まとめ

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

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

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

オシャ！

くるみ

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

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

カスタマイズ手順

手順

step1

CSSコードをコピペ

step2

fnctions.phpをいじる

(※任意)

すぐ終わりそう！

くるみ

バックアップを忘れずに

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

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

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

ファイルをいつでも元の状態に戻せるようにしたら、さっそく本題のカスタマイズに移っていきましょう。

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

CSSをコピペする

「追加CSS」に追加
「テーマエディター」を使って追加
FTPソフトを使って追加

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

「追加CSS」が最もお手軽にできるよ

くるみ

「カスタマイズするの初めて…」という方は以下の記事を参考にしてみてください。

【初心者向け】WordPressでCSSを編集する方法を徹底解説

コードはこちら

/************************************
** カルーセルカスタマイズ
************************************/
#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'; 
});

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

ブログ主