*

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

ヤフープロフェッショナル出店は、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

関連記事

オリジナルページ

ショップサーブオリジナルページへのカートボタン他

物忘れがひどくなるのは年齢のせい? たま~にHTMLやCGIをいじってページを作るのですが、と

記事を読む

ストアサービス変更

デザイン設定で最初にやっておきたいこと(その1)

「ヤフーショッピングに出店してみた。」ものの、デザインをいじりだすと止まらなくなるのが、もとウェブク

記事を読む

オリジナルページ

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

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

記事を読む

ルミーズ配布終了

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

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

記事を読む

テクニック

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

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

記事を読む

HTML編集

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

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

記事を読む

no image

ショップサーブを予約システムとして転用してみる方法

ショップサーブといえば、物販用のネット販売システムですが、これを予約システムとして使えるのではないか

記事を読む

CSVファイルのカンマを置換

CSVファイルを変な区切り文字に変換する方法

エクセル(今回はOpenOffice)を使えば、任意の区切りでCSVファイルを作れると思ったらできま

記事を読む

ヤフートップ

yahoo! shoppingのトップページはどうやって作るのですか?

無料で、しかも、地方の父ちゃん母ちゃんでも出店できてしまうyahoo! shopping。ライト出店

記事を読む

エクセルCSV変換

もしもドロップシッピングのCSVファイルの列にあるカテゴリーを小分けにする方法

「そんなこと誰が知りたがっているのか!?」というような内容ですが、意外にいるかも? というわけ

記事を読む

Adsense

Adsense

整骨院でハロー効果
整骨院のハロー効果とプラシーボ効果

腰痛で接骨院だか整骨院だかに行ったとき、若いセンセが見てくれて電気治療

タイミング
「ビジネスはタイミングが大事」で失敗した例

商売は「早すぎてもダメ。遅すぎてもダメ。タイミングが大事。」なんて言い

ドロワーメニュー
スマホランディングページに最適なドロワーメニュー

ショップサーブのスマホページにドロワーメニューを取り付けるために大奮闘

儲かりまっせ
ただで仕入れたモノを5万円で売る。

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

読みたくなる
つい読みたくなる、クリックしたくなるタイトルの作り方

捨てメアドの整理をしていたらキャッチコピー系のメルマガが気になってつい

→もっと見る

PAGE TOP ↑