カテゴリー: EC-CUBE3

EC-CUBE3デザインテンプレート解説：ブロックについて（14）定休日管理プラグイン

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

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

デザインテンプレートのインストール

1　プログラムファイルの入れ替え
2　テンプレートのアップロード
3　テンプレート適用後
4　プラグインのインストール
5　TOPページの画像スライド（画像カルーセル）
6　Body背景やヘッダー背景を簡単に変更

カスタマイズ内容

1 スタイルシートの変更
2　EC-CUBE3のデフォルト：サイドカラムにブロックを配置したときのレイアウト
3　本デザインテンプレートを適用：サイドカラムにブロックを配置したときのレイアウト
4　ブロックについて
（1）グローバルメニューのカテゴリ表示
（2）グローバルメニュー：プルダウンの作り方
（3）ヘッダー上部のメニュー：cart.twig（カゴの中）に記述
（4）商品検索
（5）ロゴ
（6）カテゴリ
（7）新着情報
（8）フリーエリア
（9）ギャラリー
（10）ショッピングガイド
（11）おすすめ商品
（12）売上ランキング
（13）最近チェックした商品
（14）定休日管理プラグイン
5　商品詳細ページ
（1）商品画像
（2）関連商品

■app/template/[テンプレートコード]/Block/pg_calendar.twig
休日は赤丸で表示されるように修正しています。

014

EC-CUBE3デザインテンプレート解説：ブロックについて（13）最近チェックした商品

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

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

デザインテンプレートのインストール

1　プログラムファイルの入れ替え
2　テンプレートのアップロード
3　テンプレート適用後
4　プラグインのインストール
5　TOPページの画像スライド（画像カルーセル）
6　Body背景やヘッダー背景を簡単に変更

カスタマイズ内容

1 スタイルシートの変更
2　EC-CUBE3のデフォルト：サイドカラムにブロックを配置したときのレイアウト
3　本デザインテンプレートを適用：サイドカラムにブロックを配置したときのレイアウト
4　ブロックについて
（1）グローバルメニューのカテゴリ表示
（2）グローバルメニュー：プルダウンの作り方
（3）ヘッダー上部のメニュー：cart.twig（カゴの中）に記述
（4）商品検索
（5）ロゴ
（6）カテゴリ
（7）新着情報
（8）フリーエリア
（9）ギャラリー
（10）ショッピングガイド
（11）おすすめ商品
（12）売上ランキング
（13）最近チェックした商品
（14）定休日管理プラグイン
5　商品詳細ページ
（1）商品画像
（2）関連商品

■app/template/[テンプレートコード]/Block/checkeditem.twig
slick.min.jsを利用し、カルーセルを適用しています。
プラグイン一覧の「設定」で「保存日数」「表示個数」「履歴削除ボタン」が設定できます。

013

EC-CUBE3デザインテンプレート解説：ブロックについて（12）売上ランキング

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

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

デザインテンプレートのインストール

1　プログラムファイルの入れ替え
2　テンプレートのアップロード
3　テンプレート適用後
4　プラグインのインストール
5　TOPページの画像スライド（画像カルーセル）
6　Body背景やヘッダー背景を簡単に変更

カスタマイズ内容

1 スタイルシートの変更
2　EC-CUBE3のデフォルト：サイドカラムにブロックを配置したときのレイアウト
3　本デザインテンプレートを適用：サイドカラムにブロックを配置したときのレイアウト
4　ブロックについて
（1）グローバルメニューのカテゴリ表示
（2）グローバルメニュー：プルダウンの作り方
（3）ヘッダー上部のメニュー：cart.twig（カゴの中）に記述
（4）商品検索
（5）ロゴ
（6）カテゴリ
（7）新着情報
（8）フリーエリア
（9）ギャラリー
（10）ショッピングガイド
（11）おすすめ商品
（12）売上ランキング
（13）最近チェックした商品
（14）定休日管理プラグイン
5　商品詳細ページ
（1）商品画像
（2）関連商品

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

012

EC-CUBE3デザインテンプレート解説：ブロックについて（11）おすすめ商品

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

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

デザインテンプレートのインストール

