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

インデックスリストのサムネイルを左右交互に配置

Akira

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

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

WordPressテーマEvathemeのVoyagerスタイルのスクリーンショット

上記のスクリーンショットは、 Evatheme の 「 Voyager 」HOME STYLE 8

このデザインを採用している国産 WordPress テーマは、そう多くはないはず。

ただ、Simplicity であれば、 CSS だけで簡単にサムネイル画像を左右交互に配置できます。

他とは違ったサイトデザインにしたい方におすすめです。

大きなエントリーカードを選択

サムネイル画像を左右交互に配置するために、一覧リストのスタイルを「大きなエントリーカード」にします。

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

「大きなエントリーカード」は非常に使い勝手がいいため、私が最も好きな一覧リストのスタイル。

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

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

CSS を変更

続いて子テーマの 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;
  }
}

これだけで完成。

CSSでカスタマイズした後の完成図

簡単にできるのは 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) {} で囲んでいるため、画面幅 1110px以下ではデフォルトの「大きなエントリーカード」のスタイルが適用されます。

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