*

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

関連記事

データ以降

独自サイトの商品をヤフーショッピングに掲載する方法

独自サイトをどのような形式で構築しているかによってデータ移植作業の時間は変わってきそうです。ショップ

記事を読む

no image

yahoo! shopping出店申込時に注意すべきポイント

とりあえず無料で出店できるヤフーショッピングを選ぶ人も多いと思います。最近、出店に関わったので、忘れ

記事を読む

自作のすすめ

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

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

記事を読む

welcart

ブログでネットショップ構築

wordressのショッピングサイト・プラグイン「welcart」。 WPのサクサク感は心地よ

記事を読む

レンタカーのナンバーは?

一番早いネットショップの作り方

新しいブログに引っ越しして初めてのネットショップの作り方講座。 講座と言っても一言で終わります

記事を読む

イルカのだまし絵

目の錯覚、だまし絵に感心してる場合ではない。

画像引用が面倒なのでアドレスだけですが、「ガラスのボトルに裸の?男女の模様がある」やつです。

記事を読む

VAPE開業

vapeショップ開業するには

これはおもしろい!!! VAPE(ヴァイプ)って初めて見ましたが、要は、電子タバコのことです。

記事を読む

welcart

wordpressのネットショプ用のプラグインwelcartをインストールしてみた結果…

以前から気になっていたワードプレスをネットショップにカスタマイズするプラグイン「welcart」をイ

記事を読む

no image

ショップ運営者のHTMLメール作成について

HTMLメールのメルマガが増えてきているのは周知のところです。その流れでネットショップ運営の現場でも

記事を読む

アパレルショップ向けは

アパレルショップのネットショップを作成するには

アパレルショップと言っても、いろいろですからね。スーツ専門店、シューズ専門店、カジュアル専門

記事を読む

Adsense

Adsense

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

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

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

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

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

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

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

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

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

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

→もっと見る

PAGE TOP ↑