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

Cocoonトップページサイト型タブCocoon

すごいテーマですね。Cocoonて。

Cocoon作者わいひらさんのツイート

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

今までサイト型のトップページにするには、固定ページを作ってなんやかんやカスタマイズ設定しないと無理だったんです!

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

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

例:カテゴリーごと表示にした当ブログのトップページ

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

ふつうの新記事一覧が並ぶトップページよりもカテゴリーごとの方が読者にも親切ですよね

今までのトップページ、新記事が一覧で並ぶ

Cocoonトップページをサイト型にする方法

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

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

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

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

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

新着記事と各カテゴリー記事をタブで切替られる機能です

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

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

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

表示カテゴリー

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

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

表示カテゴリーも選択しておきましょう

新着記事→カテゴリ1→カテゴリ2→・・・て感じにトップページが並びます

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

カテゴリ表示のところが2カラムになる
新着記事は2カラムにならないです

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

新着記事は3カラムになりません
カテゴリの表示部分が3カラムになります

サイドバーも表示していたら3カラムはちょっと見づらいかな

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

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

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

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

投稿→カテゴリ→各カテゴリーの編集ページ→URLのところをチェック!

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

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

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

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

カードタイプを変えてみるってやつです

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

ちょっとスクロールするとカードタイプがあります

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

縦型カード2列

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

エントリーカード

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

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

ちなみに画像の比率は黄金比に設定しています

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

本記事では【Cocoon】トップページがボタン1つでサイト型にできるようになった【衝撃】

ということで、Cocoonにおけるトップページの設定方法を画像をたくさん交えてお伝えしてきました。

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

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

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

いま私の気分とブログの回遊率はめっちゃ上がっています!

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

  • 見やすいブログ
  • お気に入りのブログ

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

Cocoon関連記事

本記事以外にもCocoonに関する記事を書いています。そちらもどうぞご覧になってください。

Cocoon歴1ヶ月くらいの人向け

【Cocoon】ボタンの使い方が余裕でわかるようになる【ブロックエディタ】
【Cocoon】スライドショーを設定する方法まとめ
【Cocoon】アイキャッチ画像サイズを統一して揃える設定方法
【Cocoon】アフィリエイト広告の貼り方を始めから丁寧に【解説】
【Cocoon】アドセンス広告の貼り方を始めから丁寧に【解説】
Cocoonスキン一覧まとめ!カスタマイズなしでもおしゃれに決まる
【Cocoonスキン】おすすめ4選!とにかくブログをいい感じにしたい
【Cocoon】固定ページを一覧表示させる方法【ヘッダー/フッターほか】
【Cocoon】記事の書き方!投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】
【Cocoon】パンくずリストを投稿/カテゴリー/固定の各ページに設置する方法
Cocoonブロック一覧!全機能まとめ【初心者向け】
【Cocoon】お問い合わせフォームの設置方法を初心者向けに画像たっぷりで説明する
【Cocoon】目次が表示されない⁉作り方完全解説
【Cocoon】投稿画面ツールバー機能一覧|文字色・ルビほか【初心者向け】
【Cocoon】サイドバーの基本的な使い方【初心者向け】
【Cocoon】吹き出しの基本的な使い方/右に変更など【初心者向け】

Cocoon歴半年くらいの人向け

【Cocoon】ショートコードの使い方!便利さをマジで知ってもらいたい
【Cocoon】Twitter(ツイッター)埋め込みは秒でできる
【Cocoon】テーブル/表を作成する方法を丁寧に解説(ブロックエディタ)
【Cocoon】行間と段落の間隔を調整する方法【初心者向け】細部にこだわろう
【Cocoon】トップページがボタン1つでサイト型にできるようになった【衝撃】
【Cocoon】カスタマイズまとめ!初心者でもわかりやすく解説
【Cocoon】リスト(箇条書き)をボックスに入れる超簡単な方法【カスタマイズ不要】
【Cocoon】ブログカードの基本的な使い方【初心者向け】
【Cocoon】サイドバーで目次をスクロール追従させる方法【初心者向け】

Cocoon歴がもっと長い人向け

【Cocoon】サイドバーカスタマイズ!カテゴリーのボックスメニューは意外と難しくない
【Cocoon】ブログカードカスタマイズ「続きを読む」を入れる/タイトルのみにする!
【Cocoon】目次カスタマイズ‼見やすくシンプルおしゃれにしよう【CSSコピペでOK】
【Cocoon】スマホ表示簡単カスタマイズ‼ハンバーガーメニューを固定追従させる

コメント

タイトルとURLをコピーしました