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

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

EC CUBE3.0のヘッダー部分のロゴを変更する方法を紹介します。
EC CUBE3.0からはSVGファイルがたくさん使われていますので、ロゴのデータがSVGファイルであればjpeg等の画像ファイル等に変換せずにそのままSVGファイルを使いましょう。

SVGファイルの扱い方、symbol IDの登録方法等がわからない場合は下記を見てください。
svgファイルってなに？svgファイルの作成方法と特徴について。
svgデータを外部にまとめてajaxで読み込む方法

1.扱うファイル

SVGファイルのテキストデータをまとめているファイルを開いてsymbol IDを登録します。
html→template→テンプレート名→img→common→svg.html

2.シンボルの登録

ファイルを開いてシンボル登録します。
ID名は任意ですが#header_logo等わかりやすく付けておきましょう。

次にSVGファイルのテキストデータを貼付けます。

上記でファイルの編集は終了です。

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

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

開くとaタグ内にショップの名前を取り出す{{ BaseInfo.shop_name }}というテンプレートタグが有るのでコレを書き換えます。

下記のタグをaタグ内にコピペしてください。

コレでロゴの変更は終了です。