*

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

公開日: : 最終更新日: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! shopping。ライト出店

記事を読む

絵画像

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

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

記事を読む

ストアクリエーターPro

初心者が「ストアクリエーターProが難しい」と感じる3つの理由とその解決策

「ヤフーショッピング・プロフェッショナルで出店したのは良いけど、管理画面であるストアクリエーターPr

記事を読む

わからない

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

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

記事を読む

激増

ヤフーストアどうやって作るの?という人が激増中

2013年から無料化されたヤフーショッピングですが、出店者が激増するのと同時に、「申込だけどお店

記事を読む

トップページ

トップページの編集手順について考え中

ヤフーショッピングにかぎらず、トップページはお店の顔ですから「それなり」に作りこんでおきたいところ。

記事を読む

ヤフー解約

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

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

記事を読む

トップページ

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

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

記事を読む

Adsense

Adsense

初めてのメルカリ
初めてのメルカリショッピングで

ネットショップ運営者とは言え、C業界人ですからね。EC業界のことは広く

ハッシュタグとは
ハッシュダグとは

SNSが盛んになっているにもかかわらず、あまり活用していないのもあって

メルカリ3
メルカリ初心者が学んだ3つのこと

たまに使うメルカリについて学んだことが3つあったので記録しておきます。

商材見っけ
トップセラーで商材見っけ!

仕入れ0.01掛けから7掛けまでの商売をしていると、それ以下の掛け率の

no image
スマホだけでネットショップ運営

「当日は、このメールをプリントしてお持ち下さい。」なんてありますよね。

→もっと見る

PAGE TOP ↑