この記事では、Cocoonのカードタイプをカスタマイズして、記事一覧を2列表示(2カラム表示)にする方法をご紹介します。
記事を書くことに慣れてくると、見やすいサイトにカスタマイズしたり、有料テーマのような見た目にしたくなってきますよね。
そこでやりたくなるのが投稿記事一覧のカスタマイズ。
なんと、htmlやcssがいるのかと思いきや、Cocoonだと設定を変更するだけでできちゃうんです!
しかも2列表示だけでなく、1列や3列表示にもできるので、どこで設定変更するかをマスタ―し、ユーザファーストなサイト作成にお役立てください。
1.Cocoonで2列表示にする方法
ダッシュボード > Cocoon設定 > インデックス をクリックして、カードタイプ欄へ。

↑の画像の通り、縦型カード2列 に変更して終わりです。変更したらこんな感じになります。

変更前はこんな感じ。

2.カードタイプごとの見え方
上記で紹介した2列表示の中でも、タイルのような2列表示もあります。
また、スマホで見やすい大きなカード表示や、3列表示もあります。
以下では、スマホとPCでどんな様子で見えるのかを、カードタイプごとにご紹介します。
2.1 エントリーカード(デフォルト設定)
こちらがデフォルト設定のエントリーカード表示です。
少し調べてみましたが、大物ブロガーさんでエントリーカード表示にしている方はあまりいませんでした。
最近はスマホユーザが多いのでスマホファーストな見栄えにしている方が多いです。
また、ブログの内容としてPCユーザの訪問者が多い方におすすめします。
2.2 大きなカード(先頭のみ)

こちらは大きなカードで表示する中でも、先頭だけ大きくなる設定です。
「最新記事はこれ!」とアピールしたい、スマホユーザが多いブログ向けです。
PCから見ると先頭が大きすぎて「そこまで大きくしなくても…」という印象がありました。
2.3 大きなカード

大きなカード表示は、先ほどの先頭のみ大きくする表示とは異なり、すべてのカードを大きく表示します。
「2列表示はスマホだと小さいのでは?」と考える方におすすめな、アイキャッチ画像に書かれている文字などもアピールできる大きさです。
スマホユーザが多いブログ向けです。
もしカスタマイズできるなら、PC訪問時と、スマホ訪問時の表示方法を分けるのがオススメです。
2.4 縦型カード2列

縦型カード2列表示は、当サイトの表示方法です。
スマニューや女性の読み物のサイトではこの表示方法が多い(気がする)ため、私はこの表示が個人的に見慣れています。

2.5 縦型カード3列

こちらは縦型カード3列表示です。
縦型カード3列になってくると、スマホは少し狭く感じますね。
タブレット端末~PCで表示すると見やすい設定です。
2.6 タイルカード2列

タイルカード2列表示はその名の通り、タイルのようにカードの位置を少しずつずらしながら表示します。
当ブログではあまりずれていないですが、モバイル表示の設定で、説明文まで見せるように設定すると、縦の長さが出てタイルになります。
また、画像の縦の長さも反映されるので、記事によってアイキャッチ画像の縦幅が違う方は、かなりタイル感が増します。
2.7 タイルカード3列

最後に、タイルカード3列です。
当サイトは記事が少なすぎることと、アイキャッチ画像の大きさが同じなのでタイル感が出ていません。
が、タイルカード2列表示と同様で、モバイル表示でブログの説明文の表示と、アイキャッチ画像の大きさを変えるとタイルになります。