EC-CUBE4の管理画面からメインビジュアルを変更する

メインビジュアルを管理画面から変更する方法です。

管理画面からメインビジュアル画像をアップしよう

管理画面にログインし、コンテンツ管理＞ファイル管理より準備した画像ファイルをアップします。
【main】というフォルダを作成し、その中にファイルをアップしました。

アップしたファイルは上記のように表示されます。
吹き出しが出ている部分のボタンを押すとファイルパスがコピーされます。

メイン画像を適用してみよう

コンテンツ管理＞ページ管理に【TOPページ】が存在しますので、そちらをクリックしてください。

そうするとコードが表示されます。
107～113行目がメイン画像の記述の部分になります。

app/template/default/index.twig

    <div class="ec-sliderRole">
        <div class="main_visual">
            <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc01.jpg') }}"></div>
            <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc02.jpg') }}"></div>
            <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc03.jpg') }}"></div>
        </div>
    </div>

今回は最初の1枚目に出てくる画像を変更します。
※変更する際にはテキストエディターなどでも良いので、しっかりバックアップを取っておくようにしてください。

■修正前
<div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc01.jpg') }}"></div>

■修正後
<div class="item slick-slide"><a href="/products/list"><img alt="EC-CUBE4のDEMO" src="{{ asset('/html/user_data/main/main1.png') }}"></a></div>

画像読み込みの部分を変更し、合わせてaタグの設定で全商品一覧ページへのリンク、altを設定しました。
これを登録して完了です。

TOPページを確認しよう

管理画面での登録が完了した後はTOPページを開いて変更が反映されていることを確認します。

以上でTOPページのメインビジュアル変更は完了です。
※変更後のメインビジュアルのダサさは御愛嬌で・・・。