※当サイトではGoogleAdSense、アフィリエイトを使用した商品の紹介で収益を得ています。

【Cocoon】カスタマイズ|カルーセル編

wordpress
この記事は約2分で読めます。

今回はカルーセルに関するカスタマイズ記事です
いつもと同じで微調整っていう感じですが良かったら見ていってね
やっている事が少ないのですぐ読めますよー

現在カルーセルは使用していませんが、使用していた時の設定&調整になります
Sponsor Link
Sponsor Link

設定

まずはCocoonの設定から

cocoon カルーセル設定

こんな感じになっています
ピックアップカテゴリを作成して、そこをカルーセルで表示させている感じですね

CSSで調整

まずはパディングの調整

.carousel .a-wrap {
    padding: 5px;
}

カルーセル下にあるページ用ドット?の非表示
ユーザー用としてあった方が有用かなぁとは思うんだけど見た目が気になるので消しています

.slick-dots li {
    display: none;
}

タイトルフォントサイズがPC表示は問題ないサイズなんだけど
モバイル表示だとちょっと小さくて見にくいなと思ったので以下のように変更

@media screen and (必要なところへ)
    .carousel-entry-card-title {
        font-size: 1em;
    }

おわり

やっている事はほんとにこれだけです
元々がシンプルで当サイトの全体の見た目とも違和感なく使えるので調整程度ですんでいる感じですかね
モバイル表示用の部分は追記する部分がサイトによって変わると思いますが
全てコピペで使えると思うので、気になった方はお試しください

[share]

タイトルとURLをコピーしました