STORK19の購入ページはこちら

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列のままにしておくことをおすすめします。

CTAを設置しよう!

ここにリンクさせたい自分の商品やアフィリエイトリンクなどを表示させることが可能です。記事下のCTAは収益化においてかなり重要となるので効果的に使いたいところです。タグを追加してあげれば画像なども表示させることが可能!簡単にサイトの収益化の仕組みを導入することができます。