楽天GOLD、RMSでの制作メモ
久しぶりに楽天でページ制作を行ったので、記録としてメモしておきます。
相変わらずクセがすごいぞ楽天…
文字コードはEUC–JP、文字化けに注意
楽天の文字コードはEUC-JP。楽天の文字コードはEUC-JP！！！！！（大事なことなので2回）
いつもの調子でUTFで作っていたら、検索窓がしっかり文字化けしてしまった。
■検索窓の文字化け対策
formタグにaccept-charsetを設定。
<form action="http://esearch.rakuten.co.jp/rms/sd/esearch/vc" method="get" accept-charset='EUC-JP'>▲しかしaccept-charsetはIEで動作せず文字化けするので・・・
<input value="検索" type="image" src="img/xxxx.png" onclick="document.charset='EUC-JP'; document.rakutenSubmit.submit();">▲検索ボタンの記述をしている箇所に「onclick=”document.charset=’EUC-JP’; document.rakutenSubmit.submit();」を追記。
面倒な場合は最初からすべてのファイルをEUC-JPで作ろうそうしよう。
iframeを活用してメンテナンス性をあげる
楽天GOLDでトップページを構築する場合はヘッダー・サイドナビ・フッターをそれぞれiframeにわけておくと商品ページにも埋め込むことができるしGOLD上で一括管理できて便利。
※iframe内のリンクはtarget topにしないとフレーム内で開いてしまうので各ファイルの<head>内に以下を記述することを忘れない。
<base target="_top">トップページをレスポンシブデザインにする
トップページをレスポンシブデザインで制作した場合index_sp.html を用意する必要はなし
GOLDのサーバー上にindex.htmlをアップロードしておけば、「楽天GOLDで作成したスマートフォン用トップページを表示する」を選択したときスマホでもindex.htmlの内容が表示される
スマホページで禁止ルールの追加
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%;は一括指定ではなく、各場所で設定するようにしないといけない。とほほ
以上、楽天市場でのページ制作メモでした。
ホームページ制作と違って、楽天などモールの環境に依存した制作はひとクセあって、それはそれで燃えました！楽しい…
管理画面や仕様が結構なスピードで変わっていくので、少しブランクが空くだけでも下調べが必要ですね。日々勉強です。
また壁にぶつかったら更新します！
こなす🍆
お問い合わせはこちら
「作ったホームページのここを直したい」
「サーバーやドメインのことを教えてほしい」
「見積もりだけほしい」
「ネットショップを開設したい」
…などなど、ホームページにまつわるお悩みやご要望がありましたら、お気軽にお問い合わせください。
しつこい営業は一切いたしませんので、安心してご連絡ください。
