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

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

くるみ

Cocoonのカルーセル少し地味じゃない?
ということで今回は

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

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

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

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

カスタマイズ後のCocoonのカルーセル

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

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

くるみ

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

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

カスタマイズ手順

手順
step1
CSSコードをコピペ
step2
fnctions.phpをいじる
(※任意)
すぐ終わりそう!

くるみ

バックアップを忘れずに

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

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

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

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

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

CSSをコピペする

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

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

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

くるみ

「カスタマイズするの初めて…」という方は以下の記事を参考にしてみてください。
WordPressで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'; 
});

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

ブログ主

テーマ公式サイトを参考にさせていただきました
参考 Cocoon各部分のサムネイルサイズを変更するカスタマイズサンプル集Cocoon

表示数を変えたい場合

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

参考 ヘッダー下のカルーセル設定項目に関する要望です | 要望 | Cocoon フォーラムCocoon

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

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

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

キャッシュ系プラグイン

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

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

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

Chromeをお使いの場合は以下のショートカットキーで削除できます。

Windows[Shift]+[Ctrl]+[Delete]キー
Mac[shift]+[command]+[delete」キー

まとめ

以上、カルーセルをオシャレにカスタマイズする方法でした。

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

他にもCocoonカスタマイズ記事を書いているのでそちらもぜひ参考にしてみてください。
Cocoonのおしゃれなカスタマイズ全集【初心者もコピペで簡単】Cocoonのおしゃれなカスタマイズ全集【初心者もコピペで簡単】

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

コメントを残す