文章メインのブログだとアイキャッチ小さめで縦一列に並ぶ形でもいいのですが、画像メインというか。
写真を少し強調したいタイプのブログだと、写真を見て記事の内容がつかめるような構成にしたい、ということで。
![](https://gotta.mikehana.com/wp-content/uploads/2019/11/20191128一覧を2列表示にする方法01.jpg)
Cocoonテーマで記事一覧部分を2列にしていきます。
記事一覧を2列に変更する方法
![](https://gotta.mikehana.com/wp-content/uploads/2019/11/20191128一覧を2列表示にする方法02.jpg)
WordPressのメニュー[Cocoon 設定]を開き、[インデックス]タブをクリックします。
![](https://gotta.mikehana.com/wp-content/uploads/2019/11/20191128一覧を2列表示にする方法03.jpg)
その中ほどに[カードタイプ]という項目があるのでそちらを見てみると、何も設定しない段階では「エントリーカード(デフォルト)」となっています。
![](https://gotta.mikehana.com/wp-content/uploads/2019/11/20191128一覧を2列表示にする方法04.jpg)
こちらの縦型カードかタイルカードの2列を選んで設定を保存すれば、
![](https://gotta.mikehana.com/wp-content/uploads/2019/11/20191128一覧を2列表示にする方法05.jpg)
簡単に表示が2列に切り替わります。
ちなみに「by Cocoon」という表示は、Wordpressの管理からログアウトすれば見えなくなります。
![](https://gotta.mikehana.com/wp-content/uploads/2019/11/20191128一覧を2列表示にする方法06.jpg)
つまり、ログイン中の管理権限を持った人間以外には見えていない表示なので、特に気にする必要はありません。
![](https://gotta.mikehana.com/wp-content/uploads/2019/11/20191128一覧を2列表示にする方法07.jpg)
![](https://gotta.mikehana.com/wp-content/uploads/2019/11/icon_normal_right.jpg)
気になる方は[Cocoon 設定]→[管理者画面]タブ内の[管理者パネル]項目にある[PVの表示] PVエリアを表示するのチェックを外して保存すれば見えなくなる
スマホでは2列表示はどう処理される?
PCの方では問題なく希望の形に変更することができました。
が、設定画面の注意書きのように、スマホでは解像度によってカラム設定が異なるようです。
ためしにfirefoxのレスポンシブデザインモードを使ってみてみると、
![](https://gotta.mikehana.com/wp-content/uploads/2019/11/20191128一覧を2列表示にする方法08.jpg)
デフォルトのWIDTHが320pxだと確かに1列表示になっているようです。
ですが、
![](https://gotta.mikehana.com/wp-content/uploads/2019/11/20191128一覧を2列表示にする方法09.jpg)
iPhoneやほかのキャリア設定で見てみても…あれ?
WIDTHが480px以下だけど2列表示されちゃってますね。
これだとちょっと不安なので素直に
![](https://gotta.mikehana.com/wp-content/uploads/2019/11/20191128一覧を2列表示にする方法10.jpg)
[カードタイプ]項目の下部にある、スマホ端末で縦型&タイル型のエントリーカードを1カラムにするにチェックを入れて保存。
![](https://gotta.mikehana.com/wp-content/uploads/2019/11/20191128一覧を2列表示にする方法11.jpg)
これできちんと、スマホ端末では1カラム表示となりました。
![](https://gotta.mikehana.com/wp-content/uploads/2019/11/icon_normal_right.jpg)
ついでにほかのカードタイプだと、大きなカードは記事リスト幅フルに使って画像表示、タイルカードは横の並びがタイトルの文字数の違い(1行or2行)などによってまちまちになる模様
コメント