テンプレート選択からヘッダー/サイドナビ/フッター
ヤフーECサイトを構築する上で、まず大枠となるヘッダー、サイドナビ、フッターの編集方法と、その大枠に囲まれたヤフーサイトのトップページの編集方法など、このページではストアクリエイターProで大枠のデザインを構築するやり方をご紹介致します。
まずは編集モードの変更
デフォルトの基本状態では【かんたんモード】が選択されていますので、まずはそれを【通常モード】に選択・保存します。ストアクリエイターProにて、
ストア基本設定＞編集モードへお進み頂きますと下図の編集画面が表示されますので、ここで【通常モード】を選択して画面下部の更新ボタンを押して反映させます。
ベースレイアウトのテンプレートを選択
大枠のヘッダー、サイドナビ、フッターを編集する前に全体のレイアウトやイメージカラーなどを選択します。ストアクリエイターProにて、
ストアデザイン＞テンプレート選択へお進み頂きますと下図の画面が表示されます。この編集画面は、大枠レイアウトが2カラムなのか、1カラムなのか、レフトナビの横幅が何ピクセルなのかなどECサイトの全体の構造を決める編集ページです。
一番よく使われている使いやすいレイアウトは、タイプ3か4だと思います。タイプ3は、左メニューがある2カラムの構造で、その左メニューは200pxにするというものです。左のサイドナビの横幅が200pxですとバナーを設置する際も画像サイズも区切りがよいですし、使いやすいテンプレートだと思います。サイト全体の幅を横幅を広くしてゆったり見せたいショップさんは、タイプ4を選択されてサイドナビが220pxにされても良いかと思います。
テンプレート決定後は全体の横幅を決める
テンプレートが決まった後は全体の設定を行います。ストアクリエイターProにて、
ストアデザイン＞全体の設定へお進み頂きますと下図の編集画面が表示されます。仕組み自体を説明しますと、前述のテンプレート選択で、左メニュー200pxのタイプ3を選択したとしますと、コンテンツ自体の幅が750px程度の合計950pxというような計算でページ幅を入力します。今は横幅が1000px以上のサイトが主流ですので、例えばタイプ3でサイドナビ200pxに選択したとして、コンテンツ自体は800pxにする場合、サイドナビとコンテンツの間がヤフーでは10pxに設定されておりますので、サイドナビ200px＋余白10px＋コンテンツ800pxの合計1010pxとなりますので、ページ幅は1010と入力するとよいでしょう。
文字色を選択する箇所もあります。未訪問、訪問済みなどとありますが、マウスオーバーだけ少し薄い色にして、その他の箇所は一律黒系の文字コードにすると良いです。例えば文字は真っ黒で、リンクの文字にカーソルが当たった時だけグレーにしたいという場合は、マウスオーバーの箇所を
#666666にして、その他の箇所は
#000000にすると良いと思います。
メニュー関連の帯色を選択する箇所
前述のストアクリエイターProにて、
ストアデザイン＞全体の設定の編集画面の下部に下図のような色を選択する箇所があります。何も触っていない状態ですと黄色っぽい色が選択されているケースが多いですが、ここの色は何かと言いますと、メニューやタイトル関連の帯色を選択する箇所になります。ヤフーでは【お買い物ガイド】や【プライバシーポリシー】などの基本ページがありますが、こういったページのタイトルバーの色もここで変更した色が反映されます。デフォルトの黄色っぽい色ではなく、通常はグレーベースでまとめることが多いかと思いますので、その方法をご案内させて頂きますと図のように選択するとキレイに見えます。薄いグレーを帯にして、文字は黒、枠となる線も薄いグレーになります。
テンプレートと全体の設定が完了したらヘッダーの編集
次はサイトの大枠となるヘッダー、サイドナビ、フッターの中のヘッダーの編集方法をご案内させて頂きます。ストアクリエイターProにて、
ストアデザイン＞ヘッダー・看板＞パーツの並べ替えへお進み頂きますと、下図の編集画面が表示されます。これはヘッダーだけに限らずヤフーではパーツベースの編集になっており、何のパーツを選択するのかを【パーツの並べ替え】の中から取捨選択して、そのパーツ毎に編集をしていくという全体の仕組みになっております。
ヘッダーはお店の看板や大きな帯のメニューとなるグローバルナビを設定するショップが多いかと思います。【看板】というパーツはありますが、オリジナルデザインでカスタマイズしているショップさんは上図のような設定になっています。【フリースペース】と【パンくずリスト】の2つです。フリースペースとは文字通り自由にHTMLを入れることができるスペースということです。ヘッダーを自由にHTML編集したいショップさんは、フリースペースを選択して、この中を自由にHTML編集することでヘッダーを構築します。HTML編集があまりできないショップさんでしたら、【看板】【ストアサービス】【ストア内検索】【パンくずリスト】の順番でパーツ並べ替えをするとよいかと思います。このパーツでしたら看板画像を登録するだけでヘッダーが完成します。
レフトナビを編集する
ヘッダー同様にレフトナビもまずはパーツを選択します。ストアクリエイターProにて、
ストアデザイン＞サイドナビ＞パーツの並べ替えへお進み頂きますと下図の画面が表示されます。ここでヘッダー同様に左メニュー、サイドナビのパーツを取捨選択できます。よくある設定は、下図のパーツ選択です。【ストア内検索】は検索窓のことですのでヘッダーに設置しなければサイドナビの一番上に設置するケースが多いと思いますので、その位置に設置し、【ストア内商品カテゴリ】というのはショップの全カテゴリリストを自動表示してくれるパーツですので必須です。【フリースペース1】というのはヘッダーの時にご紹介したように自由にHTML編集ができるパーツになりますので、サイドナビにSALEのバナーを入れたりする場合は、このパーツを設置して、バナーをHTMLで入れるという仕組みになっています。後は、【カレンダー】ですが、これもヤフーのECサイトではよく設置されているものになり、お店の営業日をカレンダー形式で表示できて便利ですので設置した方が良いかと思います。
パーツの並べ替えが完了して、実際にサイドナビの【フリースペース1】にHTMLを入れたい場合は、
ストアデザイン＞サイドナビ＞デザイン編集へお進み頂き、【フリースペース1】をクリックしますとHTML編集画面が表示されます。カレンダーを実際に設定したい場合は、
ストアデザイン＞サイドナビ＞デザイン編集のへお進み頂き、【カレンダー】をクリックして編集画面が表示されるというわけです。
フッターを編集する
フッターもヘッダー、サイドナビ同様に編集できます。ストアクリエイターProにて、
ストアデザイン＞フッター＞パーツの並べ替えへお進み頂きますと下図編集画面が表示されます。ここでも各種パーツがあり、それを取捨選択することでフッター構築しますが、一般的なヤフーECサイトですと、決済や配送を紹介するガイド文言が表示されているショップさんが多いかと思います。【インフォメーション】というものを選択しますとHTMLに詳しくないショップさんでもショッピングガイドのようなレイアウトで決済・配送の文面を掲載することができます。デザイン面でも自由にHTML編集したいショップさんが実際には多いかと思います。その場合はヘッダー、サイドナビ同様に【フリースペース1】を選択します。【コピーライト】というものもありますが、これは単純にコピーライトの文言を入れるボックスといったところです。
パーツを選択した後、フッターをオリジナルHTMLで編集したいという場合は、ヘッダー、サイドナビ同様になりますが、
ストアデザイン＞フッター＞デザイン編集へお進み頂き、【フリースペース1】をクリックすると編集画面に移行しますので、その画面でHTML入力ができます。
大枠が完成した後は、トップページのパーツ選択
以上の設定が完了しましたら、テンプレートを選び、全体の設定をして、ヘッダー/サイドナビ/フッターの大枠のパーツ選択と並び替えも完了した状態ですので、その大枠に囲まれたトップページの編集を最後に行います。
ヤフートリプルで完全にオリジナルのHTMLをトップページに切り替える方法もありますが、ここではあくまでストアクリエイターProで編集する方法をご案内させて頂きます。ストアクリエイターProにて、
ストアデザイン＞トップページ＞パーツの並べ替えへお進み頂きますと下図の編集画面が表示されます。前述の流れでヘッダー/サイドナビ/フッターを編集した後は、よく見る画面だと思います。ここでも同様にまずパーツの並べ替えを行います。【フリースペース1】【フリースペース2】というのはHTML編集するボックスのパーツです。【新着情報】はよくある日付と新着情報を記載して、お店の年末年始の休業日案内などを記載するパーツのことです。これは設置した方がよいかと思います。また、【おすすめ商品】というのも便利な機能で品番を入力することで、トップページにおすすめ商品の商品リストを表示してくれるものです。下図の画面のパーツ選択ですと、フリースペース1と2でHTML編集でバナーを入れたり、新着情報はストアクリエイターProの機能でテキスト入力で管理ができるパーツを利用し、おすすめ商品もストアクリエイターProの機能で商品リストを掲載してくれるパーツを選択するという構造になっています。
トップページをHTML編集する方法
前述の通りトップページのパーツ並べ替えが完了しましたら、実際にトップページにHTMLを入れる方法です。ストアクリエイターProにて、
ページ編集をクリックしますとトップページのプレビュー画面が表示されます。ここの【編集】ボタンを押しますと、上図のように編集画面が表示されます。フリースペース1と2の欄がありますので、ここにHTMLを入れることでトップページのHTML編集ができるようになっております。
関連記事一覧
