くるみ
- Cocoonのカルーセルをオシャレにしたい
- カルーセルをカスタマイズしてトップページをいい感じにしたい
という方に向けて「Cocoonのカルーセルをオシャレにカスタマイズする方法」をごまとめました。
参考になれば幸いです⸝⸝- ̫ -⸝⸝
お品書き
カルーセルの完成イメージ
カスタマイズ後のカルーセルはこんな感じに。
- タイトル名を消してスッキリと
- 角を丸めドロップシャドウを付けることで可愛く
くるみ
そう、とてもオシャレなのですが…
タイトルを消しているので「タイトルが無いと記事の概要が全く分からない」という方より、「アイキャッチ画像だけで十分概要が分かるようにしている」という方にオススメのカスタマイズになります。
というわけで早速カスタマイズの方に移りましょう。
カスタマイズ手順
くるみ
バックアップを忘れずに
早速カスタマイズしていきたいところですが万が一の事態を考え、事前にバックアップを取っておくことをオススメします。
「バックアップするの初めて…」という方は以下の記事を参考にしてみてください。

ファイルをいつでも元の状態に戻せるようにしたら、さっそく本題のカスタマイズに移っていきましょう。
Cocoonのカルーセルをカスタマイズする方法
CSSをコピペする
- 「追加CSS」に追加
- 「テーマエディター」を使って追加
- FTPソフトを使って追加
以上のどれかの方法でカスタマイズコードをコピペします。
くるみ

コードはこちら
/************************************
** カルーセルカスタマイズ
************************************/
#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';
});
これによりカルーセルに表示される画像のサイズを変えることができます
ブログ主
表示数を変えたい場合
「カルーセルに表示させる記事の数を変えたい!」なんて場合は、わいひら神様がそれに対する方法をご提示なさっていたのでそちらを参考にしてみてください
参考 ヘッダー下のカルーセル設定項目に関する要望です | 要望 | Cocoon フォーラムCocoonしかし上の記事にもあるように、変に表示数を変えてしまうとパランスがおかしくなってしまう可能性もあるので、調整する場合はお気をつけて…
CSSの変更が反映されない場合
「あれ…?CSSが反映されないぞ…」となった場合は、キャッシュが原因であることが多いので以下の2つの方法を試してみてください。キャッシュ系プラグイン
「WP Fastest Cache」や「WP Super Cache」をはじめとしたキャッシュ系プラグインをお使いの場合は、そちらの方でキャッシュを削除してください。
プラウザのキャッシュを削除
Chromeをお使いの場合は以下のショートカットキーで削除できます。
Windows | [Shift]+[Ctrl]+[Delete]キー |
Mac | [shift]+[command]+[delete」キー |
まとめ
カルーセルはヘッダーの下に配置する以上、必ず目に入る箇所だと思うのでデザインには気を配っておきたいですよね…!
他にもCocoonカスタマイズ記事を書いているのでそちらもぜひ参考にしてみてください。
Cocoonのおしゃれなカスタマイズ全集【初心者もコピペで簡単】
参考になれば幸いです!では⸝⸝- ̫ -⸝⸝