*

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

関連記事

学んだこと

レスポンシブ・デザインへの移行に際し学んだこと(その2)

もうやり始めると止まらない(><)。HTML5とCSS3?レスポンシブWEBデザインをち

記事を読む

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

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

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

記事を読む

欠品率

27万点の中からドル箱アイテムを探そう

トップセラー(Top Seller)の商品数が27万点を突破したそうです。27万円はわかりますが、2

記事を読む

自作ショップ常識

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

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

記事を読む

jQuery外部ファイル

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

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

記事を読む

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

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

記事を読む

ポイントは誰のもの?

ヤフーショッピングのポイント負担、ポイント支払いなどについて

ヤフーショッピングに出店すると、店舗側の意思に関係なく、購入者にはTポイントを差し上げる必要がありま

記事を読む

ヤフーショッピング

yahoo! shoppingのページ作りはHP作成の基礎から

「yahoo! shoppingのプロフェッショナルに出店したのはいいけど、一体どうやってページを作

記事を読む

検索されてる言葉

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

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

記事を読む

レスポンシブ・ウェブ・サイト

レスポンシブ・ウェブ・サイトの仕組み

もっともレスポンシブ・サイトを作りやすいのは、コンテンツがデータベースに記録されているケースですね。

記事を読む

Adsense

Adsense

閉店
あまりに残念な売上げ・・・閉店か移転かプラン変更か

ショップサーブのライトコースで出店しているお店さんの生々しい台所事情。

フォローメール
フォローメールはスマホで読まれることが多いことを考えると

楽天で買い物したお店からフォローメールが届きました。スマホで読んだ

オーディオルーム
起業ネタ レンタル(高級)オーディオルーム

CDが売れなくなったのは、音楽配信などの影響が大きいと思いますが、

amazon
アマゾン・マーケットプレイスの特定商取引法について

そういえば、1年くらい前でしょうか。マーケットプレイスの出品者に特

屋号に堂
屋号に「商店」や「堂」も古かっこいいかも

屋号の決め方ページにランディングのキーワード「堂」。 メジャーな

→もっと見る

PAGE TOP ↑