【Cocoon】ヘッダー下のカルーセルをカスタマイズする方法

スポンサーリンク
BLOG

Cocoonでヘッダー下のカルーセルをカスタマイズする方法を紹介します。今回紹介するのは記事の余白を取る、記事の画像、前のページと次のページのボタン、スライドのドットの色変更、記事タイトルのデザイン変更についてです。

【初期状態】

スポンサーリンク

カルーセル全体

記事周りの余白を取る

.carousel-in{
background: transparent;
}

記事周りの余白が取れました。

画像を編集する

画像の角を丸くして、影をつけます。

.slick-slide img{
border-radius: 2px; /*角丸*/
box-shadow: 0px 1px 1px 1px #CCC; /*影*/
}

【完成図】

「前のページ」と「次のページ」のボタンのデザインを変更する

/*前のページ*/
.slick-prev{
border-radius: 50%; /*角丸*/
background-color: #FFF;
border: none; /*線を消す*/
width: 40px;
height: 40px;
opacity: 0.8; /*透明度*/
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
/*前のページマウスオーバー時*/
.slick-prev:hover{
border-radius: 50%;
background-color: #7E9CEF;
border: none;
width: 40px;
height: 40px;
}
/*次のページ*/
.slick-next{
border-radius: 50%;
background-color: #FFF;
border: none;
width: 40px;
height: 40px;
opacity: 0.8;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
/*次のページマウスオーバー時*/
.slick-next:hover{
border-radius: 50%;
background-color: #7E9CEF;
border: none;
width: 40px;
height: 40px;
}

【通常時】

【マウスオーバー時】

スライド数のドットの色を変える

.slick-dots li.slick-active button:before,
.slick-dots li button:before {
color: #3BCBDC;
}

【完成図】

記事タイトルのカスタマイズ

/*記事タイトル*/
.carousel-entry-card-title {
font-size: 14px; /*文字サイズ*/
color: #333333; /*文字色*/
}
/*タイトルマウスオーバー時*/
.carousel-entry-card-title:hover {
text-decoration: underline; /*下線*/
color: #000092; /*文字色*/
}

カテゴリラベルの位置を調整する

.cat-label{
top: 0; /*上*/
}

下 → bottom
右 → right
左 → left

まとめ

一括変更用

下記のCSSをコピーしてダッシュボード>外観>テーマエディター>スタイルシートに貼り付けてください。
子テーマのシートに貼り付けてください。