STORK19の「カード型」記事レイアウトをスマホ表示の時に2列にする方法

ストーク19では管理画面の【外観 > カスタマイズ > 記事一覧レイアウト設定】で記事レイアウトを「カード型」に設定している場合、スマートフォン表示（縦向き）では1列で表示されます。（横向きにした場合は2列に切り替わります）

なぜ、1列表示にしているのかについては後述しますが、テーマサポートへのお問い合わせの中に「スマホ表示でのカード型記事一覧レイアウトを2列にしたい」というご要望が多々あるので、ここではそのカスタマイズ方法を解説いたします。

style.cssでカスタマイズ

基本的には下記のCSSを子テーマのstyle.cssなどに記述するだけです。

@media only screen and (max-width: 480px) {
  .archives-list.card-list .post-list {
    width: calc(50% - .5em);
  }
  .archives-list.card-list a {
    padding: .5em;
  }
  .archives-list.card-list a .eyecatch {
    margin: -.5em -.5em .5em;
  }

  /*投稿タイトルのフォントサイズを調整*/
  .archives-list.card-list a .entry-title {
    font-size: 85%;
  }
}

これでスマートフォン表示でもカード型記事一覧レイアウトを2列に変更することができます。

【注意事項】インフィード広告を設定している場合

注意が必要なのは、カード型記事一覧レイアウトでインフィード広告を設定している場合です。

インフィード広告は記事一覧の幅と同じサイズで表示され【幅の最小値 250ピクセル】という条件があるのですが、ストーク19ではスマートフォン表示（縦向き）でカード型記事一覧レイアウトが1列になるので、広告を表示するための横幅も確保されています。

ただ、このカスタマイズで記事一覧レイアウトを2列にすると【幅の最小値 250ピクセル】に満たないため、インフィード広告を設定することができないと思われます。

インフィード広告を設定するという場合は、1列のままにしておくことをおすすめします。