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

バナーをサイドバーに設置する方法
＜目次＞
1 バナー画像を表示させる準備をする・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ 2
1-1 バナー画像を貼りつける
1-2 バナー画像にリンクを張る
1-3 バナー画像のレイアウトを設定する
2 バナー画像の表示設定とレイアウト調整・・・・・・・・・・・・・・・・・・・・・・・・・・・ 6
1/7
1 バナー画像を表示させる準備をする
1-1 バナー画像を貼りつける
■設定作業の前に用意します
・バナー画像
初期設定のテーマを例に挙げます。
テーマの選択＞カスタムテンプレート＞E-ホワイト
テーマの選択＞ベーシックテンプレート(シンプル)＞カラー・ホワイト
テーマによって適切な画像のサイズは変わります。
サイドバーに設置する画像は、
E-ホワイトの場合は 210px（ピクセル）、
カラー・ホワイトの場合は、横の長さを 150px（ピクセル）、にすると、
きれいに配置できます。
・リンク先のページ
バナーをクリックした後に、表示されるページを決め、作成します。
設定のときに、そのページの URL が必要になります。
■画像挿入ボタンをクリックします
① 「内容」の入力欄をクリックし、カーソルを表示させます。
② 画像挿入ボタンをクリックします。
2/7
■登録する画像を選びます
別ウィンドウで「画像挿入画面」が開きます。
① 「画像ファイル」の「参照」をクリックします。
② お持ちのパソコンの画像選択ウィンドウが開きます。
③ 登録したい画像を選びます。
④ 「開く」をクリックします。
⑤ 画像ファイルの保存場所を示す文字列が自動的に入力されます。
■画像ファイルの登録名を入力します
① 選択した画像ファイルが「日本語名のファイル」の場合のみ、Ｅストア
ーショップサーブの管理画面で登録名を入力します。
入力できる文字は、半角英数字です。
「.jpg」「.gif」などの拡張子も含めて入力してください。拡張子は元のフ
ァイルと同じものを入力します。
・日本語は入力できません
・半角英数字であれば、任意の文字列を使えます
② 画像を挿入します。
「挿入する」をクリックすると、管理画面の「サイドバー用フリーエリ
ア」の「内容」の欄に画像が挿入されます。
同時に、画像台帳にも画像が登録されます。
画像台帳は、管理画面の以下メニューから確認できます。
お店運営＞画像台帳
「内容」には、画像の他、テキストも入力できます。
文字の大きさ、色、太さも変えられます。
3/7
1-2 バナー画像にリンクを張る
■リンク作成マークをクリックします
① 画像バナーをクリックし、選択します。
② 「リンク作成マーク」をクリックします。
■リンク先 URL を入力します
① 「アドレス（URL）」にリンク先の URL を入力するために、「商品ペー
ジ URL 挿入」をクリックします。
② 別ウィンドウで登録商品の一覧画面が開きます。
リンクさせたい商品ページの「挿入」をクリックします。
③ 「アドレス（URL）」にリンク先が自動で入力されます。
④ リンク先のページを「別ウィンドウで開く」か「同ウィンドウで開く」
か、選びます。
別ウィンドウと同ウィンドウの違い
・別ウィンドウは、新しいウィンドウが開いて、リンク先へ遷移しま
す。
・同ウィンドウは、既に開いているウィンドウ内で、リンク先へ遷移し
ます。（推奨）
⑤ 「OK」をクリックします。
⑥ リンク設定が設定されました。
4/7
1-3 バナー画像のレイアウトを設定する
■バナー画像を中央に配置します
① バナー画像をクリックし、選択します。
② 「中央揃え」をクリックします。画像が中央に移動します。
中央以外にも、「左寄せ」「右寄せ」もできるので、自由に選べます。
③ 「設定を保存する」をクリックします。
これで、バナーの設置が完了しました。
お店ページに表示させるために、6 ページの「2 バナー画像の表示設定
とレイアウト調整」へ進みましょう。
■HTML タグの編集もできます
5/7
2 バナー画像の表示設定とレイアウト調整
■サイドバーへの表示を設定します
「表示コンテンツ設定」の「サイドバー用フリーエリア 1～5」のところまで移
動します。
① お店ページのサイドバーに表示させたいコンテンツを「表示」に切り
替えます。
② お店ページの左側、右側のどちらに表示させるか選びます。
③ 「↓表示レイアウト設定へ反映」をクリックすると、下の「表示レイアウ
ト設定」に反映します。
表示させる場所の表示イメージ図
カスタムテンプレートでは右サイドバーはありません。
よって、左図の表示レイアウト設定の画像も 3 列ではなく 2 列になります。
6/7
■お店ページを更新します
■お店ページを更新します
① 左メニューの「お店ページを更新する」をクリックします。
② 「編集中のテーマでお店ページを更新する」ボタンをクリックします。
ベーシックテンプレートの場合は「更新を開始する」ボタンが表示され
ているので、そちらをクリックします。
カスタムテンプレートをご利用の場合、デザイン設定の左メニュー「テー
マの選択」から「ヘッダとＳＥＯの設定」までのいずれかで設定を変更する
と、「編集中のテーマでお店ページを更新する」ボタンが表示されます。
編集中のテーマでお店ページを更新する
テンプレートの切り替えやお店ページ全体のデザイン変更など、利用中
のテーマから編集中のテーマに切り替えてお店ページを更新する場合に
利用します。
利用中のテーマでお店ページを更新する
お知らせやフリーエリア、フリーページの更新など、利用中のテーマのま
まお店ページを更新する場合に利用します。
7/7

Download Report