*

ヤフーストアのカテゴリをバナー画像に置き換える方法

公開日: : 最終更新日:2016/08/11 ヤフーショッピング・作成講座

とりあえず開店したヤフーショッピングのカテゴリーですが、デフォルト(初期設定)の段階では、ださいテキストです。これでも問題はないのですが、できれば、わかりやすい画像リンクにして、利便性を高めたいところです。

初期はこのようにぶさいく。やはり、一目で何のカテゴリかわかるようにしたいですね。

カテゴリー画像化

さて、テキストリンクのカテゴリーを画像に変えるための方法は3ステップです。

1.カテゴリー用の画像を作成

まずは、カテゴリーの画像の作成からです。ちょっと時間がかかりますが、「商品写真」を使って「視認性」を高くした画像を作りましょう。カテゴリーが3つなら作成する画像は3つ、40あるなら40個の作成が必要です。デフォルトではカテゴリーの幅は200pxなので作成時に注意してください。できた画像は「画像管理」から登録しておきます。

カテゴリー画像

2.レイアウト変更

「ストアデザイン」→「サイドナビ」と進みます。下の画像の通りですが、ちょっとわかりにくくなってしまいました。デフォルトの「ストア内商品カテゴリ」というパーツを左へ移動させます。そして、カテゴリー画像を置きたい「フリースペス」を表示させたい位置にヘイアウトの変更を行います。

レイアウト変更

3.タグを挿入して完了

そのまま「デザイン編集」タブをクリックして、「フリースペース」のボタンを押します。するとページ下の方に「HTML」を入力する欄が現れます。そこに、<IMG>タグと<A>タグを使ってカテゴリー一覧を作ります。

フリースペースにタグ

タグの書き方ポイントや画像作成テクニック

カテゴリー画像の並べ方ですが2種類あります。簡単で手抜き?なのは<BR>で改行させるだけです。

<a href=”category1.html”><img src=”category1.jpg”></a><br>
<a href=”category2.html”><img src=”category2.jpg”></a><br>

こんな感じで、画像と画像の間にわずかなスペースができます。

カテゴリー画像

<BR>を使うと改行の高さは調整できないので、調整したい場合は<TABLE>を使います。

<table width=”200″ cellspacing=”0″ cellpadding=”0″ border=”0″>
<tr>
<td>
<a href=”category1.html”><img src=”category1.jpg”></a>
</td>
</tr>
<tr>
<td height=”15″>※注</td>
</tr>
<tr>
<td>
<a href=”category2.html”><img src=”category2.jpg”></a>
</td>
</tr>
</table>

※注の箇所ですが、TDの高さだけを指定しても調整できるたと思いますが、確実にさせてたい場合は、透明画像を作成して<img src=”透明.gif” height=”15″ border=”0″>などと挿入しておくと確実にスペースが取れます。ま、かなり古いやり方ですが。

※関連
ヤフーストア・トップページ用のテンプレートを作ってみた
フリースペースや商品説明はホームページ・ビルダーで効率的に作る




Adsense

関連記事

HTML編集

ヤフーショッピングの画像やHTML編集方法

ヤフーショッピングは、ショッピングモールなので、と言うと語弊

記事を読む

マグカップ

画像検索対策が手薄な店が多いみたい

商品を探すときに画像検索を使う人も多いと思います。でも、その画像検索の結果を見ても、同じような写真ば

記事を読む

ヤフーショッピング出店失敗

ヤフーショッピング出店失敗は3タイプか

何をもって「失敗」とするのか?考えてみると3つくらいありそうです。 1.まったく売れなかった・

記事を読む

ヘッダー看板

ヤフーショップのヘッダー画像HTMLの編集方法

開店申請にパスしたなら、とりあえず商品を登録して行くわけですが、ヘッダーを作ってお店らしくしたい人も

記事を読む

トップページ

yahoo! shoppingレイアウトが3カラムの場合のトップページのHTMLの編集

幅950pxでレイアウトを3カラムにした場合、サイドナビ180px、スペース10px(✕2)、右側サ

記事を読む

シンメトリー効果

デザインはシンメトリー効果を意識する

シンメトリーとは左右対称や上下左右でつり合っていること。ホームページのレイアウトが崩れていると「この

記事を読む

ヤフーショッピング

yahoo! shoppingのページ作りはHP作成の基礎から

「yahoo! shoppingのプロフェッショナルに出店したのはいいけど、一体どうやってページを作

記事を読む

動画埋め込み

yahoo! shoppingの商品ページにyoutube動画を埋め込む方法

結論から申しますと、yahoo! shoppingのトップページや商品ページに、「無料」で動画を埋め

記事を読む

テクニック

やられてしまった・・・実店舗雑貨店のずる賢い販売テクニック

「たまにはリアルの「モノ」を見なければ」と思って駅ナカの雑貨店でウロウロしていました。ちょうど赤のボ

記事を読む

ヤフー出店

ヤフーショッピング出店の傾向と対策

ヤフーストア出店いいと思いますよ。出店無料だし、集客が見込めるし、初めて開店する場所の選択としては正

記事を読む

Adsense

Adsense

菓子製造
菓子製造業許可書つきのレンタルキッチン 広島

今回のおもしろキーワードです。キーワードから、検索ユーザーの思

300select-t
ウェブ仕入れ300点までのセレクトショップが簡単開業できる

ネットショップを始める場合、仕入れをどうするか?ということで頭を悩まし

居酒屋
居酒屋開業とネットショップ開業を比較してみた

「居酒屋を始めたい!」という場合2つ方法がありそうです。 (A)

自分で作成
「自分でネットショッピングサイトを作りたい方」へのアドバイス

「ネット販売がしたい。」というのではなく、「ショッピングサイト

FOBとCIF
FOBとCIFの違いはこの説明がわかりやすいんじゃない?

ネットショッピングをしたことがない人はいないと思いますが、その時に出て

→もっと見る

PAGE TOP ↑