楽天で「iframe」は使える？HTMLタグの制限チェック！

2023年3月20日2023年3月31日

楽天で「iframe」は使える？

楽天市場でショップページを作成する際は、インラインフレームタグ「iframe」を利用できます。ただし、楽天市場ではインラインフレームの使用を推奨しておらず、サポートの対象外となっているので注意が必要です。

このページでは、楽天市場のショップページ構築における「iframe」利用のルールや利用法について解説します。楽天市場のショップページを構築する際の参考にしてください。

「iframe」とは？

インラインフレームタグ「iframe」とは、HTMLの1要素で、ページ内部に異なるページを埋め込むことができるタグのこと。

例えばショップページ上に店舗の地図として、Googleマップを表示させる場合などに活用できます。

楽天市場であれば、トップページに商品ページや動画を埋め込むといった使い方が可能です。

楽天では「iframe」が非推奨

楽天市場のRMSでは、「iframe」の利用を推奨していません。

「iframe」以外のタグも含め、HTML等コーディングに関する内容は、RMSコールセンターのサポート対象外。動作の保証も、表示の保証もありません。

「iframe」は一部ブラウザで表示が崩れるなど、ページが正しく表示されないといった動作上の問題があり、利用の際は完全に自己責任での管理となります。

楽天市場でのページ構築が大変という場合は、外部委託という選択肢もあります。

スマートフォン向けページでは「iframe」非対応

2022年4月から始まっている「スマートフォン用店舗トップページ改善プロジェクト」により、スマートフォン向けのページでは「iframe」も含め、HTMLコードが使用できなくなりました。

HTMLコードが自由に使える楽天市場のサーバー「楽天GOLD」を使用してのスマートフォントップページ構築も、2023年下半期でサービス終了予定です。

楽天GOLDについての詳細は以下の記事で解説していますので、併せてご覧ください。

PC版でもHTMLタグ使用に制限あり

RMSの店舗構築機能「R-Storefront」では、利用可能なHTMLタグに制限があります。

PC用画面では編集時にチェックが入り、利用できないHTMLタグを入力すると「入力内容に誤りがあります」「許可されないHTMLタグが入力されています」と表示され、修正対応が必要です。

RMSのR-Storefrontでは以下の入力項目について、HTMLレベル0から3までの4つのレベルで、HTMLタグの利用が制限されています。

スマートフォン
モバイル
医薬品以外

項目	利用できない場所
HTMLレベル0	商品名、項目選択肢別在庫用縦軸項目名、項目選択肢別在庫用横軸項目名
HTMLレベル1	キャッチコピー
HTMLレベル2	PC用商品説明文、PC用販売説明文、カテゴリ説明文上、カテゴリ説明文下、トップ説明文上トップ説明文下、決済方法の備考欄(PC)、配送方法の備考欄、送料設定の備考欄
HTMLレベル3	ヘッダー・フッター・レフトナビ、共通説明文（大）

出典：店舗運営Navi「HTMLレベルについて」

これらのレベルごとに利用できないHTMLタグが一覧表で示されており、その詳細は店舗運営Naviでまとめてチェック可能です。

→ 店舗運営Navi「R-StorefrontにおけるHTMLタグの制限」

入力項目によってはHTMLタグの制限だけでなく、HTMLの属性にも制限あります。

→ 店舗運営Navi「R-StorefrontにおけるHTMLタグ属性の制限」

楽天市場のECサイトは、独自の仕様でなかなか作成が難しい面もあるでしょう。楽天市場のショップ運用でのお悩みごとは、ECサイト構築・運営のプロであるECサイト運営代行会社にお気軽にご相談ください。数々のECサイト構築に携わった知見を最大限に活用してサポートいたします。

楽天で「iframe」を利用する方法

楽天市場では推奨されていませんが、「iframe」の利用方法もチェックしておきましょう。楽天市場で「iframe」を利用するには、トップページ編集画面で、以下のタグを使用します。

<iframe> </iframe>

楽天市場の店舗運営Naviでは、以下のコードをサンプルタグとして示しています。

<iframe src="https://〇〇〇.html" height="400" width="200" frameborder="0" scrolling="yes">
    お使いのブラウザはインラインフレームに対応していないようです。<br>
    お手数ですがこの部分はインラインフレーム対応のブラウザでご覧ください。
</iframe>

引用：店舗運営Navi

上記コードの属性が意味する内容は以下のとおりです。

HTML属性	属性の意味
src=”https://〇〇〇.html”	インラインフレーム内に表示させたいページのURL。
height=”400″	インラインフレームの縦幅ピクセルで指定する場合は数字だけになります。%で表示する場合は数字の後ろに%をつける。
width=”200″	インラインフレームの横幅ピクセルで指定する場合は数字だけになります。%で表示する場合は数字の後ろに%をつける。
frameborder=”0″	フレーム枠の表示指定。表示する場合は1、表示しない場合は0
scrolling=”yes”	スクロールバーの表示指定。表示させる場合はyes、表示しない場合はno、状況によって自動判断させる場合はauto