【超簡単】cocoonのトップページにカテゴリ別を出す方法

cocoon

cocoon使用者でトップページ(フロントページ)を変えたい!という方必見!

2020年6月のcocoonアップデートにより簡単にサイト型みたいにトップページの表記を変えられる機能が追加されました。

 

現在cocoonのトップページをサイト型みたいに変える方法は2つあります。

  • カスタマイズする
  • cocoonの機能を使う

 

僕も過去にテーマcocoonで、トップページのカスタマイズに挑戦しましたが、ブログ初心者にはハードルが高い……。

しかし、cocoon新機能を使うやり方なら、ブログ初心者でも簡単にできちゃいます!

 

■トップページにカテゴリを入れる方法が知りたい
■サイト型みたいなトップページにしたい
■カスタマイズは大変でもう嫌!

 

このような方に向けて、わずか4クリックでサイト型トップページに変える方法をお伝えしていきます。

カテゴリ別を入れることで、サイト内の回遊率も上げることができますので、ぜひ、ご参考ください。

cocoonトップページにカテゴリを出す方法【クリックのみでOK】

cocoonのトップページにカテゴリを入れて、サイト型のようにする手順は、2つです。

■インデックスページを出す
■表示形式より好みのトップページを選択

 

操作自体は4クリックで終了しますので、超簡単です。

30秒もあれば、自分のサイトトップページにカテゴリ別を入れることができます!

 

それでは、図でわかりやすく、手順を解説していきます。

 

手順①cocoon設定→インデックス

ワードプレスの管理画面左メニューより「cocoon設定」にカーソルを合わせ、右側に出てくる「cocoon設定」をクリック。

 

cocoon設定のメニューが表示されますので、「インデックス」をクリック

 

下記のページが出てくればOK!

 

インデックスからサイトのトップページを変更することができます。

 

手順②リストを選択

フロントページタイプの「表示形式」から、好みのタイプを選択

 

図マークにカーソルを合わせることで、それぞれのイメージを見ることができます。

 

お気に入りの表示形式が見つかったら、チェックを入れます。

後は、画面一番下の保存ボタンを押せば完了です。

 

簡単ですね!

次に、イメージ図を加えて表示形式について解説していきます。

 

cocoonトップページのカテゴリ表示形式

cocoonのトップページは5つの表示形式から選ぶことができます。

■デフォルト
■タブ一覧
■カテゴリごと
■カテゴリ(2カラム)
■カテゴリ(3カラム)

各表示形式ごとに画像を載せて解説しています。

ブログのコンセプトに合うような表示形式の参考にしてください。

※画像はPCからの見え方となります。

 

デフォルト

何も設定をしていない場合は、新着記事が並ぶ表示になります。

新着記事のみとなり、カテゴリ表示はされません。

一日に何記事も上げる場合や、ツイッター流入を狙う場合によさそうですね。

 

タブ一覧

トップページ上部にカテゴリごとのタブが表示されます。

タブをクリックすると、そのカテゴリの一覧が表示されます。スクロールいらず!一瞬でカテゴリ別に誘導したい方におすすめですね。

 

スマホでは、タブ一覧が2列表示になります。

 

カテゴリ別

新着ページ→各カテゴリの順番で表記されます。

1記事ごとに説明文が載りますので、クリック率向上につながるかも。

シンプルなカテゴリ分けが良い!というときにおすすめです。

 

スマホ表示では説明文は乗らず、アイキャッチとタイトルのみとなります。

 

カテゴリ別(2カラム)

新着ページ→カテゴリ2列の順番で表記されます。

タイトルとアイキャッチのみで、説明文は乗りません。1画面に多くの記事を見せたい方におすすめですね。

※僕は2カラムを使用しています。

 

スマホでは、1列表記となります。

 

カテゴリ別(3カラム)

新着ページ→カテゴリ3列の順番で表記されます。

タイトルとアイキャッチのみとなりますが、シンプルなタイトルの方が見やすそうです。

カテゴリがたくさんある!という方は、すっきりさせることができますね。

 

スマホでは、1列表記となります。

cocoonの備わってる機能でトップページをカスタマイズ

cocoonでは、アイキャッチやタイトルの表記を変えることができ、カードといいます。

こちらも操作は簡単ですので、上記で選択したトップページの表示形式に合うブログカードを見つけてみてください。

 

カードタイプの選択

インデックスページの中央部分の「カードタイプ」から、好みのカード表記を選択

カテゴリ選択時と同様、図のマークにカーソルを合わせることでイメージ図を見ることができます。

 

カードの種類

カードの種類は主に二つの形に分けられます。

■アイキャッチのにタイトル
■アイキャッチのにタイトル

 

アイキャッチの横にタイトルや説明文を表記する形は「エントリーカード」と呼び、下記のようなイメージとなります。

 

アイキャッチの下にタイトルや説明文を表記する形は「大きなカード」「縦型カード」「タイルカード」の3種類で、下記のようなイメージです。

  • 大きなカード…アイキャッチ+タイトル
  • 縦型カード…アイキャッチ+タイトル+説明文
  • タイルカード…アイキャッチ+タイトル

 

僕はデフォルトでもあるエントリーカードを使用していますが、アイキャッチで引く付けたいという方は、縦型カードを選択してもよいですね。

 

cocoonトップページにカテゴリを表示させアピールしよう!

僕は、cocoonのトップページにカテゴリ別を入れたことで、サイト内の回遊率が上がりました。

記事の数やジャンル、サイト運営のコンセプトによって、どのように表記していくかは分かれてくると思いますが、トップページでの離脱率が多いのであれば試す価値はありますね。

 

■インデックスからいつでも変更可能
■PCとスマホの表記は異なる
■カードタイプも合わせて変えよう
上記のポイントを念頭に置き、ぜひ、自分好みのトップページを作成してみてください。

 

コメント