インデックスリストのサムネイルを左右交互に配置するカスタマイズ

海外の WordPress テーマでよく見かけるのが、サムネイル画像を左右交互に配置するデザイン。

上のスクリーンショットは、Evatheme の Voyager – HOME STYLE 8。

WordPress テーマ Simplicity であれば、このサムネイル画像を左右交互に配置するスタイルを 2 ステップでカスタマイズできます。

最初のステップは、テーマ設定の変更です。

WordPress 管理画面 → 外観 → カスタマイズ → レイアウト（全体・リスト）より、「大きなエントリーカード」を選択します。

また、「エントリーカード全体をリンク化」は無効にします。有効にすると HTML が変わるため、今回紹介する CSS が効きません。

さらに、「抜粋文字数」を 40 ~ 50 文字程度に変更します。抜粋が不要な方は 0 でも構いません。

続いて子テーマの style.css に、下記の CSS を追加します。

@media screen and (min-width: 1110px) {
  #main .entry {
    display: flex;
  }

  #main .entry:nth-child(even) {
    flex-direction: row-reverse;
  }

  .entry-large-thumb,
  .entry-card-large-content {
    flex: 0 1 50%;
  }

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

  #main .entry:nth-child(odd) header {
    padding: 0 0 8px 24px;
  }

  #main .entry:nth-child(even) header {
    padding: 0 24px 8px 0;
  }

  .entry h2 {
    margin: 8px 0;
  }

  .entry .post-meta {
    background: #fff;
    margin: 0;
  }

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

  #main .entry:nth-child(odd) .entry-snippet,
  #main .entry:nth-child(odd) .entry-read {
    padding: 0 0 0 24px;
  }

  #main .entry:nth-child(even) .entry-snippet,
  #main .entry:nth-child(even) .entry-read {
    padding: 0 24px 0 0;
  }
}

これで完成。

簡単にできるのは Flexbox のおかげです。

#main .entry に対し、display: flex; を指定しています。

#main .entry {
  display: flex;
}

これでサムネイルとコンテンツ部分が横並びになります。

あとは、偶数の #main .entry に対し、flex-direction: row-reverse; を指定します。

#main .entry:nth-child(even) {
  flex-direction: row-reverse;
}

これで偶数のリストは、右側にサムネイル・左側にコンテンツ部分が配置されます。

全体を @media screen and (min-width: 1110px) {} で囲んでいるため、画面幅 1110 px未満ではデフォルトの「大きなエントリーカード」のスタイルが適用されます。

メディアクエリのブレイクポイントや細かなデザインは、お好みでご指定ください。