*

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

関連記事

SSL

フォームメールCGIを設置しよう

取扱商品が数千点、数万点となってくると、ショップサーブの問い合せフォームでは正直、間に合わないんです

記事を読む

画像検索

商品写真だけの一覧ページを作りたい

店舗内の商品検索は、品名や品番など「テキスト(文字)検索」が基本。 でも、商品数が多いと、テキ

記事を読む

yahooトップテンプレート

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

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

記事を読む

クリスマス特集

クリスマスセール(キャンペーン)の準備や設定方法

もう気分はクリスマスですね。もちろん、店舗運営者の感覚です。でも、世間でも10月あたりからぼちぼちク

記事を読む

no image

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

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

記事を読む

生き残り

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

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

記事を読む

動画埋め込み

yahoo! shoppingの商品ページにyoutube動画を埋め込む方法

結論から申しますと、yahoo! shoppingのトップページや商品ページに、「無料」で動画を埋め

記事を読む

認証キー

EC CUBE プラグイン用の認証キーの場所

納期が迫っているのに、ついついサボってEC CUBEでお遊びです。EC CUBEもバージョン3.0に

記事を読む

originalgoods2

オリジナル商品を作る目的で開店

「オリジナル商品は自由に値段が付けられるし、他で販売もしていないので価格競争にもならないから良い。」

記事を読む

データ以降

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

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

記事を読む

Adsense

Adsense

菓子製造
菓子製造業許可書つきのレンタルキッチン 広島

今回のおもしろキーワードです。キーワードから、検索ユーザーの思

300select-t
ウェブ仕入れ300点までのセレクトショップが簡単開業できる

ネットショップを始める場合、仕入れをどうするか?ということで頭を悩まし

居酒屋
居酒屋開業とネットショップ開業を比較してみた

「居酒屋を始めたい!」という場合2つ方法がありそうです。 (A)

自分で作成
「自分でネットショッピングサイトを作りたい方」へのアドバイス

「ネット販売がしたい。」というのではなく、「ショッピングサイト

FOBとCIF
FOBとCIFの違いはこの説明がわかりやすいんじゃない?

ネットショッピングをしたことがない人はいないと思いますが、その時に出て

→もっと見る

PAGE TOP ↑