カラーミーショップ 
では管理画面のデザイン→スライドショーと進むとスライドショーを設定できます。
レスポンシブ対応のテーマを使っている場合は、ブラウザのサイズを変えたりスマホで閲覧しても、スライダー内の画像も自動で縮小、拡大されて表示されるはず。
ただ、経験上ですが、選ぶテーマによって、レスポンシブの動きが２種類あって、
・スライドショーを表示した状態でブラウザの大きさを変えると、それに合わせてサイズが変わるもの（つまりは画像の縦横比率を保ったままリサイズする）
・開いたブラウザのサイズに合わせてスライドショーの画像サイズを変更する
という感じ。
後者はブラウザを動かしても自動では画像サイズが変わらず、「更新」をして読み込み直したタイミングで画像サイズが変わります。
パソコンで閲覧したときにブラウザサイズを変えなければ、これでもいいのかな・・とは思うのですが、ちょっと気持ち悪いので修正することにしました。
その作業の覚書になります。
というのも、今回、カラーミーショップ のテーマ「カラーミーショップ キット（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
}
これが重要っぽいです。
カラーミーショップ の機能を使ったスライドショーでレスポンシブに悩まされている方、お試しください。
