おそらく、ブログ界隈で最も利用されているであろう二大ブログパーツ「Amazlet」と、「G-Tools」は、実は、デザインに弱点を抱えていることを、知ってました？
今回は、Amazletの問題点についてお話します。
Amazletは段落ちする！
Amazletは、cssの「float:left」を利用して、段組デザインを作っています。これが曲者です。
全体幅を設定しておかないと、右ブロック内の商品タイトルが長くなるにつれて、右ブロックの横幅が広がっていきます。あまり長すぎると、右側のブロックが左画像ブロックの下に段落ちします。
以前はこんな感じでした。※説明のために旧コードを引っ張ってきました。
技術評論社 (2005/11/08)
待ってました！
そこで、Amazletは右ブロックの「float:left」設定を中止しています。
ダイヤモンド社
売り上げランキング: 6
こうすることで、段落ちはなくなるのですが、右側のコンテンツの量が多い場合、コンテンツが左画像ブロックを回り込んで表示されてしまいます。
※コードを説明用に改変しています。
ダイヤモンド社
売り上げランキング: 6
中・高校生向けにちょうど良い 野球のマネージメント本 今年、上半期最高の萌本!! ドラッカーの「マネジメント」がやさしく学べる
これは…読めない
こうなると、やっぱりおかしいということで、Amazletさんは、評価コンテンツブロックに「float:left」を適用しています。評価コンテンツブロックは一塊に表示されるようになったのですが、左画像の下に表示されています。
ダイヤモンド社
売り上げランキング: 6
中・高校生向けにちょうど良い 野球のマネージメント本 今年、上半期最高の萌本!! ドラッカーの「マネジメント」がやさしく学べる これは…読めない
これって、本意じゃないと思うのですよ。評価コンテンツのブロックも、右側に表示されるべきだと思います。
overflow: hidden;を利用する
clear:leftが利用できないのであれば、他に同じような機能を持つものはないか？とういことで、もかりさんから情報を頂きました。
http://css-happylife.com/archives/2009/1102_0115.php
overflow使ったら、floatどうにかできてもうちょっときれいなソースになるかしら？
overflow:hiddenでもclear:leftと同じような効果が得られるそうです。
Amazletにも入っている
<div style=”clear:left”></div>
のような回りこみ防止のためのdivタグは、空要素になってしまって、気持ちが悪いなと思っていましたが、overflow:hiddenで解決です。
こんな感じ。
今年、上半期最高の萌本!!
これは…読めない実際に、IEとFFでテストしてみたら特に問題なさそうですので、ブログパーツ「ヨメレバ」「カエレバ」のテンプレートに導入しました。Amazlet風(改)というデザインです。お試しください。
次回は、G-toolsのデザインの問題点と対策について、紹介します。
コメント