Simplicity の 2 列・3 列の一覧リストの行をそろえる方法

Akira

福岡在住の Web デザイナー。Web サイト制作に役立つ情報を紹介しています。AMP が大好き。

FacebookTwitter で記事の更新をお知らせしています。

Simplicity の一覧リスト「タイル 2 列」と「タイル 3 列」の行をそろえるカスタマイズの紹介です。

カスタマイズは、100% コピペでできます。

完成図

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

このタイル 2 列と 3 列では、各記事の高さが違うと行がそろいません。理由は、Simplicity のタイル 2 列と 3 列はメイソンリースタイルだから。

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

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

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

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

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

テーマ設定で下準備

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

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

CSS を指定

あとは子テーマの style.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-radius: 5px 5px 0 0;
  margin: 0 8px;
}

.entry-large-thumnail {
  display: block;
}

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

.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 以下の 1 列スタイル

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

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

ただ、メインカラムの幅が 740px の Simplicity のデフォルトでは、カードの 3 列は窮屈に感じるかもしれません。

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

「エントリーカード全体をリンク化」を有効にすると、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-thumnail {
  display: block;
}

.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%;
  }
}

リストの端数対策

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

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

#list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
左右中央に配置された最後の記事

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

おわりに

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

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

記事タイトルが短ければ、不自然な余白が「記事を読む」の下に生まれます。記事タイトルが長ければ、抜粋や「記事を読む」が隠れてしまいます。

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

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

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

送信に失敗しました

ボットと判定された可能性があります。

大変お手数をおかけしますが、以下の内容をご確認の上、再度のコメントの送信をお願い申し上げます。