WEB制作、マーケティングに関する情報をお届けします。ホームページ制作会社、テラのブログ

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

タグ:

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
svgファイルをまとめているファイルの階層

2.シンボルの登録

ファイルを開いてシンボル登録します。
ID名は任意ですが#header_logo等わかりやすく付けておきましょう。
IDを追加して
次にSVGファイルのテキストデータを貼付けます。
SVGのテキスト情報を貼付け
上記でファイルの編集は終了です。

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

コンテンツ→ブロック管理→ロゴ→編集で編集画面に入ります。
twigの変種画面へ
開くとaタグ内にショップの名前を取り出す{{ BaseInfo.shop_name }}というテンプレートタグが有るのでコレを書き換えます。
書き換え前
下記のタグをaタグ内にコピペしてください。 コレでロゴの変更は終了です。