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

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

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

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

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

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

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

商品タイトル短い

マネジメント – 基本と原則 [エッセンシャル版]
	P・F. ドラッカー 上田 惇生 ダイヤモンド社 2001-12-14 売り上げランキング : 15 おすすめ平均 力強い文体、強い確信 ドラッカーによる組織マネジメントの基本理論書 経営理論の古典 Amazonで詳しく見る by G-Tools

商品タイトル長い

プロフェッショナルの条件―いかに成果をあげ、成長するか (はじめて読むドラッカー (自己実現編))
	P・F. ドラッカー Peter F. Drucker 上田 惇生 ダイヤモンド社 2000-07 売り上げランキング : 155 おすすめ平均 知識労働者が仕事で成功する方法 ビジネス書を読みあさる前にまず読むべきでした。 「自分で考える」ことの重要性 Amazonで詳しく見る by G-Tools

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

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

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

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

P・F. ドラッカー ダイヤモンド社 2000-07 売り上げランキング : 155 おすすめ平均 知識労働者が仕事で成功する方法 ビジネス書を読みあさる前にまず読むべきでした。 「自分で考える」ことの重要性 よくまとまっていて読みやすい！ 行き詰まった時こそ、ドラッカーを読む。 Amazon 楽天ブックス 7net bk1 ブックオフ e-hon by ヨメレバ

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

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