*

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

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

関連記事

ストアープロ

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

はい。もちろんです。 でも、必須ではありません。HTMLの知識がなくてもお店はオープンでき

記事を読む

ヤフー解約

ヤフーショッピング解約の手続き方法

無料化になったのに、「ヤフーストアの契約解除をしたい。」「退店したい」という人や企業も多いようです。

記事を読む

コンバーター

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

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

記事を読む

ヤフー出店

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

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

記事を読む

通販用ホームページ

ネット通販用ホームページの作り方

「通販用のホームページの作り方は?」というご質問。 この業界について、ほとんど知識のない方だと

記事を読む

yahooトップテンプレート

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

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

記事を読む

HTML編集

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

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

記事を読む

ヤフー掲示板

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

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

記事を読む

テクニック

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

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

記事を読む

no image

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

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

記事を読む

Adsense

Adsense

去って欲しい社員
去って欲しいスタッフの条件

ドワンゴ社内に飾られている「去ってほしい社員の条件」 出典:天

何を売っていいかわからない
ネットショップ 商材 何を売っていいか分からない

個人で、副業で、ネットショップを始めたいけど、何を売っていいいかわ

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

「無料で簡単に」申し込みができるようになったヤフーショッピングですが、

quocard2
QUOカードや金券を確実に経費にする方法

(www.quocard.com/) quoカードはもちろん

アパレルショップ向けは
アパレルショップのネットショップを作成するには

アパレルショップと言っても、いろいろですからね。スーツ専門店、

→もっと見る

PAGE TOP ↑