akiさんコメントありがとうございます、画像のwidthを１００％の指定は特にしておりません
今回はテーマを入れて、CSSなどは一切触っていないので購入したオリジナルのままです。
知識がなく！widthを１００％がCSSの事なのか、ブロックのデザインなどの事なのか
わかっておりませんすみません！
ＣＳＳ等見てみます。ありがとうございます。
スライドショーのレシポンシブ対応
2014年12月12日 at 16:37
concrete5 名古屋でお世話になっています。曽根田と言いますよろしくお願いします。
テーマ勉強の為マーケットプレイスでテーマを購入サイトを作りながらただ今勉強中です。
今回、http://skyline.sarahevansdesigns.co.uk/
skylineと言うテーマーを購入してサイトをつくってみた所、スライドショー部分がどうもうまく
縮小してくれません。
マーケットプレイスサンプルはこちら→http://skyline.sarahevansdesigns.co.uk/
テーマーのサンプルではスライドショーもサイズが変わるので購入してみたのですが何かスライドショーのレシポンシブに対応させる作業が必要なのでしょうか？？
ちなみにスライドショを削除して画像ブロックにすると正常にサイズがスマートフォンに対応したサイズになります。
私がテーマーskylineを適用したサイトはこちら
http://www.system-alpha.net/
スライドショーに対する知識がないので何か解決するヒントがいただければ嬉しいのですが
Re: スライドショーのレシポンシブ対応
2014年12月15日 at 15:31
元のテーマとソースを見比べると違うところがあるのでまったく同じように合わせみてはいかがでしょう？
JSの呼び出しであったり同じテーマとは思えないほどソースが違うのが気になります・・・
知識がないのであれば、忠実に元のテーマと同じになるようにconcrete5のテーマを作れば動くはずです。
スライダーの場所で言えば
<div class="slider-container">
<div id="bb236" class="blueberry">
<ul class="bbslides">
<li>
<img src='/files/3013/6163/9655/carousel-1.jpg' />
</li>
<li>
<img src='/files/1613/6165/1283/carousel-2.jpg' />
</li>
</ul>
</div>
<script type="text/javascript">
$(window).load(function() {
$('#bb236').css('max-width','960px');
$('#bb236').css('margin','0px auto');
$('#bb236').css('padding','0px');
$('#bb236').blueberry({pager:true, interval:10});
});
</script>
</div>
ここですね。
<ul class="bbslides">～～～</ul>までを記事ブロックで入れるようにテーマを作るといいかと思います。
CSSは、インラインの要素とblueberry.css、foundation-4.css、typography.css、main.cssが
呼び出されているようなので、元のテーマと作り上げたもので違いがないかチェックしていきましょう。
Web開発ツール（Firefox系）やデベロッパーツール（Chrome）を使いながらチェックするといいと思います。
頑張ってください。
JSの呼び出しであったり同じテーマとは思えないほどソースが違うのが気になります・・・
知識がないのであれば、忠実に元のテーマと同じになるようにconcrete5のテーマを作れば動くはずです。
スライダーの場所で言えば
<div class="slider-container">
<div id="bb236" class="blueberry">
<ul class="bbslides">
<li>
<img src='/files/3013/6163/9655/carousel-1.jpg' />
</li>
<li>
<img src='/files/1613/6165/1283/carousel-2.jpg' />
</li>
</ul>
</div>
<script type="text/javascript">
$(window).load(function() {
$('#bb236').css('max-width','960px');
$('#bb236').css('margin','0px auto');
$('#bb236').css('padding','0px');
$('#bb236').blueberry({pager:true, interval:10});
});
</script>
</div>
ここですね。
<ul class="bbslides">～～～</ul>までを記事ブロックで入れるようにテーマを作るといいかと思います。
CSSは、インラインの要素とblueberry.css、foundation-4.css、typography.css、main.cssが
呼び出されているようなので、元のテーマと作り上げたもので違いがないかチェックしていきましょう。
Web開発ツール（Firefox系）やデベロッパーツール（Chrome）を使いながらチェックするといいと思います。
頑張ってください。
Re: スライドショーのレシポンシブ対応
2014年12月23日 at 10:28
色々教えていただきありがとうございました。感謝いたします。
今回はマーケットプレイスでSKYLINEのテーマを有料購入して
ＤＥＭＯサイトはスライドショーがレシポンシブに対応していたので
ですが、実際はスライドショーはそのままでは対応していませんでした。
教えていただいたヒントを手掛かりに
レシポンシブに対応させたくていろいろソースを見比べて
いじってみたんです
jqueryとfoundation-4を調べましたが何となくの仕組みくらいはわかりましたのでいい勉強になりました。
しかし解決は僕の力量では無理でした！！
そう考えているうちにCONCRETE５のデフォルトのスライドショー以外は無いのか？？
レシポンシブに対応しているものは無いのか？？？と思い
いくつかのadd-onをMarketplaceで探してダウンロードしてみました。
検索は"slider"です。
skylineでレシポンシブに対応してくれる
スライドショーが数個ありました。
（対応しないものもありました。）
今回は
CameraCRETE Slider - 1.0
で解決をいたしました。
http://www.concrete5.org/mark･･･/addons/cameracrete-slider/
解決したサイトは
http://www.system-alpha.net/
大変お騒がせいたしました。
今後もわからないことがありましたら質問させていただきます。よろしくお願いします。
今回はマーケットプレイスでSKYLINEのテーマを有料購入して
ＤＥＭＯサイトはスライドショーがレシポンシブに対応していたので
ですが、実際はスライドショーはそのままでは対応していませんでした。
教えていただいたヒントを手掛かりに
レシポンシブに対応させたくていろいろソースを見比べて
いじってみたんです
jqueryとfoundation-4を調べましたが何となくの仕組みくらいはわかりましたのでいい勉強になりました。
しかし解決は僕の力量では無理でした！！
そう考えているうちにCONCRETE５のデフォルトのスライドショー以外は無いのか？？
レシポンシブに対応しているものは無いのか？？？と思い
いくつかのadd-onをMarketplaceで探してダウンロードしてみました。
検索は"slider"です。
skylineでレシポンシブに対応してくれる
スライドショーが数個ありました。
（対応しないものもありました。）
今回は
CameraCRETE Slider - 1.0
で解決をいたしました。
http://www.concrete5.org/mark･･･/addons/cameracrete-slider/
解決したサイトは
http://www.system-alpha.net/
大変お騒がせいたしました。
今後もわからないことがありましたら質問させていただきます。よろしくお願いします。
aki
Re: スライドショーのレシポンシブ対応
とりあえず・・・画像のwidthを100%にしてますか？
パッと見たところなさそうだったので・・・