*

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

この記事は約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

関連記事

レディース・アパレル

オッサンが悔しがる「レディース・アパレル」のネット販売

レディース・アパレル業界(通販)って参入が激しく撤退も激しい業界のひとつですね。大手だから成功す

記事を読む

儲かりまっせ

ただで仕入れたモノを5万円で売る。

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

記事を読む

カテゴリー画像

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

とりあえず開店したヤフーショッピングのカテゴリーですが、デフォルト(初期設定)の段階では、ださいテキ

記事を読む

コンバーター

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

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

記事を読む

ルミーズ配布終了

ルミーズ・ショッピングカートCGI配布終了

http://www.remise.jp/news/20141015.htm フリーショッピン

記事を読む

データ以降

独自サイトの商品をヤフーショッピングに掲載する方法

独自サイトをどのような形式で構築しているかによってデータ移植作業の時間は変わってきそうです。ショップ

記事を読む

EC CUBEはバージョン2.13がオススメ

過去にインストールして試してみたCMSは数知れず。Movable Typeに始まり、XOOPS、Dr

記事を読む

検索されてる言葉

ヤフーショッピングで検索されている言葉を知るには?

という検索ワードでの当サイトご来店。 ヤフーショッピングで「腰痛」と検索してみました。すると「

記事を読む

トップページ

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

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

記事を読む

打ち消し線

メーカー小売希望価格や通常価格に打ち消し線を引く(CSS)

打ち消しと言えば<s>だったのですが、今はCSSで書きます。 この画像のよ

記事を読む

Adsense

Adsense

仕入れは楽しい
スーパーデリバリー(SD)・デビュー週数間。やっぱり仕入れは楽しいかも。

ふとした思いつきからネット仕入れのスーパーデリバリーを、審査を

スーパーデリバリー
仕入れ日記。スーパーデリバリー審査通った?落ちた?

ネット販売で小売業をやっていると、販売用の商品はもちろん仕入れ

イージーマイショップ
ネットショップ開業easy my shop(イージーマイショップ)の評価。べた惚れかも

EC業界、日々変化して、なにかと対応に追われる日々を送る店長X

イージーマイショップ
easy my shop(イージーマイショップ)はどうよ?評価は?by現役店長

ネットショップ開業と言えば、ショップサーブをはじめとして、カラ

格安SIM
年収300万円以下なのにオススメ格安SIMを使わないのは、お金にだらしないと言わざるをえないかも。

「お金ない~」って言う人いますよね。年収が少ないのかというと、そうでも

→もっと見る

PAGE TOP ↑