投稿日 2017-10-19
著者 staff

futureshop（フューチャーショップ）共通のレイアウトがある場合に便利な「レイアウト編集」

Blogのカテゴリ futureshopの使い方
Blogのカテゴリ制作ノウハウ

ECサイトを構築する時にとても便利なASP「FutureShop2（フューチャーショップ2）」。

EC-CUBEなどのCMSでは、ヘッダやフッタなどの全ページに共通して表示させたい要素を管理画面上で設定することができますが、FutureShop2でも同様に設定することができます。

今回はその共通の要素を設定する「レイアウト編集」について触れてみたいと思います。

共通の要素を設定する「レイアウト編集」

今回は弊社がFutureShop2で構築した、松阪牛を販売するECサイト「長太屋」をモデルにご説明していきます。

松阪牛の長太屋　トップ

松阪牛(松坂牛)の通販専門　長太屋

お届けする松阪牛はすべて厳選されたA4からA5の高等級。常時250頭飼育の自家牧場で育てた安心・安全な最高級の松阪牛をステーキ・すき焼き・しゃぶしゃぶ・焼き肉でご堪能いただけます。ギフトにも最適です。

www.matsuzaka-gyu.com

この長太屋サイトの全ページに共通して表示させているのが「ヘッダ」と「フッタ」。
グローバルナビゲーションやフッターリンクは全ページ共通で表示させたい要素です。

ヘッダとフッタ

そしてトップページやお問い合わせのページを除いた、ほとんどのページにて表示しているのがサブナビゲーション「左メニュー」です。

左メニュー

でもサブナビゲーションは、カテゴリごとに異なるメニューを表示させたいケースもありますよね。
例えば長太屋の場合は「ギフト商品」と「ご自宅用商品」では異なる左メニューを表示しています。

ギフトとご自宅用のカテゴリによって違う左メニューを表示

このようなケースも、FutureShop2の「レイアウト編集」を使用すれば簡単に設定することができます。

「レイアウト編集」で設定できるのは「ヘッダエリア」「フッタエリア」「右メニュー」「左メニュー」の4つになります。

以下は管理画面の設定項目の一部ですが、このように表示させたいエリアの内容（HTML）を設定できる…それが「レイアウト編集」の機能です。

ページレイアウト指定

それでは試しに新しい左メニューを登録してみたいと思います。

新しいレイアウトを登録してみよう

01.まずはデザイン設定へ

FutureShop2でサイトを構築したり、サイトの枠組みに関する設定を行う場合は「構築メニュー」から編集を行います。今回はサイトのテンプレートに関わる修正なので「デザイン設定」へ。

デザイン設定

サイトのテンプレートの【編集】から、「レイアウト編集」の画面へ移動します。

02.レイアウト編集へ移動

「レイアウトパターン」の「追加レイアウト」にチェックを入れ、プルダウンリストから未登録のレイアウトパターンを探します。

プルダウンから未登録のレイアウトパターンを探す

今回は「07：追加レイアウトパターン07」が空っぽだったのでこちらを使用してテンプレートを作成します。
使用する空のテンプレートを選択したら【切り替え】のボタンを押します。

切り替え
※選択しただけでは入力する画面に移動することができないので注意してください

03.新しいレイアウトパターンを登録

次は新しいレイアウトパターンの登録を行いましょう。
（1）にパターン名を入力します。
今回はキャンペーンのページで使用するメニューを作成してみようと思いますので「商品-キャンペーン」という名前を付けてみました。
（2）では共通要素を表示させるエリアにチェックを入れます。
現在のサイトの作りに倣って「ヘッダエリア」「フッタエリア」「左メニュー」の3つにチェックを入れました。
（3）各要素の1カラムの幅の数値を入力しましょう。