ここでは、Cocoonで作れるトップページのバリエーションを紹介します。
プロントページタイプ（5種類）とカードタイプ（7種類）の組み合わせにより、どのようなトップページの構成になるのか、また、カードの表示形式がどのようになるのかをまとめています。
トップページの構成で悩んでいる方は、ぜひ参考にしてください！
Cocoonのデフォルトトップページ（一覧形式）
Cocoonは、何も設定変更しないと、下の画像のように「一覧形式」で表示されます。
これは、ブログの典型的なトップページであり、最新の記事（エントリーカード）が一番上に表示される仕様となっています。
トップページの設定
Cocoonでは、「Cocoon設定」の「インデックス」の設定により表示形式を変更することができます。
この設定を変更することで、典型的な一覧形式の他に、いわゆる「サイト型」と呼ばれるトップページも作ることができます。
（01） WordPress管理者画面にログインし、左のメニューの「Cocoon設定」（①）→「Cocoon設定」（②）をクリック。
（02） 「インデックス」タブを選択。
すると、トップページ用の設定である、「フロントページタイプ」と「カードタイプ」の２つの設定項目が確認できます。
「サイト型」のトップページに変更したい場合は、「フロントページタイプ」を「一覧（デフォルト）」以外に設定します。
次からは、「フロントページタイプ」と「カードタイプ」の組み合わせで、トップページがどのように表示されるかをまとめてみました。
タイルカード2列、タイルカード3列は縦型と表示形式は同じなので、以降のバリエーションとしての説明は割愛します。
フロントページタイプ：一覧（デフォルト）
まずは、「フロントページタイプ」が一覧（デフォルト）の場合。
先にも書きましたが、「一覧（デフォルト）」は、ブログで標準となっている「記事の新着順に一覧表示する」タイプです。
「サイト型」のトップページを作りたい場合は、「一覧（デフォルト）」以外を設定することになるので、次の「フロントページタイプ」の説明までスキップしてください。
カードタイプ：エントリーカード（デフォルト）
フロントページタイプが「一覧（デフォルト）」と、カードタイプが「エントリカード（デフォルト）」の組み合わせで、この設定が、Cocoonのデフォルト設定となっています。
カードタイプ：大きなカード（先頭のみ）
このカードタイプは、最初の記事（エントリーカード）だけが大きくなります。
カードタイプ：大きなカード
このカードタイプは、すべてのエントリーカードが大きいカードとなります。
カードタイプ：縦型カード2列
カードが縦型になって、横に2列で並ぶタイプです。
カードタイプ：縦型カード3列
カードが縦型になって、横に3列で並ぶタイプです。
フロントページタイプ：タブ一覧
続いては、フロントページタイプが「タブ一覧」の組み合わせです。
「タブ一覧」は、「タブ」と呼ばれるものがエントリーカードの上に、「新着記事」、「カテゴリーA」、「カテゴリーB」、「カテゴリーC」の順番に並びます。（次の画像（右側）参照）
「新着記事」のタブをクリックすると、新着記事が新しい順番で表示されます。
「カテゴリーA」のタブをクリックすると、「カテゴリーA」に属する記事（エントリカード）だけが表示されます。
以降、「カテゴリーB」、「カテゴリーC」も同様です。
カードタイプ：エントリーカード（デフォルト）
標準の大きさのエントリーカードが表示されるタイプです。
ここで気をつけないといけないのが、タブとして表示できるのは4つまでということで。
「新着記事」のタブは無条件に表示される仕様です。
なので、「カテゴリーA」～「カテゴリーD」の4つを表示する設定にしても、「カテゴリーA」～「カテゴリーC」までの３つまでしか表示されません。
４番め以降のカテゴリーを表示対象としても無視されることに注意しましょう。
カードタイプ：大きなカード（先頭のみ）
先頭の記事（エントリーカード）だけが大きくなるタイプです。
当然、他のタブ（「カテゴリーA」～「カテゴリーC」）でも同様に、先頭のみ大きくなります。
カードタイプ：大きなカード
先頭だけではなく、すべてのエントリーカードが大きくなるタイプです。（他のタブも同様）
カードタイプ：縦型カード2列
カードが縦型になって、横に2列で並ぶタイプです。（他のタブも同様）
カードタイプ：縦型カード3列
カードが縦型になって、横に3列で並ぶタイプです。（他のタブも同様）
フロントページタイプ：カテゴリごと
「かてごりごと」（以降の「カテゴリーごと（2カラム）」、「カテゴリーごと（3カラム）」も同様）は、「新着記事」＋表示指定をした「カテゴリー」がすべて表示されるタイプです。
いろんな「カテゴリー」を表示させたい場合は、「フロントページタイプ」、この「カテゴリごと」に変更した方がいいでしょう。
カードタイプ：エントリーカード（デフォルト）
エントリーカードが標準の大きさで表示されるタイプです。
下の画像を見てわかるように、一番上に「新着記事」が表示され、以降は表示指定した「カテゴリー」が並びます。
カードタイプ：大きなカード（先頭のみ）
先頭のエントリーカードだけが大きくなるタイプ。
これは、「新着記事」の最初のエントリカードが、他の「カテゴリー」も最初のエントリーカードが大きくなります。
カードタイプ：大きなカード
先頭だけではなくすべてが大きくなるタイプ。
カードタイプ：縦型カード2列
カードが縦型になって、横に2列で並ぶタイプ。
カードタイプ：縦型カード3列
カードが縦型になって、横に3列で並ぶタイプ。
フロントページタイプ：カテゴリごと（2カラム）
つまり、「カードタイプ」の設定が有効になるのは、「新着記事」のみということなります。
これは、バグでもなんでもなく、「Cocoonの仕様」であることを理解してください。
逆に、「カテゴリごと（2カラム）」は「新着記事」以外に有効となります。
ちょっとややこしい仕様ですが、きちんと理解しましょう。
カードタイプ：エントリーカード（デフォルト）
エントリーカードが標準の大きさで表示されるタイプ。
カードタイプ：大きなカード（先頭のみ）
先頭のエントリーカードだけが大きくなるタイプ。
先にも書いたように、「新着記事」だけ先頭のエントリーカードが大きくなり、それ以外の「カテゴリー」は標準の大きさのエントリーカードになります。
カードタイプ：大きなカード
先頭だけではなくすべてが大きくなるタイプ。
これも、「新着記事」だけエントリーカードが大きくなります。
カードタイプ：縦型カード2列
カードが縦型になって、横に2列で並ぶタイプ。
これも、「新着記事」だけが縦型2列になります。
カードタイプ：縦型カード3列
カードが縦型になって、横に3列で並ぶタイプ。
これも、「新着記事」だけが縦型3列になります。
フロントページタイプ：カテゴリごと（3カラム）
「カードタイプ」の設定が有効になるのは、「新着記事」のみです。
また、「カテゴリごと（3カラム）」は「新着記事」以外に有効となります。
カードタイプ：エントリーカード（デフォルト）
エントリーカードが標準の大きさで表示されるタイプ。
カードカードタイプ：大きなカード（先頭のみ）
先頭のエントリーカードだけが大きくなるタイプ。
「新着記事」だけ先頭のエントリーカードが大きくなり、それ以外の「カテゴリー」は標準の大きさのエントリーカードになります。
カードタイプ：大きなカード
先頭だけではなくすべてが大きくなるタイプ。
これも、「新着記事」だけエントリーカードが大きくなります。
カードタイプ：縦型カード2列
カードが縦型になって、横に2列で並ぶタイプ。
これも、「新着記事」だけが縦型2列になります。
カードタイプ：縦型カード3列
カードが縦型になって、横に3列で並ぶタイプ。
これも、「新着記事」だけが縦型3列になります。
Cocoonで「サイト型」のトップページを作るおすすめの設定
Cocoonで「サイト型」のトップページを作る場合、「フロントページタイプ」は、「カテゴリー」表示数の制限がある「タブ一覧」より、表示制限のない「カテゴリごと」がいいでしょう。
さらに「カテゴリごと」には、「カテゴリごと」、「カテゴリごと（2カラム）」、「カテゴリごと（3カラム）」の3種類ありますが、あまりエントリーカードを詰め込みすぎると、読む方も迷うことになるので、「カテゴリごと」、「カテゴリごと（2カラム）」がおすすめです。
カードタイプは好みなのでどれでもいいですが、画面サイズとの兼ね合いがあるので、大きいカードばかり表示させると、逆に表示されるエントリーカードが少なくなります。
なので、標準サイズ」のカードか、「縦型2列（またはタイルカード2列）」までがおすすめです。
コメント