*

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

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

関連記事

コンバーター

楽天・yahoo shopping・ショップサーブコンバーター

コンバーターとは変換器のこと。例えば、「楽天からヤフーに引っ越ししたい」という場合、トラックに荷物を

記事を読む

サイドナビ

yahoo! shopping サイドナビの編集

動画付き解説版できました~ デザイン設定で、「とりあえずお店らしく」と考えた場合、ヘッダー

記事を読む

ヤフー出店

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

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

記事を読む

フッター

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

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

記事を読む

ヘッダー看板

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

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

記事を読む

ヤフーデザイン

ヤフーショッピング出店デザインはどうやって作るのか

「無料で簡単に」申し込みができるようになったヤフーショッピングですが、ページ作りをするには技術が必要

記事を読む

絵画像

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

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

記事を読む

ヤフーショッピング自社サイトに埋め込む

自社サイトにヤフーショッピングを埋め込む方法

いくつか考えられるものを。 1つ目は、自社サイト内に商品ページが既にあって、そのページにヤフー

記事を読む

yahooトップテンプレート

yahoo! shoppingトップページ用HTMLテンプレート

yahooさんが用意してくれてもいいのに、無いのがトップページ用のカテゴリー一覧のテンプレート。無い

記事を読む

ヤフー掲示板

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

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

記事を読む

Adsense

Adsense

ベストセラーから
ベストセラー書籍のタイトルから学ぶ心理学的キャッチコピー

某有名コンサルタントが言うには、モノが売れる理由は「良さそうに見えるか

整骨院でハロー効果
整骨院のハロー効果とプラシーボ効果

腰痛で接骨院だか整骨院だかに行ったとき、若いセンセが見てくれて電気治療

タイミング
「ビジネスはタイミングが大事」で失敗した例

商売は「早すぎてもダメ。遅すぎてもダメ。タイミングが大事。」なんて言い

ドロワーメニュー
スマホランディングページに最適なドロワーメニュー

ショップサーブのスマホページにドロワーメニューを取り付けるために大奮闘

儲かりまっせ
ただで仕入れたモノを5万円で売る。

ITの世界は「ボロ儲けできる」というのが垣間見れるサービスが、ショップ

→もっと見る

PAGE TOP ↑