ITOBEN STYLE Blog

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

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

■app/template/[テンプレートコード]/Block/sales_ranking.twig
slick.min.jsを利用し、カルーセルを適用しています。
プラグイン一覧の「設定」で「集計期間」と「表示個数」が設定できます。

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

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

■app/template/[テンプレートコード]/Block/recommend_product_block.twig
slick.min.jsを利用し、カルーセルを適用しています。

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

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

■app/template/[テンプレートコード]/Block/shoppingguideitoben.twig
①　オーナーズストア＞プラグイン＞プラグイン一覧のショッピングガイドの「設定」をクリックします。
②　「送料について」と「配送について」を入力すると、フロントページに反映されます。HTMLタグの入力も可能です。

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

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

■app/template/[テンプレートコード]/Block/garally.twig
slick.min.jsを利用し、カルーセルを適用しています。

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

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

■app/template/[テンプレートコード]/Block/free.twig
classのカラム設定を削除し、news.twigと横並びの設定になっているのを解除しています。

col-sm-3

↓

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

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

■app/template/[テンプレートコード]/Block/news.twig
classのカラム設定を削除し、free.twigと横並びの設定になっているのを解除しています。

col-sm-9

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

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

■app/template/[テンプレートコード]/Block/category.twig
・#headerに配置しても表示されません。
・ドロワーメニューには反映されません。
・子カテゴリはアコーディオン形式で開きます。

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

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

■app/template/[テンプレートコード]/Block/logo.twig
①　テキストから画像に変更しています。

<div class="header_logo"><a href="{{ url('homepage') }}"><img src="{{ app.config.front_urlpath }}/img/common/logo.png" /></a></div>

②　ロゴ画像の場所
■html/template/[テンプレートコード]/img/common/logo.png
③　スマホでは、ロゴが中央に表示されます。

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

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

■app/template/[テンプレートコード]/Block/search_product.twig
[HOT検索キーワード]の記述

<div class="word_search">
<span class="hot">HOT検索キーワード：</span>
{# ▼ #}
{% set name = 'ディナー' %}
<a href="{{ url('product_list') }}?category_id=&name={{ name }}">{{ name }}</a>
{# ▼ #}
{% set name = 'フォーク' %}
<a href="{{ url('product_list') }}?category_id=&name={{ name }}">{{ name }}</a>
{# ▼ #}
{% set name = 'パーコレーター' %}
<a href="{{ url('product_list') }}?category_id=&name={{ name }}">{{ name }}</a>
{# ▼ #}
{% set name = '' %}
<a href="{{ url('product_list') }}?category_id=&name={{ name }}">{{ name }}</a>
{# ▼ #}
{% set name = '' %}
<a href="{{ url('product_list') }}?category_id=&name={{ name }}">{{ name }}</a>
</div>

①　商品に合わせて「ディナー」等のキーワードを変更してください。
②　追加する場合は、set name = ”にキーワードを入力してください。

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

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

■app/template/[テンプレートコード]/Block/cart.twig
22行目付近

<!--▼ヘッダーメニュー-->
<div id="header_menu_area">
<ul class="header_menu_link">
<li>
<a href="{{ url('help_about') }}">
<span class="cb glyphicon glyphicon-star"></span>
当サイトについて
</a>
</li>
<li>
<a href="{{ url('help_privacy') }}">
<span class="cb glyphicon glyphicon-user"></span>
プライバシーポリシー
</a>
</li>
<li>
<a href="{{ url('help_tradelaw') }}">
<span class="cb glyphicon glyphicon-list
-alt"></span>特定商取引法表記
</a>
</li>
<li>
<a href="{{ url('contact') }}">
<span class="cb glyphicon glyphicon-pencil"></span>
お問い合わせ
</a>
</li>
</ul>
</div>

アイコンは、Bootstrapを利用しています。
■html/[テンプレートコード]/fonts

▼記述タグ

<span class="cb glyphicon glyphicon-star"></span>

http://glyphicons.bootstrapcheatsheets.com/
ここにアクセスし、アイコンの下にあるCopyをクリックするとタグをコピーできます。
Copy → </>HTML Tag