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

Akira

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

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

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

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

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

このサムネイル画像を左右交互に配置するスタイルは、Simplicity に簡単に導入できます。そのカスタマイズの紹介です。

テーマ設定

サムネイル画像を左右交互に配置するために、最初にすべきことはテーマ設定の変更です。

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

これだけで完成。

簡単にできるのは 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未満ではデフォルトの「大きなエントリーカード」のスタイルが適用されます。

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

送信に失敗しました

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

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