*

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

公開日: : 最終更新日: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

関連記事

no image

ヤフーショッピングのページ作りに使える無料ソフト

これ↓ http://asomin.net/htmleditor/ ホームページビルダー

記事を読む

ヤフー掲示板

このアイデアは失敗に終わった

カラーミーの助け合い掲示板は盛況なのに、yahoo! shoppingの出店者用の助け合い(サポート

記事を読む

体験談

ヤフーショッピングに出店してみた体験談。その結果は・・・

ありがちな、興味を引くタイトルですよね~。 もちろん、出店してみたのでアルにその体験談です

記事を読む

トップページ

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

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

記事を読む

ヤフートップ

yahoo! shoppingのトップページはどうやって作るのですか?

無料で、しかも、地方の父ちゃん母ちゃんでも出店できてしまうyahoo! shopping。ライト出店

記事を読む

わからない

ヤフーショップの構築方法がわからない

「ヤフーに出店したけど構築方法がわからない。」という人が激増中です。 出店審査にパスす

記事を読む

フッター

フッターは「とりあえず」設定で

商品ページで良く見られるエリアは上部なので、下部のフッター部分は、とりあえず必要情報を載せておくだけ

記事を読む

ヤフー出店

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

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

記事を読む

テクニック

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

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

記事を読む

絵画像

yahooショッピング商品説明絵に入れたい

同じ検索ワードが日本と中国から!そんなこともあるんですね~ さて、この検索ワードですがユーザー

記事を読む

Adsense

Adsense

消費者直送を嫌がるメーカー・消費者直送をすべきメーカー

個人宅への直送を嫌がるメーカーが口をそろえて言うのが「トラブルが嫌

勘違い
かっこいいと思っていたデザインは実は最悪だった

サイト開設時から使っていたブログ(今放置)のレイアウト・デザインですが

おてがる通販
おてがる通販を使いたいが評判やWindows10で使えるのか気になる

「おてがる通販」とは、なつかしいひびきですね。「おてがる通販」はネ

ストアープロ
ストアークリエーターproを使うにはhtmlの知識が必要か?

はい。もちろんです。 でも、必須ではありません。HTMLの知

クレーマー対処法
クレーマー対処法マニュアルを知るには自らクレーマーになること

いざクレームが発生すると、どうして良いかわからないものです。そこで

→もっと見る

PAGE TOP ↑