*

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

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

関連記事

ショッピングカート

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

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

記事を読む

ポデローサを知らなかった

EC CUBEがFTPでうまくアップロードできないときは「Poderosa」を使おう

EC CUBEをzipファイルでダウンロードして解凍。2000個以上のファイル群です。FFFTPでア

記事を読む

自分で作成

「自分でネットショッピングサイトを作りたい方」へのアドバイス

「ネット販売がしたい。」というのではなく、「ショッピングサイトを作りたい。」という方へのアド

記事を読む

カウントダウン

繁盛感の演出~注文が入りました!自動スクロール~

楽天ショップなどでよく見かける「注文が入りました!」逆スクロールをショップサーブに導入しよう!企画?

記事を読む

jQuery外部ファイル

外部HTMLファイルをjQueryで読み込んでも表示してくれない2つの原因

古い「.html」を変更するときに悩むのが、全ページ共通部分のヘッダーやナビ、フッターなどで

記事を読む

自作ショップ常識

自作ショップ構築ファイル構成の考え方

自作構築をする場合、知らないと後で「トンデモない事態」を引き起こしかねないががファイルの構成。(商品

記事を読む

ケントウェブ

WEB MART(KentWeb) を設置してみた

KENT WEBさんを久々に見ると、カートCGIがちょいとバージョンアップしていたので、おもしろそう

記事を読む

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

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

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

記事を読む

ヤフーショッピング自社サイトに埋め込む

自社サイトにヤフーショッピングを埋め込む方法

いくつか考えられるものを。 1つ目は、自社サイト内に商品ページが既にあって、そのページにヤフー

記事を読む

ヤフー掲示板

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

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

記事を読む

Adsense

Adsense

ECサイト運営者の思い込み
ECサイト運営者の間違った思い込み。。

「コンテンツマーケティング」と言う言葉もすっかり馴染みましたが、その重

メディアEC
ネットショップの基本「メディアEC」

ここ数年、コンテンツマーケティングとかメディアECという言葉が取り

no image
「フレーミング効果」の事例や活用方法

ネット販売をするなかで、◯◯の法則だの、△△効果など、よく使います。キ

常時SSL
常時SSL化(https://)進めていますか?

ショップサーブのクライアントさんは少なめですが、すでに関わっていな

ネットショップは電話対応しない
「ネットショップは電話対応しないのが基本」の法則

ネットショップが電話を受け付けない3つの理由といった定番記事があります

→もっと見る

PAGE TOP ↑