この記事では、Cocoonのカードタイプをカスタマイズして、記事一覧を2列表示（2カラム表示）にする方法をご紹介します。
記事を書くことに慣れてくると、見やすいサイトにカスタマイズしたり、有料テーマのような見た目にしたくなってきますよね。
そこでやりたくなるのが投稿記事一覧のカスタマイズ。
なんと、htmlやcssがいるのかと思いきや、Cocoonだと設定を変更するだけでできちゃうんです！
しかも2列表示だけでなく、1列や3列表示にもできるので、どこで設定変更するかをマスタ―し、ユーザファーストなサイト作成にお役立てください。
１．Cocoonで2列表示にする方法
ダッシュボード ＞ Cocoon設定 ＞ インデックス をクリックして、カードタイプ欄へ。
↑の画像の通り、縦型カード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列表示と同様で、モバイル表示でブログの説明文の表示と、アイキャッチ画像の大きさを変えるとタイルになります。
