カラーミーのスライドショーをレスポンシブにしたいときの確認点

カラーミーショップでは管理画面のデザイン→スライドショーと進むとスライドショーを設定できます。

レスポンシブ対応のテーマを使っている場合は、ブラウザのサイズを変えたりスマホで閲覧しても、スライダー内の画像も自動で縮小、拡大されて表示されるはず。

ただ、経験上ですが、選ぶテーマによって、レスポンシブの動きが２種類あって、

・スライドショーを表示した状態でブラウザの大きさを変えると、それに合わせてサイズが変わるもの（つまりは画像の縦横比率を保ったままリサイズする）

・開いたブラウザのサイズに合わせてスライドショーの画像サイズを変更する

という感じ。

後者はブラウザを動かしても自動では画像サイズが変わらず、「更新」をして読み込み直したタイミングで画像サイズが変わります。

パソコンで閲覧したときにブラウザサイズを変えなければ、これでもいいのかな・・とは思うのですが、ちょっと気持ち悪いので修正することにしました。

その作業の覚書になります。

というのも、今回、カラーミーショップのテーマ「カラーミーショップキット（2カラム）」をカスタマイズしていたのですが、同じスライドショーのコードでもテーマによって、スライドショーの見え方が違う、というのに気が付いたのです。

カラーミーショップで使っているスライダーの本体は、おそらくbxSliderという、よく使われいるJQueryだと思われます。

ちなみに、カラーミーショップのテンプレートの入れたい箇所に、カラーミーショップの「出力用ＨＴＭＬタグ」を張り付けるわけですが、bxSliderにはいろんなオプションがあり、

<{if $slideshow_html}>
 <div class="slider">
 <{$slideshow_html}>
 </div>
 <script type="text/javascript">
 //<![CDATA[
 $(function(){
 $('#slider').bxSlider({
 auto: true,
 pause: 2000,//静止時間
 speed: 1000,//スライド速度
 controls: false,//prev/nextを表示するかどうか
 captions: true,//字幕を出すかどうか
 mode: 'fade'//エフェクトを表示するかどうか
 });
 });
 //]]>
 </script>

この部分に

responsive: true

を追加するだけでレスポンシブに対応できるものも・・あるかもしれません。
（調べてないけど）

今回、カラーミーショップキット２カラムに単純にスライドショーの出力用ＨＴＭＬを張り付けましたが、可変にはならず。

で、またテーマを切り替えて確認して、可変になっているテンプレートのスタイルシートをチェック。

スライダーに関すると思われるスタイルシート（以下）をコピー。

/*
* slider
*/
.slider {
margin-top: 2em;
padding: 0 1.4%;
position: relative;
}
.bx-viewport {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
left: 0 !important;
border: none !important;
}
#slider div {
width: 100% !important;
}/*
* slider
*/
.slider {
margin-top: 2em;
padding: 0 1.4%;
position: relative;
}
.bx-viewport {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
left: 0 !important;
border: none !important;
}
#slider div {
width: 100% !important;
height:auto
}

をとりあえず、カラーミーショップキットの共通ＣＳＳに張り付けたら行けました。

どうやら、最後の

#slider div {
width: 100% !important;
height:auto
}

これが重要っぽいです。

カラーミーショップの機能を使ったスライドショーでレスポンシブに悩まされている方、お試しください。