前提・実現したいこと
カラーミーショップで使用されているjQueryのプラグイン、bxスライダーのデザインをカスタマイズしたいです。
発生している問題・エラーメッセージ
カラーミーショップでは、コントロールパネル内で設定を行い、できたコードを表示させたい位置にコピペするシステムになっています。
そうすると自動的にHTMLが吐き出される仕組みになっているらしく、HTMLを直接編集できないため複雑なデザインのカスタマイズができません。(例えばドットを枠内に入れるとか、枠内にdivを追加するなど)
吐き出されたコード
これが編集画面で修正できない為困っています。。。
↓
html
1<div class="slider"> 2<link rel="stylesheet" type="text/css" href="./js/jquery.bxslider/jquery.bxslider.css"> 3<script src="./js/jquery.bxslider/jquery.bxslider.min.js"></script> 4<div id="slider"> 5 <div><a href="https://souvenir-club.shop-pro.jp/?pid=142184867"><img src="https://img21.shop-pro.jp/PA01430/787/slideshow/slideshow_img_442ad2.jpg?cmsp_timestamp=20190412165412" alt="" title="テスト商品服1" /></a></div> 6 <div><a href="https://souvenir-club.shop-pro.jp/?pid=142188842"><img src="https://img21.shop-pro.jp/PA01430/787/slideshow/slideshow_img_742b3e.jpg?cmsp_timestamp=20190412165431" alt="" title="テスト商品コップ" /></a></div> 7 <div><a href="https://souvenir-club.shop-pro.jp/?pid=142189088"><img src="https://img21.shop-pro.jp/PA01430/787/slideshow/slideshow_img_621f9f.jpg?cmsp_timestamp=20190412165447" alt="" title="テスト商品手ぬぐい" /></a></div> 8</div> 9<style> 10 .bx-wrapper .bx-pager { 11 padding-top: 10px; 12 bottom: -20px; 13 } 14 .bx-wrapper { 15 margin-bottom: 30px; 16 } 17</style>
該当のソースコード
html
1<{if $slideshow_html}> 2<div class="slider"> 3<{$slideshow_html}> 4</div> 5<script type="text/javascript"> 6//<![CDATA[ 7(function($){ 8 $(function(){ 9 $('#slider').bxSlider({ 10 auto: true, 11 pause: 4000, 12 speed: 1000, 13 controls: false, 14 captions: true, 15 mode: 'fade' 16 }); 17 }); 18})(jQuery); 19//]]> 20</script> 21<{/if}>
試したこと
・ カラーミーショップに問い合わせてみたところ、カスタマイズの対応はしていないとの事でした。
・ デベロッパーツールでclassを確認しながらcssを書いてmargin等の微調整はできました。
回答1件
あなたの回答
tips
プレビュー