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

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

2016.09.08

カテゴリ：WEB制作

タグ：

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

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

インデックス

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

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

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

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

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

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

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

<svg>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#header_logo"></use>
</svg>

<svg>

</svg>

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

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