【Cocoon】トップページがボタン1つでサイト型にできるようになった【カスタマイズ】

Cocoonは2020年5月の更新でトップページをタブ切替したりカテゴリーごと表示したりすることがCocoon設定だけでできるようになりました。

カスタマイズのやり方を説明する記事も探せばたくさん出てきます。

でもこれからはそんなめんどくさいことしないでポチポチっと設定するだけで素敵なトップページができる！

僕自身がとてもうれしくなったし、この機能はぜひあなたにも知っておいてほしいと思ったので、やり方を記事にします。

Cocoonトップページ（フロントページ）をサイト型にする方法

それではやり方を見ていきましょう。まずはワードプレスの編集画面からCocoon設定→インデックスと進んでください。

そしたら一番上の項目のフロントページタイプに着目しましょう。

ここで設定が完結しますよ！

トップページをタブ切替できるようにする

トップページをタブ切替できるようにするには、フロントページタイプの表示形式をタブ一覧にして、変更をまとめて保存すればOKです。

上の画像にも書きましたが、注意事項が1個あってタブ切替で設定できるカテゴリーは3つまでです。

それ以上カテゴリーがあってもタブ切替できないので、よく読んでほしいカテゴリーを設定するようにしましょう。

タブ切替させるカテゴリーは表示カテゴリーで選びましょう。

トップページをカテゴリーごと表示させる

トップページをカテゴリごと表示させるには、フロントページタイプの表示形式をカテゴリごとにして、変更をまとめて保存すればOKです。

カテゴリごと(２カラム)にすると下の画像のような感じ

カテゴリごと(3カラム)にすると下の画像のような感じ

表示するカテゴリーの順番や表示する記事数を変更する

カテゴリ表示の順番を並び替えたいときは、文字通り「カテゴリ表示の順番を並び変える場合はこちら」のボタンを押します。

するとカテゴリIDを入力するところが出てきますので、表示したい順番でカテゴリIDをカンマで区切って記入しましょう。

カテゴリIDは下の画像のところで確認ができます。

表示する記事数を変更する場合は「カテゴリごと」表示でカード表示数を変更する場合はこちらを押します

そしたらエントリーカード表示数を選択するところが表示されるので、好きな数を選びましょう。

インデックスのカードタイプを変更するともっとよくなりそう

以上でトップページをカテゴリごとに表示させる方法は終わりなんですが、トップページがもっとよくなるかもしれない提案を1個します。

今までの設定と同様にCocoon設定→インデックスでカードタイプって項目を探してみてください。

おすすめは縦型カード２列

デフォルトのエントリーカードは下の画像みたいな感じ

ここら辺は好みですけどね、僕の設定は縦型カード２列です。

さらに同じ設定画面で「自動生成抜粋文字数」を「０」にするとまさに僕の設定と一緒になりますので、そこらへんも参考になればどうぞ。

トップページを工夫して気分も回遊率もあげよう！

本記事ではCocoonにおけるトップページの設定方法を画像をたくさん交えてお伝えしてきました。

個人的に「そろそろトップページをカスタマイズしたいな。。。」と思っていたタイミングでCocoonがアップデートしてくれたのでとてもうれしかったです。

普通のブログの記事一覧がだーっと並んでいるトップもいいっちゃいいんですが、飽きもあるし、回遊率もあんまり。

だからトップページをカテゴリごとに変更できて本当によかったです。

あなたのブログでもぜひこの設定をして

こういったものをつくり上げていってくださいね。

Cocoonの「困った」を解決する記事

Cocoonの使い方

当ブログで一番読んでいただきたいのはCocoonの使い方の記事です。以下の点を参考書のように体系的にまとめているので、まずはここから読み始めるのをおすすめします。

外観・デザインをカスタマイズ

特に本記事のようにブログの見た目をカスタマイズするのに使える記事は下記でまとめています。ブログをあなたらしくするためには必見です。
あわせて読みたい【Cocoon】デザインを整える簡単おすすめカスタマイズまとめ