楽天市場でよく使用するHTMLのご紹介！よくあるエラーの解消方法も！
本記事を閲覧頂きありがとうございます。
我々はECにおける総合的な売上向上サービスを展開しています。
楽天、Amazon、Yahoo!ショッピングの大手ECモールや自社サイトのご支援実績のもと、EC売上向上のノウハウをお届けします。
Contents
HTMLとは？
HTMLは、Hyper Text Markup Language（ハイパーテキストマークアップランゲージ）の略です。
比較的シンプルな言語で、ウェブページの作成に使用されます。
変数や関数は使わないので、HTMLは「マークアップ言語」といい、タグを使って文書内の要素を定義する言語です。
Webページ内のテキスト情報の構成や役割をコンピュータが理解できるように記載するのが、「マークアップ言語」です。
HTMLの書き方
HTMLは基本タグで挟んで書きます。
以下のような形です。
<タグ>中身</タグ>
前の<タグ>を開始タグと呼び、後ろの</タグ>を終了タグと呼びます。
これは基本セットで使われることが多いです。この塊を要素と呼びます。
このタグによって、”中身”がどのように表示されるかが変わります。
楽天市場で使用頻度の高いHTMLタグ
ここからは、楽天市場でよく使われるタグの紹介をしていきます。
ここで紹介するタグを使えば、ある程度表現することができます。
<a>タグ (文字、画像にリンクを設定)
文字、画像などにリンクを設定することができるタグを<a>タグと呼びます。
以下のような形で記述します。
<a href=”リンク先URL“></a>
商品ページに遷移させたいときは、以下のように記述すれば、遷移されます。
<a href=”https://item.rakuten.co.jp/ショップID/商品管理番号/“>商品名などを入れる</a>
また、画像にリンク先を指定する場合は、以下のように記述しましょう。
<a href=”https://item.rakuten.co.jp/ショップID/商品管理番号/“><img src=”https://image.rakuten.co.jp/画像ファイル名”></a>
<a>タグの注意点
楽天市場内のURLのみしか指定できません。
もし、楽天市場以外のURLを記載したい場合は、外部リンク申請をしましょう。
<img>タグ (画像を貼り付け)
<img>タグ は、画像の貼り付けが可能です。
以下の形式で入力しましょう。
<img src=”https://image.rakuten.co.jp/画像ファイル名”>
また、画像のサイズなども指定できます。
記載方法は以下です。
<img src=”https://image.rakuten.co.jp/画像ファイル名” 指定したい箇所=”サイズ”>
指定したい箇所：width=”横幅“、height=”高さ“
※ px または % で指定してください。(width=”100%” など)
<img>タグの注意点
縦横比を指定する場合は、縦横比を確認しましょう。
無視して指定すると、画像がひき延ばされてしまう可能性がございます。
<font>タグ (文字を装飾)
文字の色やサイズなどを指定することができるタグです。
以下のように記述します。
<font size=”大きさ” color=”色“></font>
文字の大きさは、1~7で指定します。
色は、6桁のカラーコードで指定します。
店舗運営Naviで 、カラーコードを確認すると良いでしょう。
カラーコード一覧はこちら
また、どちらかのみで良い場合、例えば文字のサイズだけ変えたい場合は以下のように記述すれば問題ございません。
<font size=”大きさ”></font>
<div>タグ (文字や画像を自由に配置)
文字や画像の配置を指定することができます。
以下のように記述します。
<div align=”位置“></div>
位置の指定方法は主に3つです。
中央の場合：center
右寄せ：right
左寄せ：left
また、画像の位置も指定できます。
記述方法は以下になります。
<div align=”位置“><img src=”https://image.rakuten.co.jp/画像ファイル名”></div>
<div>タグの注意点
<div>タグを使用する際の注意点ですが、スマートフォン用商品説明文には使用ができず、エラーがかえってきます。
PCとスマホ、両方に同じ記述をしたい場合は、使用しない方が良いでしょう。
<table>タグ (表の作成)
<table>タグでは、表を作成することができます。
記述方法は以下になります。
<table></table>
表の中に、行やセルを作成することもでき、その場合は<table>タグの中に以下を記述します。
行：<tr>、セル：<td>
<table><tr><td>セルの中身<td></tr></table>
こちらうまく使用することで、画像の下に文字を入れて表示することなども可能です。
その他よく楽天市場で使用するタグ
その他にもいくつか楽天市場で使用するタグがあるので、紹介します。
<cenetr>タグ：テキスト、画像を中央に寄せます。
<br>タグ：改行をします。
楽天市場でHTMLを書くときに、よくあるエラーと解消方法
楽天市場独自の制限などで、エラーが出ることがあります。
その場合は、エラー箇所や解消方法がわからなくなってしまい、余計な時間がかかってしまうでしょう。
ここでは、起こりうるエラーとその解消方法を記載します。
HTMLを書くときに、よくあるエラーは？
以下より、楽天市場でよく起こりうるエラーについて記載します。
解消方法も合わせて記載するので、よろしければ参考にしてください。
文字数制限オーバー
HTMLをよく使用する、PC用商品説明文、スマートフォン用商品説明文、PC用販売説明文では、文字数制限があり、全角5120文字以内までと決められています。(半角10240文字以内)
画像を結合して文字数を減らすことや、半角スペースや改行を全て削除してみましょう。
それでも超えてしまう場合は、文字ではなく一部画像にしてしまうなども対処法になるかと思います。
タグを閉じていない
タグが正常に閉じられていない、もしくは開始タグがないとエラーが起こります。
該当の箇所は指示してくれないので、該当の箇所を探すのに時間がかかります。
以下の記事ですぐ探せるツールをご紹介しているので、よろしければご覧ください。
全角入力やスペースなどの文字間違い
タグを全角で入力しているとエラーになります。
また、タグ内の不要な箇所にスペースが入っている場合もエラーとなりますので、注意しましょう。
こちらに関しても先ほどご紹介した以下記事におすすめの確認方法がございますので、ぜひご覧ください。
タグの<>が全角になっている
タグの<>部分が全角の＜＞になっている場合もエラーになります。
見た目は判別がつきずらいので、こちらのエラーが出た場合、文字検索で確認すると早く解消できるでしょう。
楽天市場でGOLDを使用する場合の注意点
楽天GOLDを使用して、HTMLでページを作成する場合は、CSSやjavaScriptなども使用可能なので、かなり自由度の高いページを作成できるでしょう。
しかし、高度な技術が求められるので、あまりお勧めはできません。
最近導入された楽天のコンテンツページを使用するのが、早く作成でき、商品名などや金額も自動で切り替わるので、そちらの使用をお勧めいたします。
作成方法などについて、以下にまとめているので、よろしければご確認いただき、作成してみてください。
まとめ
今回は、楽天市場でよく使用するHTMLについてご紹介いたしました。
エラーが出ると、解消に想定以上お時間を使うこともあるので、こちらの記事を参考に早く解決できることを願っております。
弊社では楽天の運用代行も行っておりますので、作成などが難しい場合はお気軽のご相談くださいませ。
この記事が、皆様の参考になっていますと幸いです。
株式会社Proteinum 代表取締役
一覧に戻る
