*

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

公開日: : 最終更新日:2016/04/15 CSSやHTML、CGI, ネットショップの作り方, ヤフーショッピング・作成講座

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

幅950pxでレイアウトを3カラムにした場合、サイドナビ180px、スペース10px(✕2)、右側サイドナビ180pxを除くと、センターエリアは570pxが使える計算になります。

この570pxの中にカテゴリーの画像を横にいくつ配置するかによって、どのような割合で分割するかが変わってきます。

例えば、横に2つのカテゴリーバナーを並べる場合は、真ん中に10pxのスペースを入れるので、570-10=560。2で割ってひとつのカテゴリーの幅は280px。280pxのバナーを必要数用意します。バナーの高さは任意です。150くらいがバランス良いのではないでしょうか。ま、そこはあくまでお好みですね。

ヤフートップ

そして、TABLEの組み方は、次のような感じ。

<table>
<tr><td>バナー1</td><td>スペース10</td><td>ナバー2</td></tr>
<tr><td>バナー1</td><td>スペース10</td><td>ナバー2</td></tr>
</table>

バナー1と2の間に10pxのスペースを入れたい場合は、<tr><td heigtht=”10″ colspan=”3″></tr>を入れておきます。colspanをお忘れなく。

上のTableタグには省略しましたが、「cellspacing=”0″」と、「cellpadding=”0″」「border=”0″」を入れておきます。これでTABLEの枠内や枠間、ボーダーを削除して、計算通りのレイアウトが可能です。

バナー大を配置する場合は、幅570✕150pxなどのを作りカテゴリー欄の上や下に配置します。同じTABLE内に入れても良いし、別のTABLEセットを組んでも問題ありません。
上下のスペースを揃える場合は、同じTABLE内に組み込んだほうがやりやすいです。別にする場合は、透明のGIFファイいる(1px✕1px)を用意して、<img src=”./space.gif” height=”10″><br>などとすれば、TABLEとTABLEの間に10pxのスペースを作ることができます。

Adsense

関連記事

通販アプリ

個人でネット販売を始めるには通販アプリが簡単

そうなんですよね~。今は、スマホやタブレットのアプリで個人通販が始められる時代です。おそらく、通販ア

記事を読む

自作のすすめ

ネットショップ自作のすすめ、も・・・

ネットショップを始める場合、ショップサーブなどの開業サービスを使ってスタートするのが一般的になりまし

記事を読む

yahooトップテンプレート

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

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

記事を読む

写真加工やバナー作成におすすめの無料ソフト

ネットショップでは、写真加工やバナー作成はかなり重要な仕事になっています。写真加工は、一般的にはPh

記事を読む

no image

あらためてネットショップのメリット7つとデメリット

2016年、ネットが普及し始めて20年以上です。ほぼ20年以上ネット販売をしているってのも変な感じも

記事を読む

モバイルフレンドリー

スマホ最適化しないと検索ランクに影響

本来は公開しないことを公開しましたね。Google。 「PCサイトだけじゃだめよ。スマホやタブ

記事を読む

スライダーで賑わい感

紙芝居のように画像が入れ替わるパーツの正体は「スライダー」

ネットショップのヘッダーなどで、同じ場所で写真が自動的に入れ替わるパーツを「スライダー」と言います。

記事を読む

フッター

フッターは「とりあえず」設定で

商品ページで良く見られるエリアは上部なので、下部のフッター部分は、とりあえず必要情報を載せておくだけ

記事を読む

激増2

ネット販売や開業に関する相談が激増中なのはなぜ!?

最近記事に書くことも増えてきた「問い合わせ急増」の件です。やたら多いです。PV(ページビュー)が

記事を読む

生き残り

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

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

記事を読む

Adsense

Adsense

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

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

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

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

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

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

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

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

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

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

→もっと見る

PAGE TOP ↑