サイド上部バナーの差替方法 - MODE（1）

サイド上部バナーの差替方法（PCおよびスマートフォン）

差替用のバナーを作成し、画像ファイル管理からファイルをアップロードします。サンプルサイトではバナーサイズが横540px×縦250pxになります。
[ショップ作成] → [画像ファイル管理]をクリックすると、画像ファイル管理がポップアップにて表示されます。
作成したバナーを選択し[アップロード]ボタンをクリック。
ファイル確認から作成したバナーをクリックするとプレビュー画像と画像URLが表示されます。プレビュー画像が作成した差替用のバナーである事を確認します。
1～3を繰り返し、差替用のバナーを3つアップロードします。
アップロードが完了しましたら実際に差し替えていきます。まずは【PCの場合に表示されるバナー】からになります。 [ショップ作成] → [デザイン設定] → MODEの[デザイン編集]から共通の[HTML/CSS編集]をクリック

下記を変更します。変更箇所はページ内に1カ所
（ページ内検索にて「サイドバナー上部 - 差替箇所」で探すと便利です。）

変更前：上から上段、中段、下段のバナーになります。

<li class="side_banner_list"><a href=""><img src="//img.shop-pro.jp/tmpl_img/76/side_banner_short.png" alt="上段バナーの説明文" /></a></li>
<li class="side_banner_list"><a href=""><img src="//img.shop-pro.jp/tmpl_img/76/side_banner_short.png" alt="中段バナーの説明文" /></a></li>
<li class="side_banner_list"><a href=""><img src="//img.shop-pro.jp/tmpl_img/76/side_banner_short.png" alt="下段バナーの説明文" /></a></li>

変更後：画像ファイル管理からバナーをクリックします。画像URLが表示されますのでコピーし、差し替えたい箇所へペーストします。

<li class="side_banner_list"><a href="こちらにリンク先URLを記入"><img src="こちらに画像URLをペースト" alt="上段バナーの説明文" /></a></li>
<li class="side_banner_list"><a href="こちらにリンク先URLを記入"><img src="こちらに画像URLをペースト" alt="中段バナーの説明文" /></a></li>
<li class="side_banner_list"><a href="こちらにリンク先URLを記入"><img src="こちらに画像URLをペースト" alt="下段バナーの説明文" /></a></li>

リンク先URL、バナーの説明文もそれぞれ記入します。

変更しましたら、[保存]ボタンをクリック。
つぎは【スマートフォンの場合に表示されるバナー】になります。
[ショップ作成] → [デザイン設定] → MODEの[デザイン編集]からトップの[HTML/CSS編集]をクリック

<li class="side_banner_list col col-sm-4 col-xs-12"><a href=""><img src="//img.shop-pro.jp/tmpl_img/76/side_banner_short.png" alt="上段バナーの説明文" /></a></li>
<li class="side_banner_list col col-sm-4 col-xs-12"><a href=""><img src="//img.shop-pro.jp/tmpl_img/76/side_banner_short.png" alt="中段バナーの説明文" /></a></li>
<li class="side_banner_list col col-sm-4 col-xs-12"><a href=""><img src="//img.shop-pro.jp/tmpl_img/76/side_banner_short.png" alt="下段バナーの説明文" /></a></li>

変更後：5と同様

<li class="side_banner_list col col-sm-4 col-xs-12"><a href="こちらにリンク先URLを記入"><img src="こちらに画像URLをペースト" alt="上段バナーの説明文" /></a></li>
<li class="side_banner_list col col-sm-4 col-xs-12"><a href="こちらにリンク先URLを記入"><img src="こちらに画像URLをペースト" alt="中段バナーの説明文" /></a></li>
<li class="side_banner_list col col-sm-4 col-xs-12"><a href="こちらにリンク先URLを記入"><img src="こちらに画像URLをペースト" alt="下段バナーの説明文" /></a></li>

リンク先URL、バナーの説明文もそれぞれ記入します。