デザインテンプレート

No.KAI4302

EC-CUBE デフォルトにデザインテンプレートを適用すると、左図のように表示されます。
管理画面のブロック管理、または直接 twig ファイルを編集して自身のページに合った表示に変更してください。

1

CSS の記述について
デザインテンプレートは、オリジナル EC-CUBE の twig ファイ
ルや CSS ファイルをベースとして作成されています。
CSS については、オリジナルの CSS を変更するのではなく、style.css の最後に追加することで、オリジナル箇所を上書きするような形をとっています。
左図の 19913 行目付近から記述されています。
■ html/template/*****/assets/css/style.css※ ***** は、デザインテンプレートの保存フォルダ（以降、同様）2

ヘッダー部（1）サイトのキャッチフレーズ■ app/template/*****/Block/header.twig
15 行目付近（2）ログイン■ app/template/*****/Block/login.twig①

ログアウト時②

ログイン時（3）商品検索■ app/template/*****/Block/search_product.twig
PC、スマホ共通の twig ファイルです。
CSS で調整しています。

（4）カート■ app/template/*****/Block/cart.twig（5）スマホ：ドロワーメニュー①

商品検索■ app/template/*****/Block/search_product.twig
②

カテゴリー

■ app/template/*****/Block/category_nav_sp.twig③

カートを見る～ホームに戻る■ app/template/*****/Block/login_sp.twig

3

グローバルメニュー （スマホ非表示）（1）商品一覧■ app/template/*****/Block/globalmenu.twig
27 行目付近の記述により、カテゴリーが自動的に反映されるようになっています。
親カテゴリが横並び 4 列で表示されます。
管理画面の基本設定で「送料無料設定」「ポイント設定」を登録すると、自動的に反映されます。

管理画面の基本設定で「送料無料設定」「ポイント設定」が登録されていない場合は、「ピックアップ」が表示されます。
■ app/template/*****/Block/globalmenu.twig
71 行目付近の URL（商品 ID）、商品画像名、商品名を修正してください。

（2）人気アイテム
画像やリンクを設定してください。
■ app/template/*****/Block/globalmenu.twig
94 行目付近からの URL（商品 ID）、商品画像名、商品名を修正してください。

（3）最新ニュース■ app/template/*****/Block/globalmenu.twig
128 行目付近の記述により、新着情報が自動的に反映されるようになっています。
「新着情報はこちら」をクリックすると、トップページに配置した「新着情報」にとびます。

（4）ご利用ガイド■ app/template/*****/Block/globalmenu.twig
156 行目付近「ご利用ガイド」をクリックすると、ご利用ガイドページを開きます。
ご利用ガイドページ（Help/guide.twig）で、下記ファイルを読み込んでいます。
■ app/template/*****/Help/shoppingguide.twig

（5）お問い合わせ■ app/template/*****/Block/globalmenu.twig
176 行目付近

管理画面の基本情報設定で、住所や電話番号を登録すると、自動的に反映されます。

グローバルメニューの項目や内容は、下記ファイルや CSS を修正することで、ご自身で自由に作成することが可能です。
■ app/template/*****/Block/globalmenu.twig

3

トップページの画像スライド■ app/template/*****/Block/top_slider.twig
画像を変更してください。
PC・スマホで、別々の画像を表示することができます。
PC 用<img class="pc" src="{{ asset('assets/img/top/top01_pc.jpg) }}">

デモサイトでは、縦 1200px、横 2400px のものを利用しています。サイズ変更は可能ですが、縦横比が同じ画像を利用されることをお勧めします。
スマホ用<img class="sp" src="{{ asset('assets/img/top/top01_sp.jpg') }}">

