【カラーミーショップ】jQueryのプラグイン、bxスライダーのデザインカスタマイズができない。

前提・実現したいこと

カラーミーショップで使用されている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="テスト商品服１" /></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等の微調整はできました。

x_x

2019/07/03 09:30

どのような変更をしたいのかを書いてもらえるでしょうか？

Lhankor_Mhy

2019/07/03 10:04

『できたコードを表示させたい位置にコピペするシステム』であれば、出力されたソースコードを直接変更してからコピペすればいいかと思いますよ。

UKYO9311

2019/07/04 03:21

ご返信ありがとうございます！！ x_x様完成予定図を追加しました。ご指摘ありがとうございます。 Lhankor_mhy様できたコードをカラーミーショップのエディタに置いたコードと、本番に反映されてるコードが違うのです。。。このコードも追加します。。。

Lhankor_Mhy

2019/07/04 04:09

なるほど。そうすると、JavaScriptでHTMLを動的にいじるしかないでしょうね。その完成予定図をコードに起こせますか？

UKYO9311

2019/07/04 04:46

やはりカラーミーのスライダーのデザインカスタマイズは複雑な感じになってるんですね。。。コーディングした時のコードはあるのですが、何も知らずにslickスライダーで作ってしまっていたのであまり使えないかと思います。。。現在bxスライダーで作っている時間もなさそうなのですが、コードがないと難しそうでしょうか？？（ ; ; ）

Lhankor_Mhy

2019/07/04 05:34

えっと、それは「作ってくれ」という意味でしょうか？（低評価ボタンに手をかけながら）

UKYO9311

2019/07/04 05:41

ごめんなさい！すみませんそういう意味ではありませんでした！(>_<) 順番的に、コーディングする→jsでhtmlを動的に動かすではなくて、 jsでhtmlを動的に動かす→コーディングするという風にはできないものでしょうか？？（ ; ; ）

Lhankor_Mhy

2019/07/04 05:48

ゴールの形が見えないと難しいのでは……？

UKYO9311

2019/07/04 05:51

承知いたしました！ありがとうございます。泣少々お待ちください！

行動規範の内容に同意します

回答1件

ベストアンサー

bxSliderというライブラリ自体に手を加えることもお考えかも知れませんが、それは避けたほうが自然でしょう。

カラーミーショップではbxSliderをそのまま利用していますので、bxSliderのカスタマイズ方法がそのまま利用できます。

bxSliderに渡すHTMLは、自由に書き換えられる部分とそうでない部分があります。
書き換えられるのはこのdiv要素の下位要素です。

HTML
1  <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="テスト商品服１" /></a></div>

変更できる点の組み合わせでもできないことは「実現不可能」ということにして、諦めたほうがよろしいと思います。

投稿2019/07/08 08:50