1　プログラムファイルの入れ替え
2　テンプレートのアップロード
3　テンプレート適用後
4　プラグインのインストール
5　TOPページの画像スライド（画像カルーセル）
6　Body背景やヘッダー背景を簡単に変更

カスタマイズ内容

1 スタイルシートの変更
2　EC-CUBE3のデフォルト：サイドカラムにブロックを配置したときのレイアウト
3　本デザインテンプレートを適用：サイドカラムにブロックを配置したときのレイアウト
4　ブロックについて
（1）グローバルメニューのカテゴリ表示
（2）グローバルメニュー：プルダウンの作り方
（3）ヘッダー上部のメニュー：cart.twig（カゴの中）に記述
（4）商品検索
（5）ロゴ
（6）カテゴリ
（7）新着情報
（8）フリーエリア
（9）ギャラリー
（10）ショッピングガイド
（11）おすすめ商品
（12）売上ランキング
（13）最近チェックした商品
（14）定休日管理プラグイン
5　商品詳細ページ
（1）商品画像
（2）関連商品

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

010

EC-CUBE3デザインテンプレート解説：ブロックについて（10）ショッピングガイド

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

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

デザインテンプレートのインストール

1　プログラムファイルの入れ替え
2　テンプレートのアップロード
3　テンプレート適用後
4　プラグインのインストール
5　TOPページの画像スライド（画像カルーセル）
6　Body背景やヘッダー背景を簡単に変更

カスタマイズ内容

1 スタイルシートの変更
2　EC-CUBE3のデフォルト：サイドカラムにブロックを配置したときのレイアウト
3　本デザインテンプレートを適用：サイドカラムにブロックを配置したときのレイアウト
4　ブロックについて
（1）グローバルメニューのカテゴリ表示
（2）グローバルメニュー：プルダウンの作り方
（3）ヘッダー上部のメニュー：cart.twig（カゴの中）に記述
（4）商品検索
（5）ロゴ
（6）カテゴリ
（7）新着情報
（8）フリーエリア
（9）ギャラリー
（10）ショッピングガイド
（11）おすすめ商品
（12）売上ランキング
（13）最近チェックした商品
（14）定休日管理プラグイン
5　商品詳細ページ
（1）商品画像
（2）関連商品

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

003

004

EC-CUBE3デザインテンプレート解説：ブロックについて（9）ギャラリー

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

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

デザインテンプレートのインストール

1　プログラムファイルの入れ替え
2　テンプレートのアップロード
3　テンプレート適用後
4　プラグインのインストール
5　TOPページの画像スライド（画像カルーセル）
6　Body背景やヘッダー背景を簡単に変更

カスタマイズ内容

1 スタイルシートの変更
2　EC-CUBE3のデフォルト：サイドカラムにブロックを配置したときのレイアウト
3　本デザインテンプレートを適用：サイドカラムにブロックを配置したときのレイアウト
4　ブロックについて
（1）グローバルメニューのカテゴリ表示
（2）グローバルメニュー：プルダウンの作り方
（3）ヘッダー上部のメニュー：cart.twig（カゴの中）に記述
（4）商品検索
（5）ロゴ
（6）カテゴリ
（7）新着情報
（8）フリーエリア
（9）ギャラリー
（10）ショッピングガイド
（11）おすすめ商品
（12）売上ランキング
（13）最近チェックした商品
（14）定休日管理プラグイン
5　商品詳細ページ
（1）商品画像
（2）関連商品

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

009

EC-CUBE3デザインテンプレート解説：ブロックについて（8）フリーエリア

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

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

デザインテンプレートのインストール

1　プログラムファイルの入れ替え
2　テンプレートのアップロード
3　テンプレート適用後
4　プラグインのインストール
5　TOPページの画像スライド（画像カルーセル）
6　Body背景やヘッダー背景を簡単に変更

カスタマイズ内容

