質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.47%

  • JavaScript

    17003questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 494

kkksk

score 1

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

<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というタイトルの下に商品が4つ並んで表示されるのですが、商品画像もテキストも小さので大きくしたいです。

よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kkksk

    2017/09/16 21:56

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

    キャンセル

  • namnium1125

    2017/09/16 22:35 編集

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

    キャンセル

  • namnium1125

    2017/09/16 22:38

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

    キャンセル

回答 1

checkベストアンサー

0

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

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


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

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

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

修正案

<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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/17 19:33

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

    キャンセル

  • 2017/09/17 22:34

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

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

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

    キャンセル

  • 2017/09/19 08:26

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

    キャンセル

  • 2017/09/19 09:59

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

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

    キャンセル

  • 2017/09/19 23:21

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

    キャンセル

関連した質問

同じタグがついた質問を見る

  • JavaScript

    17003questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。