デル株式会社
2006年05月23日

[Blogカスタマイズ] [アフィリエイト]

DLタグで商品一覧を作る


テーブルではなくDLタグをフロートで並べて商品一覧を作ってみた
結構イイ感じです。。

本屋で立ち読みした本(タイトル忘れた><)と下記のサイトを参考にさせていただきました。
「WEB工房きくちゃん」さんの「dlタグでつくるフォトギャラリー

この方ならテーブルで作るより追加、並べ替えなどの作業がとても楽にできます。
ただ、フロートでDLタグを並べるこの方法は、高さをすべて同じにそろえなければ表示が崩れてしまう、という欠点と言うか制約があります。
下の例では画像は幅170px以下で高さ150px以下、タイトルは2行以内、コメントは4行以内で何文字以下などね。

この条件、縦横比が同じ画像を使う分には大して問題では無いです、imgタグ内でwidthとheightの数値を指定すればいいのだから。

問題はアフィリエイトで用意されたリンクコードの「改変不可」で「サイズがばらばら」な画像をどうするか?です。

で、散々悩んだ結果、ddに横長の画像、dtに縦長の画像を入れることで解決させました。。
CSSは
dd img{width: 130px;}
dt img{height: 130px;}
こんな感じでね

詳しくはソースコードとCSSを覗き見してください。。
下の中ではモアイだけが縦長画像です



TROIKA[トロイカ] エル・バンディートレターオープナー(SOTR043)【新生活応援セール】
TROIKA エル・バンディート
レターオープナー
ドイツのトロイカ社製
遊び心溢れるデザインでプレゼントにもオススメの逸品
詳細・価格比較
TROIKA Robber(キーリング) T-809
KEY ROBBER
キーリング 泥棒
ドイツのトロイカ社製
鍵を持って逃げる泥棒がなんともユーモラスなキーホルダー。
詳細・価格比較
新発想!こんなに使いやすかったんだ!!DUENDE TISSUE CASE 'STAND!'
DUENDE(デゥエンデ)
STAND!  ティッシュケース
ちょっと変った縦置きフォルム
省スペースなのでデスク周りやキッチン、洗面所など場所を選びません
詳細・価格比較
スケルトンパタパタクロック【カルス】
スケルトンパタパタクロック ≪カルス≫
メタルなボディーに見やすい文字盤でなかなかの存在感!
レトロでクールなカッコイイ置時計
詳細・価格比較
Flash/シルバー
LEXON(レクソン)
FLASH フラッシュ 電卓
洗練された曲線のデザインフォルムでデスク周りをワンランク上げてくれる一品
詳細・価格比較
New!ビッグモアイ「ティッシュケース」
ビッグモアイ
ティシューケース
友人へのプレゼントや、自宅のインテリアに最高の一品爆笑間違いなしです。
詳細・価格比較



この記事のトラックバックURL
宣伝・無関係な記事からのトラックバックは削除する場合があります。

この記事にコメントする

名前:
URL:
  情報を記憶: 評価: 顔   
 
 
 

Profile
月別アーカイブ