*

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

関連記事

レンタルキッチンで焼き菓子

レンタルキッチンで菓子製造してネット販売は合法か

人の口に入るモノ販売する場合は、ほぼ例外なく許可が必要です。命に関わりますからね。最近多いの

記事を読む

女性自信を持って

女性はもっと自信を持ってみては?

総合職(管理職など出世あり、転勤もありうるコース)とか一般職(出世はないけど転勤などはない)とか、大

記事を読む

サーバーエラー

CSV編集CGIがない

放置気味の自作サイトのCSVファイルをウェブ上で編集するためのCGIを探してみたところ、意外にないん

記事を読む

カウントダウン

時限(カウントダウン)タイマーを設置したい

楽天でショッピング中に見かけた、この100分の1秒単位でカウントダウン(キッチンタイマー?)

記事を読む

モバイルフレンドリー化への道は近い?

モバイルフレンドリーとは、簡単に言えば「スマホで見やすいページ」のことです。 ブログ以外のペー

記事を読む

バリエーション

自作ページにバリエーションを設置した

「ショップサーブに自作ページを作ってカートは設置したが、バリエーションの選択肢がないので動作しない。

記事を読む

slider

商品を横スクロールするのはjQueryやCSSによるSLIDER

楽天の「今月の売れ筋ジャンルランキング」などの箇所にある、右矢印をポチっとやると、横に商品一覧がスク

記事を読む

トップページ用テンプレート

ヤフーストア・トップページ用のテンプレートを作ってみた。

ヤフープロフェッショナル出店は、HTMLが理解できて使える人にとっては、ページを作り上げる楽しみがあ

記事を読む

あなたの知らない世界

使わなければ一生知ることのない世界

時速制限のないことで有名なドイツのアウトバーン。そこを日本車(GT-R/日産)で300km以上のスピ

記事を読む

フッター

フッターは「とりあえず」設定で

商品ページで良く見られるエリアは上部なので、下部のフッター部分は、とりあえず必要情報を載せておくだけ

記事を読む

Adsense

Adsense

ショートカット
企業の通販部門は急がば回らない。その道のプロを頼ってショートカットを。

趣味で習い事をしている人も多いと思いますが、何かを始めるときに「その道

ネットマーケティング
実店舗ビジネスもホームページにFBにInstaにとネットマーケティング全開

「美容室を開業した。ホームページを作った。」 以前は、実店舗のホ

儲かるネットビジネス
儲かるネットビジネス見っけ

儲かる(たぶん)ビジネス見っけました。 それは、ずばりフォー

セレクトショップ開業
リアル(実店舗)のセレクトショップ開業方法について

リアルのビジネスを始めようと思ったとき、誰もが、まずはネットで情報

検索キーワードは検索ユーザーとの対話
検索キーワードはユーザーとの対話

GAのオーガニック検索のキーワードの取得がほとんどできなくなって久しい

→もっと見る

PAGE TOP ↑