バナーをサイドバーに設置する方法

1 バナー画像を設置する準備を行う

サイドバー用フリーエリアに設置する手順をご案内します。

1-1 バナー画像を設置する

■設置作業の前に用意します


1、バナー画像を用意する
バナー画像の最適な横幅は以下の通りです。
  • カスタムテンプレート
    横幅:200px~240px
    テーマによって異なります。
    >>詳しくは、オンラインサポート「198」で検索

  • ベーシックテンプレート
    横幅:150px
2、リンク先のページを用意する

■「画像挿入」をクリックします

  1. 「内容」の入力欄をクリックし、カーソルを表示させます。
  2. 「画像挿入(額縁のアイコン)」をクリックします。
    画像挿入画面のポップアップウィンドウが開きます。

■画像を選択します

  1. 「ファイルを選択」をクリックします。
  2. 画像ファイルを選択するダイアログボックスが開きます。
  3. あらかじめ用意したバナー画像を選びます。
  4. 「開く」をクリックします。
  5. 選択した画像のファイル名が反映されていることを確認します。

■画像を挿入します

  1. ファイル名
    画像のファイル名が「日本語」の場合は、「ファイル名」に半角英数字を入力し変更してください。
    この時、元のファイルと同じ拡張子の入力が必要です。


    選択した画像のファイル名が半角英数字の場合は、「ファイル名」は空欄で構いません。

    <例>
    バナー画像.jpg ・・・画像挿入できません。
    banner.jpg   ・・・画像挿入できます。


    「代替テキスト」に入力された文章は、HTMLのaltタグに反映されます。

  2. 「挿入する」をクリックします。
    フリーエリアに画像が挿入され、画像台帳にも画像が登録されます。


    フリーエリアの「内容」には、画像の他、テキストも入力できます。
    文字の大きさ、色、太さも変えられます。

1-2 バナー画像にリンクを張る


■「リンク作成」をクリックします

  1. 画像バナーをクリックし、選択します。
  2. 「リンク作成(鎖のアイコン)」をクリックします。

■リンク先URLを入力します

ここでは、商品ページへのリンク挿入を説明します。
  1. 「商品ページURL挿入」をクリックします。
    あらかじめURLを把握している場合や、商品ページ以外のページにリンクを張る場合は、「アドレス(URL)」枠にURLをペーストしてください。
  2. 商品一覧のポップアップウィンドウから、リンクさせたい商品の「挿入」をクリックします。
  3. 「アドレス(URL)」にURLが挿入されます。
  4. リンク先の表示方法を選択します。


    別ウィンドウ:新しいウィンドウ(タブ)が開き、リンク先ページへ遷移します。
    同ウィンドウ:今見ているウィンドウで、リンク先ページへ遷移します。

  5. 「OK」をクリックします。
  6. リンクが設定されました。

1-3 バナー画像のレイアウトを設定する


■バナー画像を中央に配置します

  1. バナー画像をクリックします。
  2. 「中央寄せ」をクリックします。
  3. 「設定を保存する」をクリックします。
これで、バナーの設置が完了しました。
お店ページに反映させるには、「2 バナー画像の表示設定とレイアウト調整」へ進みます。


HTMLタグの編集もできます。

2 バナー画像の表示設定とレイアウト調整

■サイドバーへの表示を設定します

「表示コンテンツ設定」の「サイドバー用フリーエリア1~5」を確認します。
  1. お店ページに反映させたいコンテンツを「表示」にします。
  2. 左右どちらに表示させるか指定します。
  3. 「↓表示レイアウト設定へ反映」をクリックします。
  4. 追加したコンテンツを選択します。
  5. 「上へ」「下へ」をクリックして配置を決めます。
  6. 「設定を保存する」をクリックします。

表示させる場所の表示イメージ図


カスタムテンプレートは右サイドバーがありません。



■お店ページを更新します

  1. 管理画面の左上「お店ページの更新へ」をクリックします。
  2. 「注意事項に同意する」にチェックを入れます。
  3. 「編集中のテーマでお店を更新」をクリックします。
  4. 更新が完了したら、お店ページを確認します。


ベーシックテンプレートをご利用の場合は「更新を開始」をクリックします。


カスタムテンプレートをご利用の場合、デザイン設定の左メニュー「テーマの選択」から「ヘッダとSEOの設定」までは、画面下部の「編集中のテーマでお店を更新」で、お店ページに反映します。

編集中のテーマでお店を更新
テンプレートの切り替えや、HTMLやCSSのカスタマイズしたデザイン設定をお店ページに反映する時に利用します。「利用中のテーマ」から「編集中のテーマ」に切り替えて更新するため、注意事項に同意してから更新する必要があります。

利用中のテーマでお店を更新
トップページのお知らせの更新、フリーエリア、サイドバーの表示、商品カテゴリ表示などの反映ができます。また、お店運営中にカスタマイズしている「編集中のテーマ」があっても「利用中のテーマ」のまま、お店ページの更新をする際に利用します。


お店ページを更新しても反映されない場合の対処方法

  • キーボードの「Ctrl」+「F5」キーを押して最新の状態を読み込みましょう。
  • 画面上部の「利用中のテーマでお店を更新」をクリックしていないか、ボタンの下に表示される「最終更新日時」で確認してみましょう。