...

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

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

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

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

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

 

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

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

ソロモン

ということで今回は

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

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

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

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

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

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

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

オシャ!

ソロモン

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

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

カスタマイズ手順

手順
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

表示数を変えたい場合

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

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

 

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

最後に

以上になります

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

他にもCocoonカスタマイズの記事書いてるのでぜひ!

ソロモン

Cocoonの目次のカスタマイズする方法【コピペでOK】Cocoonの目次を見やすくカスタマイズする方法

 

Cocoonの関連記事をカスタマイズする方法【Cocoon】記事下の関連記事一覧をおしゃれにカスタマイズする方法

 

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

参考になったらシェアしよう

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA