バナーをセンターエリアに設置する方法

センター用フリーエリアに設置する手順をご案内します。

バナー画像の最適なサイズは、右図を参考にしてください。
また、トップページのレイアウトやテーマによって最適なサイズが異なります。
＞＞詳しくは、オンラインサポートで検索「198」

このマニュアルでは、「E-ホワイト 」のテーマを使い、以下の表示方法を例にご案内します。

• 大きいバナーを１つ中央に表示させる方法
• 小さいバナーを２つ並べて表示させる方法
  

このマニュアルでは、以下のページへのリンク設置方法をご案内します。

• 商品ページ
  
• 商品一覧ページ
  
• フリーページ

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

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

1. 「ファイル名」は、拡張子を含めた半角英数で入力します。
   選択した画像ファイルが「日本語のファイル名」の場合などに利用します。
   

   
   選択した画像ファイル名が半角英数の場合は入力不要です
   
   ＜例＞
   バナー画像.jpg ・・・ファイル名が日本語のため画像挿入できません。
   banner.jpg　　・・・画像挿入できます。
   
   

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

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

1. バナー画像をクリックします。
2. 「中央寄せ」をクリックします。
3. 「設定を保存する」をクリックします。

これで、バナーの設置は完了です。
次に、「3 バナー画像にリンクを張る」に進みます。

この作業をする前に、バナー画像を「画像台帳」に登録します。
画像台帳の利用方法については、他のページでご案内しています。
＞＞詳しくは、オンラインサポートで検索「058」

1. 下のＨＴＭＬタグを「内容」にペーストします。
   ”ドメイン”と”画像のファイル名”は情報を置き換えます。

   <img src="https://ドメイン/pic-labo/画像のファイル名（左側）" style="float: left; margin: 10px 5px 10px 0px;" />
   <img src="https://ドメイン/pic-labo/画像のファイル名（右側）" style="float: left; margin: 10px 0px 10px 5px;" />
   <div style="clear: both;"></div>

   
   画像のＵＲＬは、管理画面メニュー「 お店運営 ＞ 画像管理 ＞ 画像台帳 」の登録画像一覧の「プレビュー」から確認できます。

2. 「設定を保存する」をクリックします。

1. バナー画像をクリックします。
2. 「リンク作成（鎖のアイコン）」をクリックします。

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

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

5. 「OK」をクリックします。
6. リンク設定は完了です。
7. 「設定を保存する」をクリックします。

1. 画像バナーをクリックします。
2. 「リンク作成（鎖のアイコン）」をクリックします。

1. 「アドレス（URL）」にリンク先のＵＲＬを入力します。

   
   「商品一覧ページ」「フリーページ」のＵＲＬは管理画面から
   確認できます。
   管理画面メニュー「サーバー ＞ URL一覧」

   
2. リンク先の表示方法を選択します。

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

3. 「OK」をクリックします。
4. 「設定を保存する」をクリックします。

これで、バナーのリンク作成は完了です。
次に、お店ページに表示させるために、「4 バナー画像の表示設定とレイアウトを調整する」へ進みます。

1. お店ページに反映させたいコンテンツを「表示」にします。
2. 「表示箇所」の「センター」にチェックが入っていることを確認します。
3. 「↓表示レイアウト設定へ反映」をクリックします。

1. 追加したコンテンツを選択します。
2. 「上へ」「下へ」をクリックして配置を決めます。
3. 「設定を保存する」をクリックします。

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

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

カスタムテンプレートをご利用の場合、編集した項目によって更新ボタンが２つ表示されます。

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

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

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

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