ヤフオク商品説明にHTMLで画像を入れる方法｜imgタグの書き方と10枚制限

商品説明の文章の中に写真を差し込むと、「この部分がこうなっています」と文脈に沿って見せられます。ただし枚数は出品フォームの商品画像と合わせて 10 枚までなので、枠の配分を考えて使う必要があります。この記事では、HTML で画像を入れる具体的な方法と、つまずきやすいポイントをまとめます。

前提: 会員種別で入れ方が違う

• プレミアム会員: 商品説明を「HTML 入力モード」に切り替え、img タグを直接書ける
• 一般会員: HTML は直接書けないが、リッチエディタ（装飾入力）に画像を貼り付ける形で配置できる

オクプレの商品説明テンプレートは、どちらの会員でも使えるように「HTML コード」と「装飾コピー」の 2 方式で出力しています。

img タグの基本の書き方

最小構成はこれだけです。

<img src="https://example.com/photo.jpg" width="600" alt="商品の全体写真">

• src: 画像の URL。https で始まる直リンクであること
• width: 表示幅（px）。指定しないと原寸で表示され、はみ出す原因になる
• alt: 画像が読み込めないときの代替テキスト。省略可だが付けておくと丁寧

中央に寄せたい場合は <center> で囲むのが確実です。ヤフオクは CSS の多くを無効化するため、style 属性での配置指定は効かないことがあります。

画像 URL をどう用意するか

img タグには「インターネット上に公開されている画像の URL」が必要です。PC 内のファイルパスは使えません。

• 画像ホスティングサービスにアップロードして直リンク URL を取得する
• 自分でサーバーや Google Drive 等を使う場合は、公開設定と直リンク可否を確認する
• URL の末尾が .jpg / .png で終わる「画像そのもの」の URL であること（ページの URL ではない）

知っておくべき制限

画像は商品画像と合わせて 10 枚まで

商品説明内の img タグは、出品フォームでアップロードした商品画像と合計して 10 枚までです。商品画像を 7 枚アップロードしたら、説明欄に置ける img タグは 3 つまで。超過分は表示されないか、説明全体が反映されないことがあります。

また、背景やバナーなど装飾用の画像を含むテンプレートを貼ると、その装飾画像も 1 枚ずつカウントされます。商品写真の枠を減らしたくない場合は、装飾を CSS だけで表現しているテンプレート（オクプレのテンプレートはすべてこの方式）を選んでください。

容量は 1 枚 5MB まで

大きすぎる画像は読み込みが遅くなり、離脱の原因にもなります。容量・サイズ制限の詳細と縮小方法 も参考にしてください。

表示が崩れるときの原因と対策

• 横にはみ出す: width を指定していない。600〜700px 程度を指定する
• 画像が出ない: URL が https でない、直リンク不可、URL がページを指している、のいずれか
• style 属性が効かない: ヤフオクのフィルタで削除される。width / align など HTML 属性で指定する
• 途中から表示されない: img タグが 11 個以上ある

10 枚を超えて見せたいなら「結合して 1 枚に」

img タグ 1 個で複数カットを見せる方法が、画像の結合です。角度違いや付属品を 1 枚にまとめれば、10 個の枠を大幅に節約できます。オクプレの 写真まとめ はブラウザ内で最大 30 枚を 1 枚にまとめ、5MB 以内に自動調整するので、そのまま画像ホスティングにアップして img タグで使えます。

オクプレのテンプレートで画像を入れる場合

オクプレの編集画面では「画像ブロック」に URL を貼るだけで、テンプレートのデザインに合わせた img タグを自動生成します。幅指定や中央寄せも済んだ状態で出力されるため、HTML を手で書く必要はありません。 テンプレート一覧 から好みのデザインを選んで試してみてください。

まとめ

• プレミアム会員は img タグ直書き、一般会員は装飾コピーで配置
• src は https の直リンク、width は必ず指定
• 画像は商品画像と合わせて 10 枚まで、容量は 1 枚 5MB まで。装飾画像入りテンプレートは枠を消費する
• 枚数が足りなければ結合して 1 枚にまとめる