EC-CUBE3.0で用意されているロゴブロックでロゴ画像を使う方法。
ロゴブロックではテキストでショップ名が表示されるようになっていますが、画像に変更する場合、直接ブロックのテンプレートコードを変更する必要があります。方法は以下から。
EC-CUBE3.0のロゴブロックでロゴ画像を使う方法
ロゴブロックにはサイト説明を記述するcopyとロゴを表示する部分に分かれているます。デフォルトではロゴ部分はホームページへのURLとショップ名が表示されようになってます。
ロゴ部分のコードはこんな感じ。
<h1 class="header_logo"><a href="{{ url('homepage') }}">{{ BaseInfo.shop_name }}</a></h1>この {{ BaseInfo.shop_name }} の部分をロゴ画像のimgタグに変えることでテキストから画像に変更可能。その際、imgタグのsrcに入れるパスは以下のどちらかが使えます。
- app.config.root_urlpath: htmlフォルダへのパス
- app.config.front_urlpath: テンプレートフォルダへのパス
ロゴ画像をhtml/uploadフォルダや、user_dataフォルダに入れた場合はapp.config.root_urlpathを、テンプレートのimgフォルダなどに入れた場合はapp.config.front_urlpathを使いましょう。
また、alt属性にはショップ名を入れておきます。テンプレートのコードは以下のようになります。
html/template/default/img/logo.jpgの場合
<h1 class="header_logo">
<a href="{{ url('homepage') }}">
<img src="{{ app.config.front_urlpath }}/img/logo.jpg" alt="ショップ名をここに記述" />
</a>
</h1>html/upload/logo.jpgの場合
<h1 class="header_logo">
<a href="{{ url('homepage') }}">
<img src="{{ app.config.root_urlpath }}/upload/logo.jpg" alt="ショップ名をここに記述" />
</a>
</h1>
