
EC CUBE3.0 ロゴをカスタマイズ(変更)する方法。SVGファイルの場合
2016.09.08
カテゴリ:WEB制作
タグ:

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タグ内にコピペしてください。
1 2 3 |
<svg> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#header_logo"></use> </svg> |
コレでロゴの変更は終了です。