デザインテンプレート

No.KAI4301

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

1

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

ヘッダー部

mypage.twig

favorite.twig

login.twig

search_product.twig

左図の通り、それぞれの箇所は、それぞれの twig ファイルが反映されています。
twig ファイルは、下記のように Block フォルダに保存されています。
■ app/template/*****/Block/mypage.twig
以下の twig ファイルは管理画面から編集すること

globalmenu.twig

contact.twigはできません。編集が必要な場合は直接 twig を編

cart.twig

集してください。
mypage.twig favorite.twig
globalmenu.twig contact.twig

logo.twig がそれぞれのファイルを読み込んでいます。

■ app/template/*****/Block/logo.twig
ブロック名：ロゴ

logo.twig の記述
ロゴ
twig を読み込んでいます。
順番を入れ替えて、並び順を変更することも可能です。
グローバルメニューを読み込んでいます。

■ app/template/*****/Block/mypage.twig
ログアウト時

ログイン時■ app/template/*****/Block/favorite.twig
ログアウト時

ログイン時■ app/template/*****/Block/login.twig
ログアウト時

ログイン時

ログアウト時は、アイコンクリックで「ログインページ」へ遷移します。

■ app/template/*****/Block/search_product.twig
スマホ用のドロワーメニューと共通の twig です。
CSS で調整しています。

■ app/template/*****/Block/contact.twig
店舗情報は、設定＞店舗設定＞基本設定が反映されています。

■ app/template/*****/Block/cart.twig
ポイント設定が有効のときに表示されます。
送料無料条件（金額）が有効のときに表示されます。
送料無料条件（数量）が有効のときに表示されます。

ポイント設定、送料無料設定が無効のときには、ピックアップ商品として、商品が 1 点表示されるようになっています。
下記ファイルを修正して、商品を設定してください。
■ app/template/*****/Block/cart_left.twig■ app/template/*****/Block/globalmenu.twig■ app/template/*****/Block/globalmenu.twig「全商品」は twig ファイルに記述されています。
それ以外は、カテゴリが自動的に反映されます。
親カテゴリが多いとメニューバーが窮屈な感じになりますので、カテゴリを作成する際は数や文言を考慮してください。

「全商品」を削除する方法① 4 行目付近の数値を 0 に変更します。
{% set parent_cnt = 0 %}② 33 行目～ 35 行目付近の全商品を削除します。
{# ▼全商品 #}<li class="product_all"><a href="{{ url('homepage') }}products/list"> 全商品 </a></li>{# ▲全商品 #}スマホ：ドロワーメニュー
nav_sp.twig は、footer.twig で読み込んでいます。
■ app/template/*****/Block/footer.twig① 商品検索■ app/template/*****/Block/search_product.twig② カテゴリー■ app/template/*****/Block/category_nav_sp.twig③ カートを見る～ホームに戻る■ app/template/*****/Block/login_sp.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

10EC-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）コンテンツ管理＞レイアウト管理「商品一覧ページ用レイアウト」が確認できます。

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