ヘッダー・フッター・レフトナビとHTML/CSS
まずECサイトを構築する際は、大枠となるヘッダー/左メニュー/フッターの共通部分から構築していきます。
楽天に限らずヤフーでも自社サイトのショッピングカートであるメイクショップでもカラーミーショップでも、
サイトの共通部分となるヘッダー/左メニュー/フッターを編集するメニューというものは必ずあります。
そのメニューで大枠となる共通部分(ヘッダー/左メニュー/フッター)を構築して、
その大枠で囲まれた中身になる部分がTOPページだったり、商品カテゴリページ、商品ページとなります。
ここでは楽天RMSの中でその大枠となる共通部分を編集する方法をご案内させて頂きます。
まず楽天RMSの中で上図のように
デザイン設定＞ヘッダー・フッター・レフトナビ
へお進み頂きます。すると大枠のヘッダー/左メニュー/フッターをHTML編集する為の編集画面に移行します。
テンプレートの新規登録という箇所で【新規登録する】ボタンを押して頂きますと、
ヘッダー/左メニュー/フッターの大枠テンプレートを構築できます。
そのテンプレートに適当に名前を新規制作2019などと付けて、下図のHTML編集画面にて共通部分のソースを構築した後【プレビュー画面へ進む】ボタンからプレビュー確認して保存します。
これで大枠となる共通部分のヘッダー/左メニュー/フッターのテンプレートを構築・保存ができます。
オープン審査の時には看板やナビボタンの登録を行ったかと思いますが、
現実的に運営の中で看板とナビボタンを設定しているショップは少ないのが現状です。
多くのショップは大枠のヘッダー/左メニュー/フッターにそのショップのオリジナルHTMLを入れて、
デザインを作成してショップ構築をされています。
ヘッダーにはショップロゴやグローバルメニューを設置し、左メニューにはカテゴリや営業日カレンダー、
フッターにはショッピングガイドを入れるなどECサイトの構成自体は似た構成になっております。
後はHTML/CSSにてその店舗のオリジナルデザインを構築する。という仕組みになっております。
楽天GOLDを使ってiframeで大枠を構築する
最初に楽天ECサイトを構築する際に、WEB制作会社に依頼されてiframeベースで大枠が構築されているショップさんも多くいらっしゃいます。仕組みとしては、楽天GOLDの中に
ヘッダーならばheader.htmlファイル
左メニューならばleft.htmlファイル
フッターならばfooter.htmlファイル
をUPされて、前述の楽天RMSメニューでデザイン設定＞ヘッダー・フッター・レフトナビでは、
そのUPされたhtmlファイルをパーツ毎にiframeで表示している構造です。
もちろんこの構造でもかまいませんが、最初に制作されて運営をされるのはショップさん側ですので
納品されたはいいものの更新をする際に逐一楽天GOLDでhtmlファイルを触らなければならず、
運営に拡張性がないと悩まれているショップさんがいらっしゃる事実はあります。
大切なことは最初に大枠となるヘッダー/左メニュー/フッターを構築する際に、
楽天RMSでHTML編集することで管理ができるのか、楽天GOLDにhtmlファイルをUPし、
パーツ毎にiframeで設定するタイプの大枠にされるのか。ここは注意が必要です。
CSSはどのように設定するのか
iframeにて楽天GOLDの中にパーツ単位でヘッダー/左メニュー/フッターのhtmlをUPする際は、
それらのCSSは同様に楽天GOLDの中にUPされる方法が通常ですが、
iframeを使わず楽天RMSの中にHTMLを入れて大枠管理する方法でサイト構築されている場合の
CSSはどのようになるのか。と言いますと物理的にフッターの中などに入れることが楽天では一般的です。
前述の共通大枠(ヘッダー/左メニュー/フッター)の編集画面にて下図のようにフッターコンテンツのHTMLを入れる箇所があります。
ここにフッターのHTMLを入れた後に上図のようにCSSを物理的に入れます。
CSSは大枠のデザインを構成する重要なソースですので制作会社に制作依頼された場合は、
編集注意などの注意文言もある状態で説明・納品されているケースが多いです。
文字通り編集する際は予めソースのバックアップなどを取り編集者の責任のもと作業を行って下さい。
まとめますと、大枠の共通ヘッダー/左メニュー/フッターを管理する方法は楽天では2通りあり、
楽天RMSの中にHTML/CSSを入れて管理する方法と、楽天GOLDの中にパーツ単位でhtmlファイルを入れ、
それをiframeで表示させる方法の2通りです。どちらがよいかは運営ショップさん側のHTMLスキルによりますが、
初心者のショップさんはRMSの中だけで管理された方が運営は楽だと思います。
関連記事一覧
