HTMLタグで商品ページを作る！具体的な手順と画像登録から解説【楽天編】

楽天の場合、完成度の高い商品ページ作成をするのにHTMLタグが必須となります。

楽天だけではなくヤフーショッピングに出店している方も同じタグが使用できます。

今回はページ制作にこれだけ抑えれば使えるというタグを説明します。

入れ替えるだけでそのまま使える内容にしておりますので是非お使いください。

はじめて楽天でページ作成する初心者必見です。

楽天への登録

まずは使用したい画像を登録します。

RMSの【店舗設定】→【画像・動画設定】→【画像管理】へ進みます。

使用したい任意の画像をドラッグ＆ドロップもしくは【新規登録】より登録できます。

登録できると上の画像のように画像が表示されます。

これで画像登録は完了です。

画像の最適サイズはこちら

あわせて読みたい

【初心者向け】楽天市場のバナーのおすすめサイズ この記事を読んでいただきたい方！ 楽天に初めて出店する方 楽天のバナーのサイズで頭を悩ませてる方 バナーを外注に出そうと考えている方 ネットショップを作るときに...

画像を使用してページを作る

楽天アプリや下にスライドして見れる部分のページ制作をしていきます。

【店舗設定】→【商品管理】→【商品一覧・登録】より商品登録に進みます。

今回登録するのはこちらの部分です。

ここにHTMLタグを入れていきます。

先ほどの画像URLをコピーし、

下記の【】部分（【】を含む）にコピーした画像URLをいれます。

今回はスマートフォン用の画像説明文に入れるタグを準備しました。

スマホ用

1. <img src="【画像登録したURL】" width="100%" alt="【商品画像がわかりやすいようつける名前】">

alt=”以下は自分がどの画像を登録したかわかりやすくするよう名前を付けておくことをおすすめします。

複数の画像を登録する場合、このタグを下に連ねていきます。

<img src=“【画像登録したURL】” width=“100%” alt=“【商品画像がわかりやすいようつける名前】”>

<img src=“【画像登録したURL】” width=“100%” alt=“【商品画像がわかりやすいようつける名前】”>

<img src=“【画像登録したURL】” width=“100%” alt=“【商品画像がわかりやすいようつける名前】”>

こうすると縦に登録されていきます。

width=”100%”でスマホの幅に画像が自動調整されます。

登録した画像が近すぎるということであれば間に<br>をいれて調整してください。

1. <img src="【画像登録したURL】" width="100%" alt="【商品画像がわかりやすいようつける名前】"><br>
2. <img src="【画像登録したURL】" width="100%" alt="【商品画像がわかりやすいようつける名前】"><br>
3. <img src="【画像登録したURL】" width="100%" alt="【商品画像がわかりやすいようつける名前】"><br>

商品登録に使えるタグ一覧

画像登録

1. <img src="【画像登録したURL】" width="100%" alt="【商品画像がわかりやすいようつける名前】">

画像間のスペース

1. <br>

画像をクリックして任意のページに飛ばす

1. <a href="【飛ばしたいURL】"><img src="【登録したい画像のURL】" width="100%" alt="【商品画像の名前】" border="0"></a>

まとめ

今回はHTMLタグをそのまま使える状態で提供しました。

意外と簡単と感じた方も多いのではないでしょうか。

画像制作に時間がとられることが多いと思うので、ページへの実装の部分は効率化していきましょう。