EC-CUBE4 管理・運用マニュアル / 4.3.0 版

ブロック管理の概要

EC-CUBE4にデフォルトで用意されているブロック内の編集や、全く新しいオリジナルのブロックを作成登録する管理機能です。

ブロック管理では、プログラムを埋め込んだ機能ブロックや表示させるだけのブロックなど、自由にブロックを作ることが出来ます。

ブロック一覧

EC-CUBE4のデフォルトで用意されているブロックは下記の15ブロックです。

• トピック
• 商品検索
• 新着情報
• 新着商品
• ロゴ
• ログインナビ(SP)
• ログインナビ(共通)
• ヘッダー(商品検索・ログインナビ・カート)
• フッター
• 新入荷商品特集
• カテゴリナビ(SP)
• カテゴリナビ(PC)
• カテゴリ
• カート
• カレンダー(4.1.1から追加)

フロントページ（トップページ）のどのエリアに各ブロックが表示されれのかを示した画像です。

フロントページのデザインを変更する場合、各ブロックの中を編集しますが、そのブロック編集を行うのが、本項目のブロック管理です。

1.ロゴ画像の準備

ロゴ画像は.svgや.jpgや.pngなどの画像ファイルを用意します。

画像サイズは実際に表示したいサイズで準備します。

※画像サイズが大きいものなどで、レイアウトの編集が必要になるようなサイズとなる場合は、ヘッダーエリアや他のブロックとの配置関係などCSSを調整する必要が出てきますが、この説明では、「imglogo.png」という300px×60pxのpng画像を参考に使用します。

2.ブロックの新規作成

「新規入力」ボタンをクリックしてブロック編集画面を開きます。

新規入力の場合は、項目が全て空欄となっています。

• ブロック名・・・・・・・「画像ロゴ」と入力。※レイアウト編集に表示されるブロック名称。（任意名称）
• ファイル名・・・・・・・「imglogo」と入力。※ブロックTwigのファイル名。（任意名称）
• ブロックデータ・・・・・ブロックデータ。※ロゴ画像の取得パスコードなどを記述します。（下記コード参照。）

「画像ロゴ」ブロックデータ※テキストコピーして内容変更の上ご利用ください。

<div class="ec-headerRole">
    <div class="ec-headerRole__title">
        <div class="ec-headerTitle">
            <div class="ec-headerTitle__title">
                <h1>
                    <a href="{{ url('homepage') }}">
                        <img src="{{ asset('assets/img/common/imglogo.png') }}" alt="{{ BaseInfo.shop_name }}" >
                    </a>
                </h1>
            </div>
        </div>
    </div>
</div>

3.ロゴ画像のアップロード

FTPツールなどでサーバーに画像ファイルをアップロードします。

ここでは、下記「common」フォルダにアップロードします。

/html/template/default/assets/img/common

4.ブロックの差し替え

ブロック管理を開くと、ブロック一覧に新規作成した「画像ブロック」が追加表示されています。

「コンテンツ管理＞レイアウト管理＞トップページ用レイアウト」のレイアウト編集を開くと、 新規作成した「画像ロゴ」ブロックが、「未使用ブロック」欄に追加表示されていますので、headerにレイアウト配置されているデフォルトの「ロゴ」ブロックと、 ブロックを入れ替えて登録します。

フロントページを見るとロゴ部分が画像ロゴに挿し変わりました。
「コンテンツ管理＞レイアウト管理＞下層ページ用レイアウト」も同様にブロックを差し替えます。