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

おそらく、ブログ界隈で最も利用されているであろう二大ブログパーツ「Amazlet」と、「G-Tools」は、実は、デザインに弱点を抱えていることを、知ってました?

今回は、Amazletの問題点についてお話します。

スポンサーリンク

Amazletは段落ちする!

Amazletは、cssの「float:left」を利用して、段組デザインを作っています。これが曲者です。

全体幅を設定しておかないと、右ブロック内の商品タイトルが長くなるにつれて、右ブロックの横幅が広がっていきます。あまり長すぎると、右側のブロックが左画像ブロックの下に段落ちします。

以前はこんな感じでした。※説明のために旧コードを引っ張ってきました。

ブログ簡単パワーアップ Movable Type スーパーカスタマイズテクニック
藤本 壱
技術評論社 (2005/11/08)
おすすめ度の平均: 5

5 待ってました!

そこで、Amazletは右ブロックの「float:left」設定を中止しています。

こうすることで、段落ちはなくなるのですが、右側のコンテンツの量が多い場合、コンテンツが左画像ブロックを回り込んで表示されてしまいます。

※コードを説明用に改変しています。

もし高校野球の女子マネージャーがドラッカーの『マネジメント』を読んだら
岩崎 夏海
ダイヤモンド社
売り上げランキング: 6
おすすめ度の平均: 4.0

4 中・高校生向けにちょうど良い
4 野球のマネージメント本
5 今年、上半期最高の萌本!!
5 ドラッカーの「マネジメント」がやさしく学べる
1 これは…読めない

こうなると、やっぱりおかしいということで、Amazletさんは、評価コンテンツブロックに「float:left」を適用しています。評価コンテンツブロックは一塊に表示されるようになったのですが、左画像の下に表示されています。

もし高校野球の女子マネージャーがドラッカーの『マネジメント』を読んだら
岩崎 夏海
ダイヤモンド社
売り上げランキング: 6
おすすめ度の平均: 4.0

4 中・高校生向けにちょうど良い
4 野球のマネージメント本
5 今年、上半期最高の萌本!!
5 ドラッカーの「マネジメント」がやさしく学べる
1 これは…読めない

これって、本意じゃないと思うのですよ。評価コンテンツのブロックも、右側に表示されるべきだと思います。

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のデザインの問題点と対策について、紹介します。

今日のわかった

IE6とかではチェックしていないけど、無視することにするw

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

コメント

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