はてなブログデザインテーマ「KOALA」で記事のカードの高さを揃える方法

あなたはブログテーマは何を使っていますか？

私はこのブログを始めるにあたって最初のデザインテーマは「KOALA」のお世話になることにしました。カスタマイズしやすそうなデザインであること、動作が軽い、カード型記事表示という点が気に入ったからです。

blog.hatena.ne.jp

テーマをダウンロードして、少しだけ自分ナイズにカスタマイズして（筆者はHTML+CSSコーディングが少しできる程度の技術力です）なんとか公開にこぎつけたのですが、ここで一つ気になる点が出てきました。カード型記事の高さが揃わない、という事です。例として、手前味噌ではありますが当サイトでの表示を例に挙げます。

些細な事ですが、とても気になるので、この記事の高さを全て揃えるようにCSSにコードを書き加えることにしました。

WEBデザインでよく使われるボックスレイアウトにおいて、コンテンツ量の違うボックスを横並びに綺麗に高さをそろえて（下辺を揃えて）配置したい時には、 Flexbox を使ってボックスを揃える方法がオススメです。

Flexbox はCSS3で追加されたプロパティで「Flexible Box Layout Module」の略です。フレキシブルなレイアウトが可能で、レスポンシブデザインとも相性が良く、非常に使い勝手の良いプロパティです。こちらの記事がとてもわかりやすいので、参考にしてみてください。

www.webcreatorbox.com

これを参考に「KOALA」のデザインCSSに以下のソースを加えます。

.archive-entries{
 display:flex; /* ボックスの高さを揃える */
 flex-wrap: wrap; /* 子要素を折り返し、複数行に上から下へ並べる */
}

コンテンツ量の違うボックスの高さが綺麗に揃いました。

古いブラウザ等に対応していないのが欠点ですが（CSSでカバーできます）Flexboxは本当に便利なので、今後のレイアウトの主流になることは間違いないでしょう。