【cocoon】カルーセル（スライダー）をおしゃれにカスタマイズする方法【コピぺOK】

cocoonでは簡単にカルーセル（スライダー）を設置することが出来ます。

本当に素晴らしい機能ですが、初期のカルーセルのデザインはちょっとゴテっとしてますよね。

初期状態はこんな感じ

ちょっと余計な線が多い気がします。

それとフォントが大きくサイズ感があっていない気がします。

なので今回は

・余計な線を消す

・フォント周りをいじってみる

ことを実践してみました。

カスタマイズ後の見た目

デモページはこちら

コード

「style.css」に張り付けるだけです。

コードは自由にお使いください。

#carousel .carousel-in{
   box-shadow:none;
   background-color:#f7f7f7;
}
#carousel .a-wrap{
   margin:0;
   box-shadow:none;
   border:none;
}
#carousel .carousel-entry-card-title{
   font-size:0.75em;
   font-weight:bold;
   color:#333;
}

このコードを張り付けるだけでカルーセルがすっきりスマートになったと思います。

おわりに

このカスタマイズもほんの一例です。

自分でカスタマイズしてみるのも面白いと思います。