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

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

当サイトは神テーマ「Cocoon」を利用しているのですが

そんなCocoonでは設定でポチポチしているだけでカルーセルを実装することができちゃいます

…でもデフォルトのデザインだとなんか味気ないですよね

確かにちょっと地味かも…

ソロモン

ということで今回は

「Cocoonのカルーセルをオシャレにしたい」

「カルーセルをカスタマイズしてTOPページをいい感じにしたい」

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

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

ブログ主

早速っていってみよう！

お品書き

カルーセルの完成イメージ
カスタマイズ手順
Cocoonのカルーセルをカスタマイズする方法
- CSSをコピペする
- (任意)functions.phpをいじる
最後に

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

↑完成形はこのような感じ。

タイトルを消してアイキャッチ画像だけにすることで全体的にスッキリさせています

オシャ！

ソロモン

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

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

カスタマイズ手順

手順

step1

CSSをコピー&ペースト

step2

fnctions.phpをいじる(※任意)

ブログ主

step2はお好みでどうぞ

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

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;/*カテゴリーを消す*/
}

「お好みで」とあるところを調整すると影の濃さや範囲を変えることができます

より目立たせたい場合、もしくは目立たせたく無い場合は調整してみるのもいいかもです。

自分のサイトに合うか色々試すのが良さげ！

ソロモン

(任意)functions.phpをいじる

サイズを調整したい場合

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

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

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

ブログ主

テーマ公式サイトを参考にさせていただきました

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