【2022年8月更新】楽天GOLD、RMSでの制作メモ
久しぶりに楽天でページ制作を行ったので、記録としてメモしておきます。
相変わらずクセがすごいぞ楽天…
文字コードはEUC–JP、文字化けに注意
楽天の文字コードはEUC-JP。楽天の文字コードはEUC-JP！！！！！（大事なことなので2回）
いつもの調子でUTFで作っていたら、検索窓がしっかり文字化けしてしまった。
UTFで作った人のための検索窓文字化け対策
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>
<input value="検索" type="image" src="img/xxxx.png" onclick="document.charset='EUC-JP'; document.rakutenSubmit.submit();"> ▲検索ボタンの記述をしている箇所に「onclick=”document.charset=’EUC-JP’; document.rakutenSubmit.submit();」を追記。
↑IEはお亡くなりになったので消しました
面倒な場合は最初からすべてのファイルを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">
看板・ナビボタンを消す方法
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%;は一括指定ではなく、各場所で設定するようにしないといけない。
ここが普通のホームページ制作とは違うところ。
以上、楽天市場でのページ制作メモでした。
ホームページ制作と違って、楽天などモールの環境に依存した制作はひとクセあって、それはそれで燃えました！楽しい…
管理画面や仕様が結構なスピードで変わっていくので、少しブランクが空くだけでも下調べが必要ですね。日々勉強です。
また壁にぶつかったら更新します！
こなす🍆
お問い合わせはこちら
「作ったホームページのここを直したい」
「サーバーやドメインのことを教えてほしい」
「見積もりだけほしい」
「ネットショップを開設したい」
…などなど、ホームページにまつわるお悩みやご要望がありましたら、お気軽にお問い合わせください。
しつこい営業は一切いたしませんので、安心してご連絡ください。
