Simplicity の 2 列・3 列の一覧リストを行をそろえるカスタマイズ

Flexboxで一覧リストを2列または3列にするカスタマイズ

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を「見やすさ」と「使いやすさ」にこだわり紹介しています。

Simplicity の一覧リストには、「タイル 2 列」と「タイル 3 列」があります。

このタイル 2 列と 3 列では、各記事の高さが違うと行がそろいません。

理由は Simplicity のタイル 2 列と 3 列は、メイソンリースタイルだから。

Pinterest が採用し一躍脚光を浴びたメイソンリースタイルは、行の概念がありません。

しかし、Simplicity のフォーラムを見ていると、行をそろえたいと希望されている方が多いもよう。

もし行をそろえたいとお考えであれば、 Flexbox で一覧リストを表示させてはいかがでしょうか。

Flexbox であれば、各記事の高さが違っても自動的に行がそろいます。例えば下の画像のように。

1行目の2つの記事の高さが異なっても行がそろっている2行目

1 行目の 2 つの記事はタイトルの行数が異なるため、記事全体の高さが違います。しかし、 2 行目は、しっかりと行が揃っています。

この Flexbox を用いたカスタマイズを、 100% コピペでできるようにご紹介します。

テーマ設定で下準備

行がそろった 2 列や 3 列の一覧リストにするために、まず一覧リストのスタイルを「大きなエントリーカード」にします。

「大きなエントリーカード」であれば、タブレットサイズへのレスポンシブ対応もすごく簡単です。

style.css でスタイルを指定

あとは子テーマの style.css で CSS を指定するだけです。

ただ、「エントリーカード全体をリンク化」が無効か有効かで、指定する CSS が異なります。

「エントリーカード全体をリンク化」が無効の場合の CSS

「エントリーカード全体をリンク化」が無効の場合には、下記の CSS を子テーマの style.css に追加します。

「完全レスポンシブ表示を有効」が、無効であっても有効であっても同じ CSS です。

#list {
  display: flex;
  flex-wrap: wrap;
}

#main .entry {
  margin-bottom: 16px;
}

@media screen and (min-width: 740px) {
  #main .entry {
    flex: 0 1 50%;
  }
}

@media screen and (max-width: 740px) {
  #main .entry {
    flex: 1 0 100%;
  }
}

.entry-large-thumb {
  border: 1px solid #ddd;
  border-bottom: none;
  border-top-left-radius: 5px;  
  border-top-right-radius: 5px;
  margin: 0 8px;
}

.entry-large-thumnail {
  display: block;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.entry-card-large-content {
  border: 1px solid #ddd;
  border-top: none;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  margin: 0 8px;
  padding: 8px 16px;
}

.entry h2 {
  font-size: 18px;
  line-height: 180%;
  margin: 0;
}

.entry h2 a {
  font-size: 18px;
}

.entry .post-meta {
  font-size: 12px;
  margin: 8px -16px;
  padding: 0 16px;
}

.entry-snippet {
  font-size: 11px;
}

.entry-read a {
  font-size: 12px;
}

なるべくデフォルトのタイル 2 列と同じになるように指定していますが、余白は若干調整しています。

画面幅 740px 以上では 2 列、 740px 以下では 1 列で表示されます。

画面幅740px以上では2列で表示画面幅 740px 以上の2列スタイル

画面幅740px以下では1列で表示画面幅 740px 以下の1列スタイル

画面幅 740px 以上で 3 列にするには、以下の部分の 50%33.333333% に書き換えます。

@media screen and (min-width: 740px) {
  #main .entry {
    flex: 0 1 50%;
  }
}

ただ、メインカラムの幅が 740px の Simplicity のデフォルトでは、カードの 3 列はあまりおすすめしません。私には窮屈に感じます。

「エントリーカード全体をリンク化」が有効の場合の CSS

「エントリーカード全体をリンク化」を有効にすると、 HTML が変わります。そのため、無効の場合とは CSS が異なります。

有効にされている場合には、下記の CSS を子テーマの style.css に追加。

「完全レスポンシブ表示を有効」が無効であっても有効であっても同じ CSS です。

#list {
  display: flex;
  flex-wrap: wrap;
}

@media screen and (min-width: 740px) {
  #list .hover-card {
    flex: 0 1 50%;
  }
}

@media screen and (max-width: 740px) {
  #list .hover-card {
    flex: 1 0 100%;
  }
}

#main .entry {
  border: 1px solid #ddd;
  border-radius: 5px;
  margin: 8px;
}

.entry-large-thumb {
  border-top-left-radius: 5px;  
  border-top-right-radius: 5px;
}

.entry-large-thumnail {
  display: block;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.entry-card-large-content {
  padding: 8px 16px;
}

.entry h2 {
  font-size: 18px;
  margin: 0;
  line-height: 180%;
}

.entry .post-meta {
  font-size: 12px;
  margin: 8px -16px;
  padding: 0 16px;
}

.entry-snippet {
  font-size: 11px;
}

.entry-read {
  font-size: 12px;
}

タイル 3 列にするには、以下の部分の 50%33.333333% に書き換えます。

@media screen and (min-width: 740px) {
  #list .hover-card {
    flex: 0 1 50%;
  }
}

ただ、やっぱりデフォルトのレイアウトでは、 3 列はおすすめはできません。 YouTube のように border を付けずカードにしなければ、 3 列でも余裕が生まれるけど。

リストの端数対策

#listjustify-content: center を追加すると、割り切れずに余った最後の記事を左右中央に配置できます。

これは「エントリーカード全体をリンク化」が無効であっても有効であっても同じです。

#list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

中央に配置された割り切れずに余った最後の記事左右中央に配置された最後の記事

お好みに合わせて、指定するかをお選びください。


行をそろえることは、 #main .entry などの高さを固定することでも可能です。

しかし、高さを固定しては、記事タイトルの文字数も固定しなければなりません。

記事タイトルが短ければ、不自然な余白が「記事を読む」の下に生まれます。

記事タイトルが長ければ、抜粋や「記事を読む」が隠れてしまいます。

それに対し Flexbox を使った一覧リストは、記事タイトルの文字数の制限が一切ありません。

正式名称 Flexible Box Layout Module (自在ボックスレイアウト)の名前のとおり、思いどおりのフレキシブルなレイアウトに自動的にしてくれる Flexbox 。

ものすごく便利な Flexbox は、サイトデザインの幅を一気に増やしてくれるありがたい CSS です。