先日紹介した MediaMarker のブログパーツ ですが、アイテムを横に並べて複数行表示するとレイアウトが崩れることがありました。この問題は CSS で修正できたのでご紹介します。

原因は CSS の float の問題でした。

レイアウト崩れが起こっていた

具体的にどんな崩れ方をしていたかというと、こんな感じになっていました。



MediaMarker のブログパーツは JavaScript でコードを生成しているので、それをごそごそとトレースして調べてみたところ、こんな事が起こっていたのです。



採用基準という本のタイトルの高さがその横の本よりも少ないために、その下の「ローマ法王に…」という本が左寄せにならずに引っかかっているという現象。float 使うとありがちですね。

レイアウト崩れを修正する

ここから先の修正は自己責任でお願いします。ブログパーツの設定とかによっても違うかもしれません。同じような現象が発生している方は試す価値があるかも？

原因ははっきりしてますので、高さを固定することにします。つまり、タイトルの長さの影響を受けないように高さを一定にしてしまいます。

そうするとこんな感じになって問題が回避できます。




具体的にどんな修正をしたのかというと、MediaMarker のブログパーツはきちんと CSS セレクタを指定してくれているので、そのセレクタを指定して問題の発生する部分(今回は本のタイトル)の高さを固定にするようにスタイルを上書きします。

スタイルシートはいつものように子テーマの Style.css に入れます。

実は同じ問題がイメージの方にもありました。CD や LEGO のイメージは高さがバラバラなので、こちらも同じように合わせるようにします。

具体的には以下のコードを入れるだけ。ただし、高さのサイズ指定はデザインや配置によって違うかもしれないのでご注意を。



これでキレイに表示されるようになりました。縦一列に並べているような場合は不要な隙間が空くようになってしまうので逆効果。レスポンシブデザインにしているので縦一列になってしまうようなこともあるのですが、まぁ、崩れるよりは良いかと。

困っている方はお試しアレ。

---

最後まで読んでいただきありがとうございます。

左のアイコンをクリックして、このブログを Feedly に登録していただけると嬉しいです


Facebook ページでも情報を発信していますのでよろしかったら「いいね！」をお願いします

RSSリーダへの登録は こちら からどうぞ。