EC CUBE4のデザインテンプレート編集　～画像パス編～

###　せっかくEC CUBE4なのでデザインを変更したい

早速EC CUBEのデザインテンプレートを編集していきます。
今回のアップデートではとても親切になった、というようなことがどこかに書かれていましたが。

例えば純正で入っている
「CUBE GELATO ICE　彩のジェラート"CUBE"をご堪能ください。」
この部分を編集するにはどうしたら良いでしょう？

管理画面＞コンテンツ管理＞ブロック管理にそれぞれのブロックのコードが入っています。

ここから直接弄れるようになってますね。

でもわざわざ管理画面から編集するのは面倒なので.Twigファイルを直接編集したい！
って人は
/src/Eccube/Resource/template/default/Block/
ここに全部入っていますので編集しちゃいましょう。
使い慣れたエディタの方が編集しやすいですもんね。
ここを直接編集すればすぐに反映されますが階層がかなり深いので面倒といえば面倒ですね。

画像はかなり大きめで作ったほうがよろしいです。
デフォルトのテーマを改造してオリジナルテーマを作る方はiPad版とかそのまま拡大するだけですので解像度を意識したほうが安心かと思います。

ロゴを変更したい

/src/Eccube/Resource/template/default/Block/logo.twig

ってのがありますのでここにロゴ画像でも追加してみたいと思います。

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="ec-headerRole">
    <div class="ec-headerRole__title">
        <div class="ec-headerTitle">
            <div class="ec-headerTitle__title">
                <h1>
                    <a href="{{ url('homepage') }}">
                        {{ BaseInfo.shop_name }}
                    </a>
                </h1>
            </div>
        </div>
    </div>
</div>

↓

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="ec-headerRole">
    <div class="ec-headerRole__title">
        <div class="ec-headerTitle">
            <div class="ec-headerTitle__title">
                <h1>
                    <a href="{{ url('homepage') }}">
                        <img class="site-logo" src="{{ asset('assets/img/logo.png') }}" alt="{{ BaseInfo.shop_name }}">
                    </a>
                </h1>
            </div>
        </div>
    </div>
</div>

このように直します。
後はsite-logoとクラスを割り当てたのでCSSで大きさなどを編集します。
{{ asset('assets/img/logo.png’) }}と書くと自動的に現在選択中のテーマのデフォルトの画像フォルダを見に行きます。
上記の場合は「default」テーマを選択しているので
html/template/default/assets/img
の中を見に行きます。

画像はこれでバンバン貼っていきましょう。
ちなみにCSSの編集は
/html/template/default/assets/css
ここを編集すれば適用されます。

もっと深いところまで調べていきたいのでまた記事にしたいと思います！

Related Posts

EC CUBE

Posted by bistro