ITOBEN STYLE Blog

本解説は下記ページのデザインテンプレートダウンロード商品の解説です。
http://www.kaiplus.com/products/list.php?category_id=50

デザインテンプレート適用後のサイトデザイン
http://kaiplus.com/eccube3/1605a/

▼1階層（バナーに表示されるリスト）のみ

<li>
<a href="{{ url('*****') }}">■■■</a>
</li>

▼2階層あり

<li>
<a href="{{ url('*****') }}">■■■</a>
<ul>
<li>
<a href="{{ url('*****') }}">●●●</a>
</li>
</ul>
</li>

▼3階層あり

<li>
<a href="{{ url('*****') }}">■■■</a>
<ul>
<li>
<a href="{{ url('*****') }}">●●●</a>
<ul>
<li><a href="{{ url('*****') }}">◆◆◆</a></li>
</ul>
</li>
</ul>
</li>

本解説は下記ページのデザインテンプレートダウンロード商品の解説です。
http://www.kaiplus.com/products/list.php?category_id=50

デザインテンプレート適用後のサイトデザイン
http://kaiplus.com/eccube3/1605a/

【カテゴリ数が多くグローバルメニューのレイアウトが崩れてしまう時の対応】

①　グローバルメニューでは非表示にし、ドロワーメニューでは表示する

■app/template/[テンプレートコード]/Block/login.twig
23行目付近、classに[sp]を追加

{% macro tree(Category) %}
<li class="category_list sp">

②　グローバルメニュー、ドロワーメニューで非表示にする場合は、コードを削除する。（2箇所）
42行目付近、61行目付近、

{% for Category in Categories %}
{{ _self.tree(Category) }}
{% endfor %}

③　カテゴリを手動で入力する

<li>
<a href="{{ url('product_list') }}?category_id=2">インテリア</a>
</li>

本解説は下記ページのデザインテンプレートダウンロード商品の解説です。
http://www.kaiplus.com/products/list.php?category_id=50

デザインテンプレート適用後のサイトデザイン
http://kaiplus.com/eccube3/1605a/

（1）TOPページの画像スライド部分は、「#contents_top」に読み込ませているので、サイドカラム・メインカラムよりも上に表示されます。

（2）サイドカラムより先にメインカラムを読み込んでいるので、スマホで見たとき、メインカラムが常に上に表示されます。
表示順は、「メインカラム」「#side_left」「#side_right」の順です。

 

本解説は下記ページのデザインテンプレートダウンロード商品の解説です。
http://www.kaiplus.com/products/list.php?category_id=50

デザインテンプレート適用後のサイトデザイン
http://kaiplus.com/eccube3/1605a/

（1）EC-CUBE3のデフォルト状態で「#side_left」にブロックを配置します。

（2）フロントページでは下図のように表示されます。

（3）スマホで見たとき、「#side_left」のブロックがメインカラムのコンテンツよりも上に表示されます。

本解説は下記ページのデザインテンプレートダウンロード商品の解説です。
http://www.kaiplus.com/products/list.php?category_id=50

デザインテンプレート適用後のサイトデザイン
http://kaiplus.com/eccube3/1605a/

EC-CUBE3のデフォルトCSS　style.css　default.css　はほとんど修正していません。
「default.css」の最後に、独自のCSSを追加しています。
（1）style.cssの変更点
①　全体の幅を変更

/* --------------------------------
Common
-------------------------------- */
.inner {
max-width: 1150px;
}
/* ★全体の幅を変更★ */
.inner {
max-width: 1000px;
}

②　価格表示の変更

.item_price {
color: #525263;
font-weight: bold;
}
↓【変更】
.item_price {
color: #525263;
font-weight: bold;
}
.item_price {
color: #C00;
font-weight: normal;
}

③　追加

