*

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

関連記事

動画風・・・意味なし

クリック率が高くなる仕掛け(動画風)を作ってみた

動画風バナーというか、「これクリックすると動画が再生される」と思ってしまうバナーです。で、ついクリッ

記事を読む

検索されてる言葉

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

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

記事を読む

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

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

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

記事を読む

no image

11月の訪問キーワードトップ10

先月の訪問キーワードのトップ10。 トップは「ネット販売 個人」です。「どのような疑問

記事を読む

ttrinity

オリジナルTシャツをネット販売する方法(T-Shirts Trinity×通販アプリ)

毎年Tシャツを買い換えるのが楽しみですね。「今年来たTシャツは来年は着ない。」「捨てる。」と言う人も

記事を読む

CSV引っ越しは楽しい

ヤフーショップからショップサーブへの引っ越し方法

楽天からカラー・ミーショップ・プロ、カラー・ミーショップ・プロからヤフーストア、ヤフーストアから

記事を読む

カテゴリー画像

ヤフーストアのカテゴリをバナー画像に置き換える方法

とりあえず開店したヤフーショッピングのカテゴリーですが、デフォルト(初期設定)の段階では、ださいテキ

記事を読む

フリーランスの自己ブランディング

超キケン「自己ブランディング」なしのフリーランス起業

その投稿が命取り たまたま周りにフリーランスの人が何人かいます。フリーランスとは、個人で活躍してい

記事を読む

売れてる本の表紙デザイン

売れている本は表紙デザインが秀逸

ショッピングカートを作りたい! APIを使えるようになりたい! マッシュアップサイトを作

記事を読む

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

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

記事を読む

Adsense

Adsense

ニッチジャンルでSEO
ニッチなジャンルで検索結果の1位を狙う方法

「マニアックでニッチなジャンルでSEOを施策し検索結果の1位を狙ってみ

逆境の中で
逆境の中で破壊的改革はできるのか

どんな業界も栄枯盛衰ですね。かなり前から「若者の自動車離れ」というキー

イベントこじつけ
売り上げアップの秘訣の1つは季節のイベントにこじつけたキャンペーン

間もなく3月ですが、3月のビッグイベントは把握して準備されていますか?

常時SSL
がっくりorz…常時SSLを無料で利用できるプラン発見、灯台下暗し

つい2,3日前に、さくらインターネットを使った常時SSLオプションが、

常時SSL化
常時SSL化へ向けてのテスト体験

ホームページビルダーでPC用に作ったサイトが10年経って、レスポンシブ

→もっと見る

PAGE TOP ↑