Cocoonで記事一覧を2列に変更する方法

WordPress

文章メインのブログだとアイキャッチ小さめで縦一列に並ぶ形でもいいのですが、画像メインというか。
写真を少し強調したいタイプのブログだと、写真を見て記事の内容がつかめるような構成にしたい、ということで。

Cocoonテーマで記事一覧部分を2列にしていきます。

記事一覧を2列に変更する方法

WordPressのメニュー[Cocoon 設定]を開き、[インデックス]タブをクリックします。

その中ほどに[カードタイプ]という項目があるのでそちらを見てみると、何も設定しない段階では「エントリーカード(デフォルト)」となっています。

こちらの縦型カードかタイルカードの2列を選んで設定を保存すれば、

簡単に表示が2列に切り替わります。

ちなみに「by Cocoon」という表示は、Wordpressの管理からログアウトすれば見えなくなります

つまり、ログイン中の管理権限を持った人間以外には見えていない表示なので、特に気にする必要はありません。

気になる方は[Cocoon 設定]→[管理者画面]タブ内の[管理者パネル]項目にある[PVの表示] PVエリアを表示するのチェックを外して保存すれば見えなくなる

スマホでは2列表示はどう処理される?

PCの方では問題なく希望の形に変更することができました。
が、設定画面の注意書きのように、スマホでは解像度によってカラム設定が異なるようです。

ためしにfirefoxのレスポンシブデザインモードを使ってみてみると、

デフォルトのWIDTHが320pxだと確かに1列表示になっているようです。
ですが、

iPhoneやほかのキャリア設定で見てみても…あれ?
WIDTHが480px以下だけど2列表示されちゃってますね。

これだとちょっと不安なので素直に

[カードタイプ]項目の下部にある、スマホ端末で縦型&タイル型のエントリーカードを1カラムにするにチェックを入れて保存

これできちんと、スマホ端末では1カラム表示となりました。

ついでにほかのカードタイプだと、大きなカードは記事リスト幅フルに使って画像表示、タイルカードは横の並びがタイトルの文字数の違い(1行or2行)などによってまちまちになる模様

コメント