EC CUBE3.0 ロゴをカスタマイズ(変更)する方法。画像ファイルの場合

WEB制作、マーケティングに関する情報をお届けします。

EC CUBE3.0 ロゴをカスタマイズ(変更)する方法。画像ファイルの場合

2016.09.08

カテゴリ：WEB制作

タグ：

EC CUBE3.0

EC CUBE3.0のヘッダー部分のロゴを変更する方法を紹介します。
前回はSVGファイルでしたが今回はjpeg等の画像ファイルの場合を紹介します。

インデックス

1.画像ファイルの保存先
2.管理画面からHTML(twig)の修正

1.画像ファイルの保存先

画像ファイルの保存先ですが基本的には各テンプレートフォルダに入れましょう。
html→template→テンプレート名→img→common→svg.html

2.管理画面からHTML(twig)の修正

コンテンツ→ブロック管理→ロゴ→編集で編集画面に入ります。

imgタグをaタグ内に挿入します。
また、この{{ BaseInfo.shop_name }}はショップネームを取り出すタグになりますのでimgタグのalt属性の部分に入れておきましょう。
下記コピペしてファイル名等を書き換えれば表示出来ます。

<img src="{{ app.config.front_urlpath }}/img/common/header_logo.jpg" alt="{{ BaseInfo.shop_name }}">

1	<img src="{{ app.config.front_urlpath }}/img/common/header_logo.jpg" alt="{{ BaseInfo.shop_name }}">

{{ app.config.front_urlpath }}は、app→config→eccube→path.xmlで定義されている階層を読み込むタグです。
画像が読み込めない場合はこの階層の不一致です。
一旦、path.xmlを確認しましょう。
以前紹介した、EC-CUBE3.0のテンプレートカスタマイズの手順。に沿ってテンプレートをカスタマイズしている人は問題なく表示されると思います。