/* ▼レイアウト変更（スマホ表示の際、メインカラム（#main）が上に表示されるようにする） */
/* レフトカラムにのみブロックあり */
.theme_side_left #side_left {
float: left;
width: 25%;
padding-right: 16px;
}
.theme_side_left #main {
float:right;
width:75%;
}
/* レフトカラムとライトカラムにブロックあり */
.main-left {
float:left;
width:75%;
}
.theme_side_both #side_left {
float: left;
width: 33.3%;
padding-right: 16px;
}
.theme_side_both #main {
float: right;
width:66.6%;
}

（2）default.cssの最後に独自のCSSを記述
下記の記述以降が独自CSSです。

/* |||||||||||||||■デザインテンプレートカスタマイズ■||||||||||||||| */

本解説は下記ページのデザインテンプレートダウンロード商品の解説です。
http://www.kaiplus.com/products/list.php?category_id=50

デザインテンプレート適用後のサイトデザイン
http://kaiplus.com/eccube3/1605a/

詳細については下記をご覧ください。
http://www.kaiplus.com/user_data/design_ec3.php

本解説は下記ページのデザインテンプレートダウンロード商品の解説です。
http://www.kaiplus.com/products/list.php?category_id=50

デザインテンプレート適用後のサイトデザイン
http://kaiplus.com/eccube3/1605a/

スライドの動作パターンを21種類の中から選択することができます。
詳細については下記をご覧ください。
http://www.kaiplus.com/user_data/ec3top_slider.php

本解説は下記ページのデザインテンプレートダウンロード商品の解説です。
http://www.kaiplus.com/products/list.php?category_id=50

デザインテンプレート適用後のサイトデザイン
http://kaiplus.com/eccube3/1605a/

（1）オーナーズストア＞プラグイン＞プラグイン一覧の「独自プラグイン」で、ダウンロード商品に同梱されているプラグインをアップロードします。

（2）プラグインをすべてアップロードした状態

（3）コンテンツ管理＞ページ管理＞TOPページ＞レイアウト編集（プラグイン有効直後）

（4）各ブロックを配置します。
おすすめ商品ブロックの全ページチェックは外してます。

（5）TOPページ

①　おすすめ商品：管理画面で登録すると反映されます。
②　売上ランキング：商品が購入されると反映されます。
③　最近チェックした商品：商品詳細ページを閲覧すると反映されます。
④　ショッピングガイド：基本情報設定＞特定商取引法で登録した内容が反映されます。
「送料について」と「配送について」は、「ショッピングガイド」プラグインの「設定」が反映されます。

（6）コンテンツ管理＞ページ管理＞商品一覧ページ＞レイアウト編集
「#side_left」にカテゴリブロック等を配置します。

（7）商品一覧ページ

本解説は下記ページのデザインテンプレートダウンロード商品の解説です。
http://www.kaiplus.com/products/list.php?category_id=50

デザインテンプレート適用後のサイトデザイン
http://kaiplus.com/eccube3/1605a/

（1）テンプレートは管理画面には適用されません。
EC-CUBE3のデフォルト状態で、TOPページのブロック配置は下図のようになっています。

（2）テンプレート適用後のTOPページ

（3）カテゴリブロックは「#header」に配置してあっても表示されません。
下図のように、カテゴリブロックを未使用ブロックに置いたとしてもグローバルメニューには読み込まれていないので、フロントページのレイアウトには影響しません。

本解説は下記ページのデザインテンプレートダウンロード商品の解説です。
http://www.kaiplus.com/products/list.php?category_id=50

デザインテンプレート適用後のサイトデザイン
http://kaiplus.com/eccube3/1605a/

（1）オーナーズストア＞テンプレート＞アップロード
（2）コード・名称の入力とファイルのアップロード
テンプレートコード：半角英数字、名称は自由。
テンプレート名：名称は自由。
テンプレートファイル：[.tar.gz]拡張子のダウンロード商品を選択

 

（3）オーナーズストア＞テンプレート＞テンプレート一覧で、テンプレートを選択後「登録」する。

（4）テンプレートを登録するとテンプレートコード名でフォルダが2つ生成されます。
カスタマイズを行う際は、このフォルダのファイルを編集することになります。
■app/template/[テンプレートコード]　←twigファイル
■html/template[テンプレートコード]　←css fonts img js フォルダ