サイドバーバナーの差替方法
ご注意：こちらの設定方法は上級者モードでのご案内になります。初心者モードをご利用中の場合は、上級者モードへの切替をお願いいたします。【切替方法はこちら】
SHELF（有料版）ではサイトへサイドバーバナーを設置する事ができます。（サンプルサイトではサイドメニュー下のバナー2本）
ここではサイドバーバナーの差替方法を解説します。
-
初めにバナーを設定します。
サイドバーバナーを作成し、画像ファイル管理からファイルをアップロードします。サンプルサイトではバナーサイズが横270px×縦270pxになります。
[ショップ作成] → [画像ファイル管理]をクリックすると、画像ファイル管理がポップアップにて表示されます。 - 作成したバナーを選択し[アップロード]ボタンをクリック。
-
ファイル確認から作成したバナーをクリックするとプレビュー画像と画像URLが表示されます。プレビュー画像が作成した差替用のバナーである事を確認します。
画像URLを全選択しコピーしておきます。 - [ショップ作成] → [デザイン設定] → 利用中のテンプレートの[デザイン編集]から共通の[HTML/CSS編集]をクリックします。
-
下記を変更します。変更箇所はページ内に1カ所
（ページ内検索にて「サイドバーバナー - 差替箇所」で探すと便利です。）
変更前：<div class="section__block banner-sidebar__section"> <ul> <li> <a href=""> <img src="//img.shop-pro.jp/tmpl_img/80/img_sidebar_bnr.png" alt="" /> </a> </li> <li> <a href=""> <img src="//img.shop-pro.jp/tmpl_img/80/img_sidebar_bnr.png" alt="" /> </a> </li> </ul> </div>変更後：こちらに先程コピーした画像URLををペーストし、リンクURL・代替テキストを記入します。<div class="section__block banner-sidebar__section"> <ul> <li> <a href="リンク先URL"> <img src="こちらに画像URLを記入" alt="代替テキスト" /> </a> </li> <li> <a href="リンク先URL"> <img src="こちらに画像URLを記入" alt="代替テキスト" /> </a> </li> </ul> </div> - 変更しましたら、[更新]ボタンをクリック。
- サイトにアクセスして変更が反映されている事を確認します。
