Cocoonで作れるトップページのバリエーション

Cocoonで作れるサイト型トップページのバリエーション

ここでは、Cocoonで作れるトップページのバリエーションを紹介します。

プロントページタイプ(5種類)とカードタイプ(7種類)の組み合わせにより、どのようなトップページの構成になるのか、また、カードの表示形式がどのようになるのかをまとめています。

トップページの構成で悩んでいる方は、ぜひ参考にしてください!

クリックするだけでCocoonのスキンをリアルタイムに確認!
目次

Cocoonのデフォルトトップページ(一覧形式)

Cocoonは、何も設定変更しないと、下の画像のように「一覧形式」で表示されます。

これは、ブログの典型的なトップページであり、最新の記事(エントリーカード)が一番上に表示される仕様となっています。

一覧形式のイメージ
Cocoonで作れるサイト型トップページのバリエーション
実際の表示
Cocoonで作れるサイト型トップページのバリエーション

トップページの設定

Cocoonでは、「Cocoon設定」の「インデックス」の設定により表示形式を変更することができます。

この設定を変更することで、典型的な一覧形式の他に、いわゆる「サイト型」と呼ばれるトップページも作ることができます。

(01) WordPress管理者画面にログインし、左のメニューの「Cocoon設定」(①)→「Cocoon設定」(②)をクリック。

Cocoonで作れるサイト型トップページのバリエーション

(02) 「インデックス」タブを選択。

Cocoonで作れるサイト型トップページのバリエーション

すると、トップページ用の設定である、「フロントページタイプ」と「カードタイプ」の2つの設定項目が確認できます。

Cocoonで作れるサイト型トップページのバリエーション
Cocoonで作れるサイト型トップページのバリエーション

「サイト型」のトップページに変更したい場合は、「フロントページタイプ」を「一覧(デフォルト)」以外に設定します。

次からは、「フロントページタイプ」と「カードタイプ」の組み合わせで、トップページがどのように表示されるかをまとめてみました。

タイルカード2列、タイルカード3列は縦型と表示形式は同じなので、以降のバリエーションとしての説明は割愛します。

フロントページタイプ:一覧(デフォルト)

まずは、「フロントページタイプ」が一覧(デフォルト)の場合。

先にも書きましたが、「一覧(デフォルト)」は、ブログで標準となっている「記事の新着順に一覧表示する」タイプです。

「サイト型」のトップページを作りたい場合は、「一覧(デフォルト)」以外を設定することになるので、次の「フロントページタイプ」の説明までスキップしてください。

カードタイプ:エントリーカード(デフォルト)

フロントページタイプが「一覧(デフォルト)」と、カードタイプが「エントリカード(デフォルト)」の組み合わせで、この設定が、Cocoonのデフォルト設定となっています。

Cocoonで作れるサイト型トップページのバリエーション
Cocoonで作れるサイト型トップページのバリエーション

カードタイプ:大きなカード(先頭のみ)

このカードタイプは、最初の記事(エントリーカード)だけが大きくなります。

Cocoonで作れるサイト型トップページのバリエーション
Cocoonで作れるサイト型トップページのバリエーション

カードタイプ:大きなカード

このカードタイプは、すべてのエントリーカードが大きいカードとなります。

Cocoonで作れるサイト型トップページのバリエーション
Cocoonで作れるサイト型トップページのバリエーション

カードタイプ:縦型カード2列

カードが縦型になって、横に2列で並ぶタイプです。

Cocoonで作れるサイト型トップページのバリエーション
Cocoonで作れるサイト型トップページのバリエーション

カードタイプ:縦型カード3列

カードが縦型になって、横に3列で並ぶタイプです。

Cocoonで作れるサイト型トップページのバリエーション
Cocoonで作れるサイト型トップページのバリエーション

フロントページタイプ:タブ一覧

続いては、フロントページタイプが「タブ一覧」の組み合わせです。

「タブ一覧」は、「タブ」と呼ばれるものがエントリーカードの上に、「新着記事」、「カテゴリーA」、「カテゴリーB」、「カテゴリーC」の順番に並びます。(次の画像(右側)参照)

「新着記事」のタブをクリックすると、新着記事が新しい順番で表示されます。

