*

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

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

幅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

関連記事

境目

自作サイトにするか、CMSを使うかの境目のページ数

10年くらい前までは、ネットショップもその他のウェブサイトもホームページ・ビルダーで自作していました

記事を読む

onlinestore

How to create an online store

「ネットショップってどうやって作るの?」という疑問は、日本に限らず、アメリカ、イギリス、ドイツ、フラ

記事を読む

ブチ切れ

こんなサービスは、もう解約だ

某クレジットカード会社からの利用明細が届いて、ポイントを見ると1000ポイント。「そろそろ何かに交換

記事を読む

ヤフー難しい?

ヤフーショッピング 店舗開設は難しいか?

複数ワードではなく、質問型キーワードでご訪問。 ヤフーショッピングにはトータルで5、6年出店し

記事を読む

baseアプリ

ベイス(base)はネット開業ASPの理想形

ショップサーブでお店を運営しながら、つい、使いにくい点に不満たらたらで、ブログにも「あんな機能とかこ

記事を読む

売れない

ショップサーブは売れない?いいえ。それは違います。

「ショップサーブで出店しても売れないのではないか?」と疑問に思っているあなた。 その質問自体が

記事を読む

アンドロイド

アンドロイドではショッピングサイトを製作しない

スマホしか持っていない人は、ショッピングサイトの仕組みを知らないかも知れないですね。

記事を読む

フォームメールで売上UP

高機能フォームメールを活用して売上アップ

問い合わせのフォームも、使い方によっては受注数のアップにつながるケースがあります。フォームから受注と

記事を読む

検索されてる言葉

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

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

記事を読む

ビジネス

商品と資金があるのでビジネスにしたい

どんな商品があって、どの程度の資金があるのかわかりませんが、おそらく中小企業かと思われます。自社で直

記事を読む

Adsense

Adsense

消費者直送を嫌がるメーカー・消費者直送をすべきメーカー

個人宅への直送を嫌がるメーカーが口をそろえて言うのが「トラブルが嫌

勘違い
かっこいいと思っていたデザインは実は最悪だった

サイト開設時から使っていたブログ(今放置)のレイアウト・デザインですが

おてがる通販
おてがる通販を使いたいが評判やWindows10で使えるのか気になる

「おてがる通販」とは、なつかしいひびきですね。「おてがる通販」はネ

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

はい。もちろんです。 でも、必須ではありません。HTMLの知

クレーマー対処法
クレーマー対処法マニュアルを知るには自らクレーマーになること

いざクレームが発生すると、どうして良いかわからないものです。そこで

→もっと見る

PAGE TOP ↑