商品一覧ページの上部にカテゴリ専用のヘッダを表示する方法 ＜目次＞ ○ カテゴリ専用ヘッダにイメージ画像や説明文を表示させる準備をする ・・・・・・・ 2 1 設定作業の前に用意するもの 2 カテゴリ専用ヘッダにイメージ画像や説明文を登録します 1/4 カテゴリ専用のヘッダにイメージ画像や説明文を表示させる準備をする 1 設定作業の前に用意するもの ■カテゴリ専用のイメージ画像や説明文を用意します 「カテゴリ専用ヘッダ」は、左サイドバーの商品カテゴリをクリックした後に 移動する「商品一覧ページ」上部に表示されます。 ・ イメージ画像 初期設定のテーマを例に挙げます。 テーマの選択＞ベーシックテンプレート(シンプル)＞カラー・ホワイト テーマの選択＞カスタムテンプレート＞E-ホワイト テーマによって適切な画像のサイズは変わります。 画像は、カラー・ホワイトの場合は横のサイズを 670px（ピクセル）、 E-ホワイトの場合は 720px（ピクセル）で作成すると、ぴったりのサイズ になります。 それ以外のサイズの場合、修正またはスタイルシートの編集が必要に なります。 用意した背景画像を加工する場合、加工する方法について他のページ で詳しくご案内しています。 ＞＞「245」で検索 ・ 説明文 商品一覧に表示する商品やブランドなどの説明文も用意します。 2 カテゴリ専用ヘッダにイメージ画像や説明文を登録します ■カテゴリ専用ヘッダを表示するカテゴリを選びます ①カテゴリ専用ヘッダを表示するカテゴリをクリックします。 ②カテゴリを選択した状態で、「編集」をクリックします。 2/4 ■「カテゴリ専用ヘッダ」の欄まで移動します 「カテゴリ編集」画面が開きます。 ページ中央にある「カテゴリ専用ヘッダ」の「画像挿入」をクリックします。 ■登録する画像を選びます 別ウィンドウで「画像挿入画面」が開きます。 ① 「画像ファイル」の「参照」をクリックします。 ② お持ちのパソコンの画像選択ウィンドウが開きます。 ③ 登録したい画像を選びます。 ④ 「開く」をクリックします。 ⑤ 画像ファイルの保存場所を示す文字列が自動的に入力されます。 3/4 ■画像ファイルの登録名を入力します ① 選択した画像ファイルが「日本語名のファイル」の場合のみ、Ｅストア ーショップサーブの管理画面で登録名を入力します。 入力できる文字は、半角英数字です。 「.jpg」「.gif」などの拡張子も含めて入力してください。拡張子は元のフ ァイルと同じものを入力します。 ・日本語は入力できません ・半角英数字であれば、任意の文字列を使えます ② 画像を挿入します。 「挿入する」をクリックすると、③のように、管理画面の「カテゴリ専用 ヘッダ」の欄に HTML タグが挿入されます。 同時に、画像台帳にも画像が登録されます。 画像台帳は、管理画面の以下メニューから確認できます。 「お店運営」 ＞ 「画像台帳」 画像の他、カテゴリの説明文も入力できます。 改行する場合は、<br>タグを追加してください。 ④ ページ下部にある「カテゴリを保存する」をクリックします。 Ｅストアーモバイル（有料）をご利用の場合、携帯サイトやスマートフ ォンサイトも、カテゴリ専用のヘッダをそれぞれ表示できます。 管理画面の「携帯用（オプション）」「スマートフォン用（オプション）」の 欄に同じ手順で画像を挿入してください。 ⑤ 「設定を保存」をクリックします。 ⑥ 「設定を保存をクリックします。 ●HTML タグを編集して、リンク設定もできます カテゴリ専用ヘッダの欄は、HTML 編集ができるので、画像を表示する以外に、文字の表示、リンク設定ができます。 下の HTML タグの太字部分をお店の情報に合わせて変更し、「カテゴリ専用ヘッダ」の欄に入力します。 ・画像にリンクを張る場合の HTML タグ <a href="リンク先の URL"><img src="/pic-labo/画像ファイルの登録名" alt="代替テキスト"></a> ・文字にリンクを張る場合の HTML タグ <a href="リンク先の URL">文字</a> ・リンク先の URL → 画像や文字をクリックした後に表示させたいページの URL です。 リンク先の URL は、管理画面の以下メニューから確認できます。 サーバー ＞ URL 一覧 ・画像ファイルの登録名、代替テキスト → 画像台帳に登録したときの情報です。 表示する画像の画像台帳は、管理画面の以下メニューから確認できます。 お店運営 ＞ 画像台帳 ・文字 → 見出しとなる言葉を自由に入力してください。 知っておくと便利なＨＴＭＬタグについて、他のページで詳しくご案内しています。 ＞＞「240」で検索 4/4
© Copyright 2024 Paperzz
