カラーミーショップ では管理画面でスライドショーを設定できます。
レスポンシブ対応のテーマならば、ブラウザのサイズを変えると、スライダー内の画像も縮小、拡大するはず。
でも、これには2種類あって、スライドショーを表示した状態でブラウザの大きさを変えると、それに合わせてサイズが変わるもの(つまりは画像の縦横比率を保ったままリサイズする)、と、開いたブラウザのサイズに合わせてスライドショーの画像サイズを変更する、という感じ。
後者はブラウザを動かしても、画像サイズが変わりません。
ブラウザを更新した際には画像サイズが変わります。
まぁ、パソコンで見たときにブラウザサイズを変えなければ、これでもいいのかな・・とは思うのですが、ちょっと気持ち悪いので修正することにしました。
その作業の覚書になります。
というのも、今回、カラーミーショップ のテーマ「カラーミーショップ キット(2カラム)」をカスタマイズしていたのですが、同じスライドショーのコードでもテーマによって、スライドショーの見え方が違う、というのに気が付いたから。
カラーミーショップ で使っているスライダーの大本は、bxSliderという、よく使われいるJQueryです。
ちなみに、カラーミーショップ のテンプレートの入れたい箇所に、カラーミーショップ の「出力用HTMLタグ」を張り付けるわけですが、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
を追加するだけでレスポンシブに対応できるものも・・あるかもしれません。
(調べてないけど)
で、今回、カラーミーショップ キット2カラムに単純にスライドショーの出力用HTMLを張り付けましたが、可変にはならず。
で、またテーマを切り替えて確認して、可変になっているテンプレートのスタイルシートをチェック。
スライダーに関すると思われるスタイルシート(以下)をコピー。
/*
* 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
}
をとりあえず、カラーミーショップ キットの共通CSSに張り付けたら行けました。
どうやら、最後の
#slider div {
width: 100% !important;
height:auto
}
これが重要のようです。
カラーミーショップ の機能を使ったスライドショーでレスポンシブに悩まされている方、お試しください。