*

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

公開日: : 最終更新日: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 ヘッダーの作成

「ストアデザイン」→「看板」(←ヘッダー画像のこと) 全体の設定で入力したお店ページの幅(9

記事を読む

コンバーター

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

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

記事を読む

テクニック

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

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

記事を読む

ヤフーショッピング

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

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

記事を読む

シンメトリー効果

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

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

記事を読む

ヤフーデザイン

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

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

記事を読む

体験談

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

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

記事を読む

HTML編集

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

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

記事を読む

置換を使って効率的に

フリースペースや商品説明はホームページ・ビルダーで効率的に作る

ヤフーストアのフリースペースや商品説明(PCのみ)のHTML部分は、1、2行なら、そのまま手書きする

記事を読む

マグカップ

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

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

記事を読む

Adsense

Adsense

AIDMAの法則
消費者の購買決定プロセスAIDMAの法則の例

消費者が商品を購入するまでの心理を5つのステップに分けたのがAIDMA

顧客ランクは3つで良い
顧客ランクって3つくらいでいいんじゃないの?

ショップサーブの顧客ランク設定を見て思ったんですが、ランク無し

シェアの逆転
シェアの逆転

今、ネットショップ運営者にとってブラウザと言えば、Chromeが定番じ

タイムマネジメント
今こそ、受験生から副業希望のビジネスマン、OLまでタイムマネジメントを

前回の記事「副業で成功する人はKPIを使っているのかもしれない

KPI
副業で成功する人はKPIを使っているのかもしれない

KPIとは「key performance indicator」の略で

→もっと見る

PAGE TOP ↑