診断士の経営視点とSEのシステム技術の両面からIT・システム開発・Web技術+アウトドア情報を提供しています

トップブログでつくるビジネスサイト無料ブログでここまでできるCMSでつくるビジネスサイトウェブ講座&SEOシステム開発個人情報保護Googleでお仕事信州撮っておき情報








スポンサーサイト 

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[--------] スポンサー広告 | |

物販系サイトの作り方 

商品を見せるためのHTMLの書き方のコツ

ポータルサイト支援の流れで物販系サイトのHTMLを書くことになった。物販系もソフト系あるいは論文系と同様に、SEOに有利なHTMLソースの上部にコンテンツの文章を置きたい。ナビゲーションは画面上は左にあっても、ソース上は下に追い込むことになる。これは前に書いたように、ナビの右にマージンを取り、コンテンツをナビの右に float することで実現できる。物販系とは言っても、これで大丈夫 と思ったら、意外にたいへんだった。

論文系は読ませるページ、物販系は商品を見せるページ

物販は商品を見せるページ作りが必要となる。論文は上から下に、論旨に沿って文章を並べればよいが、商品は上から下だけに並ぶとは限らない。


上から下に並んだ配列では、ブラウザを開いたときに上の商品しか見えないことになる。ただでさえ物販系はページ上部にロゴやイメージ画像が配置されるため、画面上で商品を陳列するエリアは狭くならざるを得ない。そこで横に商品を配置しなければならなくなる。横に並べるとなると、テーブルが登場する。

テーブルで横に配置すると更新がたいへん

テーブルで横に配置するHTMLを書くと、通常は
1: <table>
2: <tr><td>商品Aのタイトル</td>
3:    <td>商品Bのタイトル</td></tr>
4: <tr><td>商品Aのコメント</td>
5:    <td>商品Bのコメント</td></tr>
6: <tr><td>商品Aの金額</td>
7:    <td>商品Bの金額</td></tr>
8: </table>
となる。
これでは更新がたいへんだ。
商品Aを商品Cに入れ替えようとすると、1・3・5行を変更しなければならない。このソースは、横2列縦3行だから、移動が少ないが、縦横の項目が増えれば、ソースを行ったり来たりすることになる。たいへんさが想像できるだろうか?

テーブルで横配置するHTMLの工夫

ところが、テーブルを左右に float する div を定義して
1: <div class="contentLeft">
2: <table>
3: <tr><td>商品Aのタイトル</td></tr>
4: <tr><td>商品Aのコメント</td></tr>
5: <tr><td>商品Aの金額</td></tr>
6: </table>
7: </div>
8: <div class="contentRight">
9: <table>
10: <tr><td>商品Bのタイトル</td></tr>
11: <tr><td>商品Bのコメント</td></tr>
12: <tr><td>商品Bの金額</td></tr>
13: </table>
14: </div>
と書くと、
行数は増えるものの、1商品がひとかたまりになり、まとめて変更できるようになる。

これでOK と思いきや、更なる難題が・・・。だが、それは、また、別のはなし



[2005-12-22] ウェブ講座&SEO | TB(0) | CM(1)

なるほど・・・

最近、物販系のお仕事を依頼される事がありましたが、この記事を読んで「なるほど」と思いました。

でも、まだ続きがあるのですね。楽しみです。
[ 編集 ] [2005/12/23 17:05]

コメントの投稿













管理者にだけ表示を許可する

トラックバック

この記事のトラックバックURL
http://wiz2.blog16.fc2.com/tb.php/57-bd8c5bba








トップブログでつくるビジネスサイト無料ブログでここまでできるCMSでつくるビジネスサイトウェブ講座&SEOシステム開発個人情報保護Googleでお仕事信州撮っておき情報
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。