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

wordpress
この記事は約2分で読めます。
スポンサーリンク
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をコピーしました