G-Toolsのデザイン的な問題点と対策について

前回に引き続き、今回はG-Toolsの問題点について、ご紹介します。

Amazletと比較して、G-Toolsの最も大きな特色はTableタグで段組を作っていることです。

実は、そこに大きな問題がありました。

G-toolsでは、商品タイトルの長さが長くなると、全体のtableの幅も広くなり、それに応じて、段組を作る二つのtdブロックの幅も大きくなります。

このtdタグは幅(width値)が指定されていません。画像の大きさに応じて自動調整するためだと思います。

table幅が広がっていくと、二つのtdブロックの幅の比は1:1になってしまいます。すると、左画像と右ブロックの距離が、大きく開いてしまいます。

スポンサーリンク

商品タイトル短い

マネジメント – 基本と原則 [エッセンシャル版]
マネジメント - 基本と原則  [エッセンシャル版] P・F. ドラッカー 上田 惇生

ダイヤモンド社 2001-12-14
売り上げランキング : 15

おすすめ平均 star
star力強い文体、強い確信
starドラッカーによる組織マネジメントの基本理論書
star経営理論の古典

Amazonで詳しく見る by G-Tools

商品タイトル長い

プロフェッショナルの条件―いかに成果をあげ、成長するか (はじめて読むドラッカー (自己実現編))
プロフェッショナルの条件―いかに成果をあげ、成長するか (はじめて読むドラッカー (自己実現編)) P・F. ドラッカー Peter F. Drucker 上田 惇生

ダイヤモンド社 2000-07
売り上げランキング : 155

おすすめ平均 star
star知識労働者が仕事で成功する方法
starビジネス書を読みあさる前にまず読むべきでした。
star「自分で考える」ことの重要性

Amazonで詳しく見る by G-Tools

当ブログでは、コンテンツ部の横幅約500pxぐらいで固定されているため、そんなに目立ちませんが、上の二つを比較すると、商品タイトルが長い方が、左画像と右ブロックが離れてしまっています。

リキッドデザイン(ブラウザ表示範囲に応じて幅が可変)や、もっと横幅の広いブログでは、もっと離れてしまいます。

この問題を防止するには、タイトル部と段組部を別々のtableで組んで、お互いに干渉しないようにすればOKです。

プロフェッショナルの条件―いかに成果をあげ、成長するか (はじめて読むドラッカー (自己実現編))

P・F. ドラッカー ダイヤモンド社 2000-07
売り上げランキング : 155

おすすめ平均 starAve
star1知識労働者が仕事で成功する方法
star2ビジネス書を読みあさる前にまず読むべきでした。
star3「自分で考える」ことの重要性
star4よくまとまっていて読みやすい!
star5行き詰まった時こそ、ドラッカーを読む。

by ヨメレバ

手前味噌ですが、当方で公開しているブログパーツ「ヨメレバ」「カエレバ」には、デザインが崩れないように改良してあります。

ぜひご利用になってみてください。

ヨメレバ・カエレバ・ポチレバ
スポンサーリンク
当ブログの記事に共感していただけたら、また読みに来ていただけると嬉しいです。読んでくれる方の数が多くなると、更新するヤル気に繋がります(^^)
フォロー、ブックマークしていただけると、ブログ更新を見逃しません

コメント

タイトルとURLをコピーしました