*

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

関連記事

マネー

知らずに余計に払わされているお金

入会金ってよくわかりませんよね。スポーツジムの会員募集ポスターが貼ってあって、見ると、「入会金150

記事を読む

たたりなし

CMS・・触らぬ神に祟りなし

「触らぬ神に祟(たたり)なし」とは、『かかわり合いさえしなければ、余計な災いを受けることもない。』の

記事を読む

イルカのだまし絵

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

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

記事を読む

クロスセリング

クロスセリング(ついで買い)テクニックを導入する方法

マーケティング用語「クロスセリング」。日本語で言えば「ついで買い」。古くは、ハンバーガーチェーンの「

記事を読む

価格の表示方法

商品毎に価格の表示方法を変えたい

ネットショッピングをしていて色々な価格表示がありますよね。今回遭遇したのは、「衝撃価格」という表示。

記事を読む

テクニック

やられてしまった・・・実店舗雑貨店のずる賢い販売テクニック

「たまにはリアルの「モノ」を見なければ」と思って駅ナカの雑貨店でウロウロしていました。ちょうど赤のボ

記事を読む

大人専用

難しいことはイヤ!簡単にオリジナルロゴを作りたい。

ネットショップをやっていても、ロゴ作成だの写真編集だの、面倒くさくなるんですよね。いちいちソフトを立

記事を読む

LPO

プロとしてLP(ランディングページ)の制作を請け負うなら

「LP作成の仕事を取ったのだが、クライアントは『送信フォームも埋め込んで欲しい』と言う。これは、PH

記事を読む

アンドロイド

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

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

記事を読む

トップページ

トップページの編集手順について考え中

ヤフーショッピングにかぎらず、トップページはお店の顔ですから「それなり」に作りこんでおきたいところ。

記事を読む

Adsense

Adsense

初めてのメルカリ
初めてのメルカリショッピングで

ネットショップ運営者とは言え、C業界人ですからね。EC業界のことは広く

ハッシュタグとは
ハッシュダグとは

SNSが盛んになっているにもかかわらず、あまり活用していないのもあって

メルカリ3
メルカリ初心者が学んだ3つのこと

たまに使うメルカリについて学んだことが3つあったので記録しておきます。

商材見っけ
トップセラーで商材見っけ!

仕入れ0.01掛けから7掛けまでの商売をしていると、それ以下の掛け率の

no image
スマホだけでネットショップ運営

「当日は、このメールをプリントしてお持ち下さい。」なんてありますよね。

→もっと見る

PAGE TOP ↑