1 スタイルシートの変更
2　EC-CUBE3のデフォルト：サイドカラムにブロックを配置したときのレイアウト
3　本デザインテンプレートを適用：サイドカラムにブロックを配置したときのレイアウト
4　ブロックについて
（1）グローバルメニューのカテゴリ表示
（2）グローバルメニュー：プルダウンの作り方
（3）ヘッダー上部のメニュー：cart.twig（カゴの中）に記述
（4）商品検索
（5）ロゴ
（6）カテゴリ
（7）新着情報
（8）フリーエリア
（9）ギャラリー
（10）ショッピングガイド
（11）おすすめ商品
（12）売上ランキング
（13）最近チェックした商品
（14）定休日管理プラグイン
5　商品詳細ページ
（1）商品画像
（2）関連商品

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

col-sm-3

007

↓

008

EC-CUBE3デザインテンプレート解説：ブロックについて（7）新着情報

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

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

デザインテンプレートのインストール

1　プログラムファイルの入れ替え
2　テンプレートのアップロード
3　テンプレート適用後
4　プラグインのインストール
5　TOPページの画像スライド（画像カルーセル）
6　Body背景やヘッダー背景を簡単に変更

カスタマイズ内容

1 スタイルシートの変更
2　EC-CUBE3のデフォルト：サイドカラムにブロックを配置したときのレイアウト
3　本デザインテンプレートを適用：サイドカラムにブロックを配置したときのレイアウト
4　ブロックについて
（1）グローバルメニューのカテゴリ表示
（2）グローバルメニュー：プルダウンの作り方
（3）ヘッダー上部のメニュー：cart.twig（カゴの中）に記述
（4）商品検索
（5）ロゴ
（6）カテゴリ
（7）新着情報
（8）フリーエリア
（9）ギャラリー
（10）ショッピングガイド
（11）おすすめ商品
（12）売上ランキング
（13）最近チェックした商品
（14）定休日管理プラグイン
5　商品詳細ページ
（1）商品画像
（2）関連商品

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

col-sm-9

EC-CUBE3デザインテンプレート解説：ブロックについて（6）カテゴリ

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

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

デザインテンプレートのインストール

1　プログラムファイルの入れ替え
2　テンプレートのアップロード
3　テンプレート適用後
4　プラグインのインストール
5　TOPページの画像スライド（画像カルーセル）
6　Body背景やヘッダー背景を簡単に変更

カスタマイズ内容

1 スタイルシートの変更
2　EC-CUBE3のデフォルト：サイドカラムにブロックを配置したときのレイアウト
3　本デザインテンプレートを適用：サイドカラムにブロックを配置したときのレイアウト
4　ブロックについて
（1）グローバルメニューのカテゴリ表示
（2）グローバルメニュー：プルダウンの作り方
（3）ヘッダー上部のメニュー：cart.twig（カゴの中）に記述
（4）商品検索
（5）ロゴ
（6）カテゴリ
（7）新着情報
（8）フリーエリア
（9）ギャラリー
（10）ショッピングガイド
（11）おすすめ商品
（12）売上ランキング
（13）最近チェックした商品
（14）定休日管理プラグイン
5　商品詳細ページ
（1）商品画像
（2）関連商品

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

006

EC-CUBE3デザインテンプレート解説：ブロックについて（5）ロゴ

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

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

デザインテンプレートのインストール

1　プログラムファイルの入れ替え
2　テンプレートのアップロード
3　テンプレート適用後
4　プラグインのインストール
5　TOPページの画像スライド（画像カルーセル）
6　Body背景やヘッダー背景を簡単に変更

カスタマイズ内容

1 スタイルシートの変更
2　EC-CUBE3のデフォルト：サイドカラムにブロックを配置したときのレイアウト
3　本デザインテンプレートを適用：サイドカラムにブロックを配置したときのレイアウト
4　ブロックについて
（1）グローバルメニューのカテゴリ表示
（2）グローバルメニュー：プルダウンの作り方
（3）ヘッダー上部のメニュー：cart.twig（カゴの中）に記述
（4）商品検索
（5）ロゴ
（6）カテゴリ
（7）新着情報
（8）フリーエリア
（9）ギャラリー
（10）ショッピングガイド
（11）おすすめ商品
（12）売上ランキング
（13）最近チェックした商品
（14）定休日管理プラグイン
5　商品詳細ページ
（1）商品画像
（2）関連商品

■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
③　スマホでは、ロゴが中央に表示されます。