*

ヤフーストア・トップページ用のテンプレートを作ってみた。

この記事は約16分で読むことができます。

ヤフープロフェッショナル出店は、HTMLが理解できて使える人にとっては、ページを作り上げる楽しみがあるんですよね。「ポチポチっとやるだけで出来上がるとつまらない。」そんな人も多いでしょう。でも、逆に「HTMLわからない・・・」という人も多いです。

開店したものの、トップページは真っ白のまま。こんな感じ↓。

トップページテンプレート

これでも開店してるんですよ!商品あるんですよ!」と叫んでみたところで、この状態だと「お店やってないの?」「何にも表示されないけど、、エラー?トラブル?」と思われても仕方ないですよね。

そこで、すぐに使える!しかも、本格的なテンプレートを作ってみました。レイアウトはわりとオーソドックスな感じです。上から、(1)特別ページへの特大バナー、(2)人気ランキング、(3)おすすめ商品です。これくらい載せておけば、少なくとも「閉店?」なんて思われることは無いでしょう。

トップページテンプレート

テンプレートはTABLEでレイアウトした枠だけです。前提として、お店の幅は950pxです。大きいバナーのサイズは710px×250px、商品写真は130px×130pxです。それ以外の場合は、画像の大きさやTABLEの変更をする必要があるのでHTMLがわかる人はどうぞ。フリースペースで使うTABLEの幅は720に設定しています。

それぞれがやるべきは、(1)画像URLの差し替え、(2)リンクの差し替え、(3)テキスト文字の差し替え、です。商品ページを用意したうえご利用ください。文字量は約4000バイトなので、フリースペース1の枠(10000バイトまで)だけで使えます。

ランキング用のアイコンは↓の無料素材集からお借りしました。
http://ec-yobiko.com/2010/03/post-11.html

テンプレートHTML

<table cellspacing=”5″ cellpadding=”0″ width=”720″>
<tbody>
<tr>
<td colspan=”5″><a href=”http://特別ページへ”><img src=”image5.gif” width=”710″ height=”252″ border=”0″></a></td>
</tr>
<tr>
<td height=”5″></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan=”5″><img src=”image4.gif” width=”710″ height=”35″ border=”0″></td>
</tr>
<tr>
<td align=”center”><a href=”http://商品ページへ”><img src=”image20.jpg” width=”130″ height=”130″ border=”0″></a></td>
<td align=”center”><a href=”http://商品ページへ”><img src=”image21.jpg” width=”130″ height=”130″ border=”0″></a></td>
<td align=”center”><a href=”http://商品ページへ”><img src=”image22.jpg” width=”130″ height=”130″ border=”0″></a></td>
<td align=”center”><a href=”http://商品ページへ”><img src=”image23.jpg” width=”130″ height=”130″ border=”0″></a></td>
<td align=”center”><a href=”http://商品ページへ”><img src=”image24.jpg” width=”130″ height=”130″ border=”0″></a></td>
</tr>
<tr>
<td><a href=”http://商品ページへ”><img src=”i_rank_m16.gif” width=”22″ height=”31″ border=”0″ align=”absmiddle” hspace=”3″>商品名A</a></td>
<td><a href=”http://商品ページへ”><img src=”i_rank_m17.gif” width=”22″ height=”31″ border=”0″ align=”absmiddle” hspace=”3″>商品名B</a></td>
<td><a href=”http://商品ページへ”><img src=”i_rank_m18.gif” width=”22″ height=”31″ border=”0″ align=”absmiddle” hspace=”3″>商品名C</a></td>
<td><a href=”http://商品ページへ”><img src=”i_rank_m19.gif” width=”22″ height=”31″ border=”0″ align=”absmiddle” hspace=”3″>商品名D</a></td>
<td><a href=”http://商品ページへ”><img src=”i_rank_m20.gif” width=”22″ height=”31″ border=”0″ align=”absmiddle” hspace=”3″>商品名E</a></td>
</tr>
<tr>
<td height=”5″></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan=”5″><img src=”image3.gif” width=”710″ height=”35″ border=”0″></td>
</tr>
<tr>
<td align=”center”><a href=”http://商品ページへ”><img src=”image10.jpg” width=”125″ height=”130″ border=”0″></a></td>
<td align=”center”><a href=”http://商品ページへ”><img src=”image9.jpg” width=”130″ height=”130″ border=”0″></a></td>
<td align=”center”><a href=”http://商品ページへ”><img src=”image11.jpg” width=”130″ height=”130″ border=”0″></a></td>
<td align=”center”><a href=”http://商品ページへ”><img src=”image16.jpg” width=”130″ height=”130″ border=”0″></a></td>
<td align=”center”><a href=”http://商品ページへ”><img src=”image19.jpg” width=”130″ height=”130″ border=”0″></a></td>
</tr>
<tr>
<td valign=”top”><a href=”http://商品ページへ”>商品名(い)</a><br>
価格:****円(税込み)</td>
<td valign=”top”><a href=”http://商品ページへ”>商品名(ろ)</a><br>
価格:****円(税込み)</td>
<td valign=”top”><a href=”http://商品ページへ”>商品名(は)</a><br>
価格:****円(税込み)</td>
<td valign=”top”><a href=”http://商品ページへ”>商品名(に)</a><br>
価格:****円(税込み)</td>
<td valign=”top”><a href=”http://商品ページへ”>商品名(ほ)</a><br>
価格:****円(税込み)</td>
</tr>
<tr>
<td valign=”top” height=”5″></td>
<td valign=”top”></td>
<td valign=”top”></td>
<td valign=”top”></td>
<td valign=”top”></td>
</tr>
<tr>
<td valign=”top” align=”center”><a href=”http://商品ページへ”><img src=”image13.jpg” width=”130″ height=”130″ border=”0″></a></td>
<td valign=”top” align=”center”><a href=”http://商品ページへ”><img src=”image14.jpg” width=”130″ height=”130″ border=”0″></a></td>
<td valign=”top” align=”center”><a href=”http://商品ページへ”><img src=”image15.jpg” width=”130″ height=”130″ border=”0″></a></td>
<td valign=”top” align=”center”><a href=”http://商品ページへ”><img src=”image17.jpg” width=”130″ height=”130″ border=”0″></a></td>
<td valign=”top” align=”center”><a href=”http://商品ページへ”><img src=”image18.jpg” width=”130″ height=”130″ border=”0″></a></td>
</tr>
<tr>
<td valign=”top”><a href=”http://商品ページへ”>商品名(へ)</a><br>
価格:****円(税込み)</td>
<td valign=”top”><a href=”http://商品ページへ”>商品名(と)</a><br>
価格:****円(税込み)</td>
<td valign=”top”><a href=”http://商品ページへ”>商品名(ち)</a><br>
価格:****円(税込み)</td>
<td valign=”top”><a href=”http://商品ページへ”>商品名(り)</a><br>
価格:****円(税込み)</td>
<td valign=”top”><a href=”http://商品ページへ”>商品名(ぬ)/a><br>
価格:****円(税込み)</td>
</tr>
</tbody>
</table>