「カテゴリーA」のタブをクリックすると、「カテゴリーA」に属する記事(エントリカード)だけが表示されます。

以降、「カテゴリーB」、「カテゴリーC」も同様です。

カードタイプ:エントリーカード(デフォルト)

標準の大きさのエントリーカードが表示されるタイプです。

Cocoonで作れるサイト型トップページのバリエーション
Cocoonで作れるサイト型トップページのバリエーション

ここで気をつけないといけないのが、タブとして表示できるのは4つまでということで。

「新着記事」のタブは無条件に表示される仕様です。

なので、「カテゴリーA」~「カテゴリーD」の4つを表示する設定にしても、「カテゴリーA」~「カテゴリーC」までの3つまでしか表示されません。

4番め以降のカテゴリーを表示対象としても無視されることに注意しましょう。

カードタイプ:大きなカード(先頭のみ)

先頭の記事(エントリーカード)だけが大きくなるタイプです。

当然、他のタブ(「カテゴリーA」~「カテゴリーC」)でも同様に、先頭のみ大きくなります。

Cocoonで作れるサイト型トップページのバリエーション
Cocoonで作れるサイト型トップページのバリエーション

カードタイプ:大きなカード

先頭だけではなく、すべてのエントリーカードが大きくなるタイプです。(他のタブも同様)

Cocoonで作れるサイト型トップページのバリエーション
Cocoonで作れるサイト型トップページのバリエーション

カードタイプ:縦型カード2列

カードが縦型になって、横に2列で並ぶタイプです。(他のタブも同様)

Cocoonで作れるサイト型トップページのバリエーション
Cocoonで作れるサイト型トップページのバリエーション

カードタイプ:縦型カード3列

カードが縦型になって、横に3列で並ぶタイプです。(他のタブも同様)

Cocoonで作れるサイト型トップページのバリエーション
Cocoonで作れるサイト型トップページのバリエーション

フロントページタイプ:カテゴリごと

「かてごりごと」(以降の「カテゴリーごと(2カラム)」、「カテゴリーごと(3カラム)」も同様)は、「新着記事」+表示指定をした「カテゴリー」がすべて表示されるタイプです。

いろんな「カテゴリー」を表示させたい場合は、「フロントページタイプ」、この「カテゴリごと」に変更した方がいいでしょう。

カードタイプ:エントリーカード(デフォルト)

エントリーカードが標準の大きさで表示されるタイプです。

下の画像を見てわかるように、一番上に「新着記事」が表示され、以降は表示指定した「カテゴリー」が並びます。

Cocoonで作れるサイト型トップページのバリエーション
Cocoonで作れるサイト型トップページのバリエーション

カードタイプ:大きなカード(先頭のみ)

先頭のエントリーカードだけが大きくなるタイプ。

これは、「新着記事」の最初のエントリカードが、他の「カテゴリー」も最初のエントリーカードが大きくなります。

Cocoonで作れるサイト型トップページのバリエーション
Cocoonで作れるサイト型トップページのバリエーション

カードタイプ:大きなカード

先頭だけではなくすべてが大きくなるタイプ。

Cocoonで作れるサイト型トップページのバリエーション
Cocoonで作れるサイト型トップページのバリエーション

カードタイプ:縦型カード2列

カードが縦型になって、横に2列で並ぶタイプ。

Cocoonで作れるサイト型トップページのバリエーション
Cocoonで作れるサイト型トップページのバリエーション

カードタイプ:縦型カード3列

カードが縦型になって、横に3列で並ぶタイプ。

Cocoonで作れるサイト型トップページのバリエーション
Cocoonで作れるサイト型トップページのバリエーション

フロントページタイプ:カテゴリごと(2カラム)

この「カテゴリごと(2カラム)」と、次の「カテゴリごと(3カラム)」では、「新着記事」以外は、「カードタイプ」で指定する表示になりません。

つまり、「カードタイプ」の設定が有効になるのは、「新着記事」のみということなります。

これは、バグでもなんでもなく、「Cocoonの仕様」であることを理解してください。

逆に、「カテゴリごと(2カラム)」は「新着記事」以外に有効となります。

ちょっとややこしい仕様ですが、きちんと理解しましょう。

