【2022年8月更新】楽天GOLD、楽天RMSでの制作メモ
目次
楽天RMSと、久しぶりに楽天でGOLDを使ってページ制作を行ったので、記録としてメモしておきます。
相変わらずクセがすごい楽天…
検索窓の文字化け…楽天の文字コードはEUC-JPだった件
楽天の文字コードはEUC-JP。楽天の文字コードはEUC-JP！！！！！（大事なことなので2回）
いつもの調子でUTFで作っていたら、検索窓がしっかり文字化けしてしまった。
検索窓（文字化け対策ver.）
formタグにaccept-charsetを設定。
※検索ボタンを虫眼鏡の画像にしているため、その辺のソースは各自お好きなようにどぞ
<div class="search-box">
<form method="get" accept-charset="euc-jp" action="https://esearch.rakuten.co.jp/rms/sd/esearch/vc" target="_top">
<input type="hidden" value="6" name="sv">
<input type="hidden" value="店舗ID" name="sid">
<input type="hidden" value="店舗URL" name="su">
<input type="hidden" value="ショップ名(日本語OK)" name="sn">
<input type="hidden" value="A" name="f">
<input type="text" name="sitem" placeholder="ショップ内から探す" class="textArea">
<input type="image" class="search-btn" src="虫眼鏡の画像">
</form>
</div>
面倒な場合は最初からすべてのファイルをEUC-JPで作ろうそうしよう。
iframeを活用してメンテナンス性をあげる
楽天GOLDでトップページを構築する場合はヘッダー・サイドナビ・フッターをそれぞれiframeにわけておくと商品ページにも埋め込むことができるしGOLD上で一括管理できて便利。
この時代にiframeとかワロタwwwwと思うかもしれませんが楽天ではバリバリの現役・・・
商品ページでiframeヘッダー・フッターを全幅（100%）表示にする
GOLDで作ったヘッダー・フッターをトップページ以下の階層で横幅いっぱいに表示させる方法。
楽天の商品ページ・カテゴリーページは幅800pxのテーブル組が邪魔をしているので、そのテーブルをいったん閉じて、iframeを入れ込む裏技です。
ヘッダー・フッター・レフトナビのテンプレート設定で以下のように表記します。
ヘッダーの場合
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!---ここにiframe---->
<div style="width:100%;margin:auto;">
<iframe src="https://www.rakuten.ne.jp/gold/店舗URL/header.html" id="frame__head" scrolling="no" width="100%" height="フレームの高さ" frameBorder="0"></iframe>
<iframe src="https://www.rakuten.ne.jp/gold/店舗URL/slider.html" id="frame__slider" scrolling="no" width="100%" height="フレームの高さ" frameBorder="0"></iframe>
</div>
<!---ここまで---->
<table width="100%" cellspacing="20" cellpadding="0" border="0">
<tr>
<td align="center">
<table width="800" cellspacing="0" cellpadding="5" border="0">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
<table width="800" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td colspan="4">フッターの場合
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!---ここにiframe---->
<div style="width:100%;margin:auto;">
<iframe src="https://www.rakuten.ne.jp/gold/店舗URL/footer.html" scrolling="no" width="100%" height="フレームの高さ" frameBorder="0"></iframe>
</div>
<!---ここまで---->
<table width="100%" cellspacing="20" cellpadding="0" border="0">
<tr><td align="center">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr><td colspan="4">
看板・ナビボタンを消す方法（楽天RMS）
GOLDで作ったヘッダーの上に我が物顔で居座る看板＆ナビボタンの消し方。
■看板の削除
デザイン設定 ＜ PCデザイン設定 ＜ 看板設定 ＜ 登録した看板を削除
■ナビボタンの削除
デザイン設定 ＜ PCデザイン設定 ＜ ナビボタン ＜ 1つずつ削除
【終了予定】トップページをレスポンシブデザインにする
トップページをレスポンシブデザインで制作した場合index_sp.html を用意する必要はなし
GOLDのサーバー上にindex.htmlをアップロードしておけば、「楽天GOLDで作成したスマートフォン用トップページを表示する」を選択したときスマホでもindex.htmlの内容が表示される
2023年に終了予定
2022年に新スマートフォントップページ機能がリリースされ、2023年以降はスマホのトップページをGOLD化することが難しくなります。
パソコンの方は引き続きGOLDを使えるようですが、事実上のレスポンシブデザイン終了のお知らせです。
実際、新規出店のお客さんのRMSでは強制的に新スマートフォントップページ機能に切り替えられていました。
パソコン版はGOLDで作って、スマホ版は新スマートフォントップページ機能をおとなしく使いましょう。
スマホページで禁止ルールの追加
2020年4月～スマホページでiframe、js、style(css)の使用が禁止に。
GOLD領域とPCページは引き続き使える。
今までは裏技などを使って割と好き勝手にカスタマイズしてたのが懐かしい。。
スマホの商品ページについては、スペック表などもHTMLだけでコーディングする必要あり。
<font color="red">とか、また使うことになるとは・・・初心にかえりますm(_ _;)m
商品画像の限度枚数は10枚→20枚にアップしたので、画像で差別化をしましょう。。
ナビボタンの謎
会社概要のページ用にナビボタンを生成すると、商品ページにも表示されてしまう。
商品ページだけ非表示にする・・・等はできなくなったもよう。
商品ページにナビボタンは表示させたくない、しかし会社概要からトップに戻る導線は必要・・・なので、
基本情報設定 ＞ 会社概要ページ ＞ 説明文1 に入ってHTMLでトップページへの誘導リンクを書いて応急処置。
SketchPage for 楽天市場のサービス終了
制作者サイドには直接は関係ないですが、お客さんがよく使っていたページ制作ツール「SketchPage」のサービスが2021年4月に終了するとのこと。
無料サービスだったので使っていた方も多いのでは？
今後は代替サービスを使ってね、とのことですが全部有料（月額制）。楽天よそういうとこだぞ・・・
max-width:100%;でレイアウトが崩れる
レスポンシブデザインでよく使う「max-width:100%;」、これが商品ページで悪さをして商品画像たちが小さくなってしまった。
max-width:100%;は一括指定ではなく、各場所で設定するようにしないといけない。
ここが普通のホームページ制作とは違うところ。
以上、楽天市場でのページ制作メモでした。
ホームページ制作と違って、楽天などモールの環境に依存した制作はひとクセあって、それはそれで燃えました！楽しい…
管理画面や仕様が結構なスピードで変わっていくので、少しブランクが空くだけでも下調べが必要ですね。日々勉強です。
また壁にぶつかったら更新します！
こなす🍆