下のバーも無料素材です。クリックしてダウンロード可能。
ranking watchout

※関連
ヤフーストア作成講座2016
自社サイト成功事例無料パンフ配布


Adsense

関連記事

yahooトップテンプレート

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

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

記事を読む

オンエアー

「今、店長います。」をON AIR画像を使って表示させる方法

確か、10年近く前の、日経MJ「にぎわう専門通販」という記事で取り上げられていたショップサーブユーザ

記事を読む

ストアープロ

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

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

記事を読む

シンメトリー効果

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

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

記事を読む

CSSでレイアウト

ショップページをCSSでレイアウトするコツ

TABLEに慣れてるるので、レイアウトもついついTABLEを使ってしまいます。でも、そろそろCSSで

記事を読む

オリジナルページ

ショップサーブのテンプレートを使わずにオリジナルページを使う方法

ショップサーブは、オリジナルページを使えるところが、他社と違うところですね。「ショップサーブのテンプ

記事を読む

ショッピングカート

「共同購入(CGI)」役目終える

サイト引越しのときのCGIの断捨離中に共同購入のCGI(共同購入システム3 coopbuy3.cgi

記事を読む

ヤフーショッピング

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

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

記事を読む

生き残り

WEB制作業が生き残る方法はあるのか

今から15年前の2000年あたりでしょうか。HP制作業が一番儲かった時期は。その後、「猫も杓子もホー

記事を読む

体験談

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

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

記事を読む

Adsense

Adsense

最強のメルマガCGI
メルマガCGI、こんなに素晴らしい最強のCGIがあったのを忘れていた・・・

2018年からの傾向なんですが、通販システムを借りているショップサ

事情
一部のネット販売店の実情

最近話したAさんのお話。。。「ネット販売やっています。」というと、

確定申告
2019年確定申告の時期だよ~テキトーな個人的裏(ウラ)話

来ましたか?確定申告のハガキ!1月下旬に来たハガキ、忘れないように

みるみる残高が増える
やれば、銀行口座残高がみるみる増えるヽ(^o^)

銀行口座の残高が増えるって嬉しい! って思いませんか? 思

insta
instagramやるべき店とやるべきではない店(ネット販売)

インスタは一応アカウント持ってますが何年か放置です。当然です。

→もっと見る

PAGE TOP ↑