画像の横幅サイズをHTMLで指定しましょう！

おそらくこちらの現象は、商品の特長をしっかりモードにてお作りいただいている際のものかと思われます。

問題の現象

楽天市場アプリで商品の説明箇所を表示した際、掲載画像の横幅がはみ出てしまう問題。
（左がWebで見た際、右が楽天市場アプリで見た際）

• 

• 

ご協力ショップ様：似顔絵カムカム様

残念ながら、画像の横はみ出しにつきましては楽天市場アプリ側の仕様によるもののため、現時点では店舗様側にて「横幅を100%以内にする」といった記述を加えていただく必要がございます。

※ビーノに限らず、全てのツール等にて発生する問題です

しっかりモードで画像を貼り付けたら、HTML表示に切り換えてimgタグの
閉じタグの前に

width="100%"

を付け加えることで、商品ページを楽天アプリトップから表示したときでも自動で横幅が揃えられます。

それでは早速以下にて詳しい説明を見ていきましょう！

imgタグって？

そもそも、「imgタグって？」という方のために、細かく分かりやすく説明していきたいと思います。

imgタグとは画像を意味する「image」の略で、Web上で画像を表示するときに必ず使用するタグのことで、「イメージタグ」と呼んでいます。
imgタグを含む通常のタグは、「<(開始タグ)」で始まり「>(閉じタグ)」で終わるのが基本です。
具体的には、<img src=”画像のURL”>の形で入力することで画像を表示することができます。

横幅を指定する

imgタグが理解できたらいよいよ横幅の指定の方法を解説していきます。

なぜ「width」で横幅が指定できるのか？

「width」は「幅」という意味をもち、画像の大きさを指定するときに使用する属性のため、imgタグに「width」を加えることで横幅を自由に指定することができるのです。
（ちなみに、「height」の属性を加えると高さの指定もできます。）

設定方法

HTMLのタグの意味が理解できたらここからは簡単です！

まず、商品登録画面を開き、新規の商品の場合は【新しく商品を登録する】をクリックし、すでに登録済みの商品の場合はスクロールして商品を選択するか、検索から選択してください。
商品登録画面をスクロールすると、下から二番目に「商品の特徴(PC)」と書かれた設定画面が出てくると思います。
モードをしっかりモードで商品説明用の画像を貼り付けてみましょう。

画像を貼り付けられたら、一番左の「<>」をクリックすることでHTML表示に切り換えられます。
※下の画像はサンプルなのでバナーを入れています。

HTML表示に切り替えると、先ほど説明したimgタグが表示されました。

閉じタグの前に

「width="100%"」

と入力してみましょう。
閉じタグは下の画像の場所にあります。

閉じタグの前にスペースを１つ開けて

「width="100%"」

を設定することで、楽天アプリでも画像を横幅にあわせて表示ができます！

まとめ

今回は、楽天アプリだと商品ページの説明画像（商品画像は問題なし）が崩れてしまう問題を解決できるように横幅の指定方法を解説しました。

記事を見て、こういった問題があることを初めて知った方もいるかと思います。一度スマホの楽天アプリトップから商品ページを確認してみたらいかがでしょうか。