カードタイプ:エントリーカード(デフォルト)

エントリーカードが標準の大きさで表示されるタイプ。

Cocoonで作れるサイト型トップページのバリエーション
Cocoonで作れるサイト型トップページのバリエーション

カードタイプ:大きなカード(先頭のみ)

先頭のエントリーカードだけが大きくなるタイプ。

先にも書いたように、「新着記事」だけ先頭のエントリーカードが大きくなり、それ以外の「カテゴリー」は標準の大きさのエントリーカードになります。

Cocoonで作れるサイト型トップページのバリエーション
Cocoonで作れるサイト型トップページのバリエーション

カードタイプ:大きなカード

先頭だけではなくすべてが大きくなるタイプ。

これも、「新着記事」だけエントリーカードが大きくなります。

Cocoonで作れるサイト型トップページのバリエーション
Cocoonで作れるサイト型トップページのバリエーション

カードタイプ:縦型カード2列

カードが縦型になって、横に2列で並ぶタイプ。

これも、「新着記事」だけが縦型2列になります。

Cocoonで作れるサイト型トップページのバリエーション
Cocoonで作れるサイト型トップページのバリエーション

カードタイプ:縦型カード3列

カードが縦型になって、横に3列で並ぶタイプ。

これも、「新着記事」だけが縦型3列になります。

Cocoonで作れるサイト型トップページのバリエーション
Cocoonで作れるサイト型トップページのバリエーション

フロントページタイプ:カテゴリごと(3カラム)

先に書いたように、「カテゴリごと(2カラム)」と同様に、「カテゴリごと(3カラム)」では、「新着記事」以外は、「カードタイプ」で指定する表示になりません。

「カードタイプ」の設定が有効になるのは、「新着記事」のみです。

また、「カテゴリごと(3カラム)」は「新着記事」以外に有効となります。

カードタイプ:エントリーカード(デフォルト)

エントリーカードが標準の大きさで表示されるタイプ。

Cocoonで作れるサイト型トップページのバリエーション
Cocoonで作れるサイト型トップページのバリエーション

カードカードタイプ:大きなカード(先頭のみ)

先頭のエントリーカードだけが大きくなるタイプ。

「新着記事」だけ先頭のエントリーカードが大きくなり、それ以外の「カテゴリー」は標準の大きさのエントリーカードになります。

Cocoonで作れるサイト型トップページのバリエーション
Cocoonで作れるサイト型トップページのバリエーション

カードタイプ:大きなカード

先頭だけではなくすべてが大きくなるタイプ。

これも、「新着記事」だけエントリーカードが大きくなります。

Cocoonで作れるサイト型トップページのバリエーション
Cocoonで作れるサイト型トップページのバリエーション

カードタイプ:縦型カード2列

カードが縦型になって、横に2列で並ぶタイプ。

これも、「新着記事」だけが縦型2列になります。

Cocoonで作れるサイト型トップページのバリエーション
Cocoonで作れるサイト型トップページのバリエーション

カードタイプ:縦型カード3列

カードが縦型になって、横に3列で並ぶタイプ。

これも、「新着記事」だけが縦型3列になります。

Cocoonで作れるサイト型トップページのバリエーション
Cocoonで作れるサイト型トップページのバリエーション

Cocoonで「サイト型」のトップページを作るおすすめの設定

Cocoonで「サイト型」のトップページを作る場合、「フロントページタイプ」は、「カテゴリー」表示数の制限がある「タブ一覧」より、表示制限のない「カテゴリごと」がいいでしょう。

さらに「カテゴリごと」には、「カテゴリごと」、「カテゴリごと(2カラム)」、「カテゴリごと(3カラム)」の3種類ありますが、あまりエントリーカードを詰め込みすぎると、読む方も迷うことになるので、「カテゴリごと」、「カテゴリごと(2カラム)」がおすすめです。

カードタイプは好みなのでどれでもいいですが、画面サイズとの兼ね合いがあるので、大きいカードばかり表示させると、逆に表示されるエントリーカードが少なくなります。

なので、標準サイズ」のカードか、「縦型2列(またはタイルカード2列)」までがおすすめです。

クリックするだけでCocoonのスキンをリアルタイムに確認!
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次
閉じる