デモサイトでは、横幅 700px、高さ 900px の画像を使用しています。
上（class=” pc”）が PC 用、下（class=” sp”）がスマホ用。
どちらも同じ画像を利用する場合は、class 属性を削除して、PC 用・スマホ用の 2 つのコードを下記のように一つにまとめます。
<img src=” {{ asset( ‘assets/img/top/*****.jpg’ ) }}” >top_slider.twig は、default_frame.twign の 108 行 目 付 近 で読み込まれています。
■ app/template/*****/default_frame.twig-----------------------------{% if app.request.get( ‘_route’ ) == ‘homepage’ %}{{ include( ‘Block/top_slider.twig’ ) }}{% endif %}------------------------------

4 「新入荷商品特集」ブロック■ app/template/*****/Block/eyecatch.twig

5 「トピック」ブロック■ app/template/*****/Block/topic.twig
5 点を超えると、スライドが開始されます。

6 「新着商品」ブロック■ app/template/*****/Block/new_item.twig
URL（商品 ID）、商品画像名、商品名、価格を修正してください。
5 点を超えると、スライドが開始されます。

7 「カテゴリ」ブロック■ app/template/*****/Block/category.twig
カテゴリ一覧は自動で反映されます。
クリックすると、検索キーワードでカテゴリ一覧を表示します。

8 「新着情報」ブロック■ app/template/*****/Block/news.twig
登録件数が 5 件を超えると、ページャーで表示されます。

9 「フッター」ブロック■ app/template/*****/Block/footer.twig

10

EC-CUBE デフォルトプラグイン★ 商品レビュー管理プラグイン★ おすすめ商品管理プラグイン
デザインがデフォルトとは異なります。
デザインは以下のようにカスタマイズされています。

おすすめ商品登録が 4 点をこえるとスライドします。

お客様の声

11 「カレンダー」ブロック
管理画面の「定休日カレンダー設定」で登録された日付とタイトルがカレンダーの横に時系列で並ぶようにカスタマイズしています。
ブロックは、#main_bottom エリアに配置します。

12

SVG アイコンについて
SVG アイコンは、Font Awesome を利用しています。
https://fontawesome.com/search?o=r&m=free

バージョンは、6 を選択します。
※ EC-CUBE4.3 系では、５から６にバージョンアップされました。
「Free」をクリック。
アイコンをクリック。

コードをクリックするとコピーされます。

13

商品一覧ページ（1）バナー画像■ app/template/*****/Product/list_banner.twig
カテゴリ ID と、そこで表示する画像を指定します。

上図の赤枠で説明すると、('category_id') == 1：カテゴリ ID が 1 ならば、'assets/img/category/category1.jpg'：category1.jpg を 表示する、ということになります。
カテゴリ画像を追加する場合は、下記のコードを<!-- ▼全ての商品の場合 --> の上に記述してください。
-------------------------------------{% elseif app.request.query.get('category_id') == 5 %}<img src="{{ asset('assets/img/category/category5.jpg') }}">--------------------------------------

画像サイズは、縦：500px、横：1800px ぐらいを目安にしてください。特に指定はありません。
「全ての商品カテゴリ」「指定されていないカテゴリ」の場合の画像も登録してください。
カテゴリ名は自動的に反映されます。

list_banner.twig は、default_frame.twig で読み込まれています。
■ app/template/*****/default_frame.twig
109 行目付近

（2）商品の並び方変更
右側のアイコンをクリックすると、縦一列で表示されます。
クッキーを利用することで、変更したレイアウトが継続されるようになっています。（ブラウザを閉じるまで）
商品のコメントは、商品登録の「商品説明 ( 一覧 )」が反映されます。（詳細説明に変更可能）「横並び」「縦一列」の初期設定を変更する方法
ページ管理＞商品一覧ページ
テンプレート導入時は、「横並び」が初期状態となっています。
初期状態を「縦一列」に変更するには
191 行目付近、「square active」→「square」に、192 行目付近、「list」→「list active」に、203 行目付近、「columns」→「rows」に書き換えます。
（3 カ所書き換え）「横並び」のカラム数を変更する方法
ページ管理＞商品一覧ページ
3 カラム、4 カラム、5 カラムに変更することができます。
206 行目付近、「column3」「column4」「column5」に書き換えます。

「商品説明（一覧）」を「詳細説明」に変更する方法
ページ管理＞商品一覧ページ
220 行目付近、「description_list」→「description_detail」に、222 行目付近、「description_list」→「description_detail」に書き換えます。
（2 カ所書き換え）（3）サイドカラムにブロックを配置
左図では、#side_left に「カテゴリナビ（PC）」を配置しています。

column4（4）カラム数の変更
206 行目付近の数値を変更するとカラム数が変わります。
column4 → column3

column3またはcolumn4 → column5

column5

14

商品詳細ページ（1）画像のズーム機能
商品画像にカーソルを乗せると、右エリアに拡大図が表示されます。

（2）サムネイルの表示方法の変更が可能
3 つのタイプが用意されているので、サイトに適したタイプを設定することができます。

タイプ 1

タイプ 2

タイプ 3

ページ管理＞商品詳細ページ
178 行目付近の数値を変更して、タイプを設定することがきます。（デフォルトは 2）{% set imglayout_type = '2' %}さらに、タイプ 3 では、縦サムネイルの表示件数、スマホ表示の際の横サムネイルの表示件数を設定できます。

タイプ 1
サムネイルが一覧で表示されます。スライドしません。

タイプ 2
サムネイルが横にスライドします。

タイプ 3
サムネイルが縦にスライドします。
サムネイルの表示件数は、前述の通り、変更が可能です。
商品画像の形が正方形の場合、スライドの高さがうまくフィットします。横長、縦長の場合はサムネイルの全体の高さが多少ずれます。

スマホとタブレットでは、ズーム機能は解除され、ピンチアウトが可能となります。
サムネイルはメイン画像の下に表示されます。

（3）「商品説明」の位置変更

商品説明を関連カテゴリの下に移動するには、■ app/template/*****/Product/detail.twig
下記コードを 330 行目付近、{# 商品説明 表示位置① #} の下にに移動します。
--------------------------------------------------<div class="ec-productRole__description description">{{ Product.description_detail|raw|nl2br }}</div>--------------------------------------------------

15

レイアウト管理

新規作成・適用方法（デフォルト機能）「商品一覧ページ用レイアウト」を作成する（1）コンテンツ管理＞レイアウト管理「新規作成」をクリック。

（2）レイアウトの作成①レイアウト名：商品一覧ページ用レイアウト②端末種別：PC③ブロック配置（3）コンテンツ管理＞ページ管理「商品一覧ページ」をクリック。

（4）レイアウト設定
PC 選択肢で「商品一覧ページ用レイアウト」を選択して、「登録」ボタンをクリックすれば完了です。

（5）コンテンツ管理＞レイアウト管理「商品一覧ページ用レイアウト」が確認できます。

ページに合ったレイアウトの追加
レイアウトを追加するのは自由です。
必要に応じてレイアウトを追加し、「ページ管理」でレイアウトの設定を行ってください。