*

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

関連記事

シンメトリー効果

デザインはシンメトリー効果を意識する

シンメトリーとは左右対称や上下左右でつり合っていること。ホームページのレイアウトが崩れていると「この

記事を読む

データ以降

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

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

記事を読む

自分で作成

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

「ネット販売がしたい。」というのではなく、「ショッピングサイトを作りたい。」という方へのアド

記事を読む

トップページ

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

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

記事を読む

no image

初心者は安易にワードプレスを使うな

脆弱性(ぜいじゃくせい)の話です。脆弱性とは、簡単にいえば弱点のこと。その弱点をつかれても、軽い痛み

記事を読む

baseアプリ

ベイス(base)はネット開業ASPの理想形

ショップサーブでお店を運営しながら、つい、使いにくい点に不満たらたらで、ブログにも「あんな機能とかこ

記事を読む

納品書

ショップサーブの納品書のフォントを明朝体に変更する方法

納品書のフォントの初期設定はゴシック体です。「このフォントを変えたい!」と思っている方もいるでしょう

記事を読む

ストアクリエーターPro

初心者が「ストアクリエーターProが難しい」と感じる3つの理由とその解決策

「ヤフーショッピング・プロフェッショナルで出店したのは良いけど、管理画面であるストアクリエーターPr

記事を読む

no image

初頭効果の営業マンを客観的に見ると

心理学で言う初頭効果とは、「初対面以降、第一印象に引きづられる。」ということですね。営業案のSさんが

記事を読む

カートCGI

web shop構築に根強い人気。無料ショッピングカートCGI

Webshopと言えば、昔は、ショッピングカートCGIをよく使っていました。もちろん、今でも使え

記事を読む

Adsense

Adsense

去って欲しい社員
去って欲しいスタッフの条件

ドワンゴ社内に飾られている「去ってほしい社員の条件」 出典:天

何を売っていいかわからない
ネットショップ 商材 何を売っていいか分からない

個人で、副業で、ネットショップを始めたいけど、何を売っていいいかわ

ヤフーデザイン
ヤフーショッピング出店デザインはどうやって作るのか

「無料で簡単に」申し込みができるようになったヤフーショッピングですが、

quocard2
QUOカードや金券を確実に経費にする方法

(www.quocard.com/) quoカードはもちろん

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

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

→もっと見る

PAGE TOP ↑