<script type="text/javascript" src=...のサイズ指定

Question

イージーマイショップでサイトを作っています。

  <script type="text/javascript" src="https://〇〇〇.easy-myshop.jp/c-relitem-js?rel=2&app_tag=1&cnt=50&carousel_id=carousel_set_5">
        </script>

で表示される内容の表示サイズを変更するにはどうすればいいのでしょうか。
例えば、売れ筋商品TOP4というタイトルの下に商品が４つ並んで表示されるのですが、商品画像もテキストも小さので大きくしたいです。

よろしくお願いします。

Comments

[namnium1125]

javascript本体のコードが無いとなんとも回答できないと思います。https://〇〇〇.easy-myshop.jp/c-relitem-js?rel=2&app_tag=1&cnt=50&carousel_id=carousel_set_5の中身を下さい。
(○追記)イージーマイショップってサービスなんですね。。よく調べないで修正依頼していましたすみません。。

webブラウザの開発ツールでそのscript要素に来る内容を取得できるはずですから、そこのコードを載せて欲しいです。よろしくお願いします。m(_ _)m

[kkksk]

丁寧なご対応ありがとうございます。追記させていただきます。

[kkksk]

見づらくて申し訳ありません。本文への追記が文字数オーバーによりできず、こちらに記入させていただきました。

[namnium1125]

コードブロックでも無理でしょうか？(左上の方に<code>みたいなのがあるはず)あと○○○の中身が上のコードだとわかってしまうような気がするので気になるならば伏せて下さい。

[namnium1125]

それから同じく開発者ツールで、問題となる要素のクラス名を調べていただけると解決できるかもしれません。

[kkksk]

コードブロックでも無理でした。また私は初心者で問題となるクラス名がわからない為、今回はあきらめます。お手数おかけしました。

[namnium1125]

いえいえ、まだ早いですよ。開発者ツールは使えたんですよね?ソースの上をマウスでなぞると、該当箇所の要素に来た時にそこのところにフェードがかかり、実際にはどのように表示されているかがわかるはずです。そうすれば、変えたい部分がわかるはずです。

[namnium1125]

それにちょっと今いろいろ試してみているんで、しばしお待ちいただけると幸いです。

Answer 1

以下のコードを最初に質問文に載せていただいたコードの下に付け足してみてください。m(_ _)m

<script>
$(".video_icon").css({
  height: '100px', // 任意の大きさ
  width: '100px' // 任意の大きさ
});
$(".item_name , .item_price").css({
  'font-size': '32px', // 任意の大きさ
});
</script>

こっちの環境ではうまくいきましたが、本番環境でうまく行くかはちょっと自信が無いです。

100pxや32pxはご自身の好きなサイズに変更してください。

あとあまり正攻法ではない気もします。もしありましたらですが、イージーマイショップの質問フォーム等で聞いてみる方が確実かもしれません。

##修正案

<script>
var iW = 300; // 任意の大きさ、itemWidthという変数が既に定義されていたので便宜上iW
var iH = 369; // 任意の大きさ、iHについては同上
var mg = 20; // 任意の大きさ

$(".item_image").css({
  width: iW+"px",
  height: iH+"px",
  margin: "0px "+mg+"px"
});
$(".item_name , .item_price").css({
  "font-size": "32px" // 任意の大きさ
});
$('.carouselInner_app_3_0').flexslider({
  animation: "slide",
  direction: "horizontal",
  animationLoop: false,
  itemWidth: iW+2*mg,
  itemMargin: 20,
  slideshow: false,
  slideshowSpeed:0,
  controlNav:false,
  start:function(){
    $('.carouselInner_app_3_0 .flex-viewport').css('overflow','visible');
  }
});
</script>

同じ場所に貼付けてください。m(_ _)m

Comments

[kkksk]

わざわざ、色々試して頂いた上にお教えいただきありがとうございます。
頂いたコードの
$(".video_icon").css({を
$(".item_image").css({へ変更して貼り付けましたところ、画像自体と文字サイズは拡大することができたのですが、画像が収まる部分と文字が収まる部分の大きさは変わりませんでした。(額縁の大きさはそのまま写真のみ拡大されて写真が切れている感じです)
開発者ツールで画像部分の要素をすべて取得し、幅と高さの指定をしてみたのですが、幅が変わらずダメでした。
したいことは、下記URLデモショップの商品一覧での４つの商品レイアウトに売れ筋ランキングの４つの商品のレイアウトを近づけたい(画像の大きさ等)と思っています。http://demo.easy-myshop.jp/
どんなことでも構いません、ご教授いただけると幸いです。

[namnium1125]

返信がおそくなりすみません。m(_ _)m
手こずってしまいまして(^ ^;

video_iconではなくitem_imageでしたか。そこは無事解決してよかったです。

もう一つの幅については修正案という形で追記させていただきます。また力技になってしまったかも。。

[kkksk]

お教えくださりありがとうございます。おかげさまで希望のレイアウトにとても近くすることができました。できなくても大丈夫なのですが、4つの商品のカラムの幅は調整可能でしょうか。

[namnium1125]

カラム同士の間隔を変更したければ、.flexslider()の中のitemMarginの値を任意のものに変更してください。

先程回答を編集し、新しく変数mg(marginの略)を設定しました。(もし過去のものが見たければ回答の右下にある編集のリンクから見てください。)
カラム自体の幅は、mgをいじれば変更できるようにしました。試してみてください。m(_ _)m

[kkksk]

希望のレイアウトにできました！とても感謝しております。イージーマイショップの運営会社にも教えてもらえず困っていたところで、本当に助かりました。お世話になりました。