今回はカルーセルに関するカスタマイズ記事です
いつもと同じで微調整っていう感じですが良かったら見ていってね
やっている事が少ないのですぐ読めますよー
現在カルーセルは使用していませんが、使用していた時の設定&調整になります
設定
まずはCocoonの設定から
こんな感じになっています
ピックアップカテゴリを作成して、そこをカルーセルで表示させている感じですね
CSSで調整
まずはパディングの調整
.carousel .a-wrap {
padding: 5px;
}
カルーセル下にあるページ用ドット?の非表示
ユーザー用としてあった方が有用かなぁとは思うんだけど見た目が気になるので消しています
.slick-dots li {
display: none;
}
タイトルフォントサイズがPC表示は問題ないサイズなんだけど
モバイル表示だとちょっと小さくて見にくいなと思ったので以下のように変更
@media screen and (必要なところへ)
.carousel-entry-card-title {
font-size: 1em;
}
おわり
やっている事はほんとにこれだけです
元々がシンプルで当サイトの全体の見た目とも違和感なく使えるので調整程度ですんでいる感じですかね
モバイル表示用の部分は追記する部分がサイトによって変わると思いますが
全てコピペで使えると思うので、気になった方はお試しください
[share]