トップページは、ブログのかおです。
初期の状態だと、新着記事だけが一覧で並んでいますよね。
新着記事だけの表示よりも、カテゴリー別にも表示されると、さらにブログの記事が見やすくなります。
今回は、トップページにカテゴリー別と新着記事の両方を表示する方法を紹介します。
新着記事の下にカテゴリー別に記事を表示させる方法
ワードプレスにログインして、ダッシュボードから「Cocoon設定」→「Cocoon設定」をクリックします。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/sketch-1642380544107.jpg?resize=517%2C552&ssl=1)
「Cocoon設定」上側のメニューから、「インデックス」を選びます。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/sketch-1642380660913.jpg?resize=810%2C267&ssl=1)
「リスト設定」の画面が表示されるので、個別に設定していきます。
まずは、カテゴリーの設定を行います。
カテゴリーの表示形式
カテゴリーの「表示形式」を選びます。一つずつ説明します。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/sketch-1642380874715.jpg?resize=577%2C354&ssl=1)
【一覧(デフォルト)】
初期の設定で、新着記事がそのまま一覧で表示されます。
【タブ一覧】
記事一覧の上側に、カテゴリータブが表示されます。カテゴリーをクリックすると、タブが切り替わります。
表示できるカテゴリーは、3つまでです。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/sketch-1642381063097.jpg?resize=519%2C447&ssl=1)
【カテゴリごと】
新着記事とカテゴリー別記事が、たて一覧に表示されます。カテゴリーが多いと、トップページがたてに長くなります。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/sketch-1642381253882.jpg?resize=514%2C504&ssl=1)
【カテゴリごと(2カラム)】
カテゴリー別に、2カラムで表示されます。カテゴリーが多い場合は、2カラムにすると、見やすくなります。
カラムでサイドバーを表示させたい場合は、こちらを選びます。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/20220117_100219.jpg?resize=513%2C497&ssl=1)
【カテゴリごと(3カラム)】
新着記事はそのままで、カテゴリー別に3カラムで表示されます。
サイドバーは、表示されません。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/20220117_100644.jpg?resize=502%2C340&ssl=1)
表示カテゴリーの個別設定
「表示カテゴリー」は、表示したいカテゴリーにチェックを入れます。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/sketch-1642381789369.jpg?resize=551%2C473&ssl=1)
表示の順番を変えたい場合は、「カテゴリ表示の順番を並び替える場合はこちら」を選びます。
表示数を変えたい場合は、『「カテゴリごと」表示でカード表示数を変更数を場合はこちら』を選びます。
カテゴリ表示の順番を並び替える方法
ワードプレスのダッシュボードから、「投稿」→「カテゴリー」をクリックします。
表示されたカテゴリーのIDの数字を控えます。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/sketch-1643436122939.jpg?resize=578%2C657&ssl=1)
このIDをカンマで区切って入力すれば、カテゴリーの表示の順番が変更できます。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/sketch-1643436616523.jpg?resize=638%2C132&ssl=1)
カテゴリー記事の設定は、これで終わりです。
次は、新着記事のカードタイプを設定します。
新着記事のカードタイプの表示方法
カードタイプの表示方法を選びます。
この設定は、新着記事のみに反映されます。
【エントリーカード(デフォルト)】
初期の設定で、たてに一覧で表示されます。
【大きなカード(先頭のみ)】
一番目の記事のみ、大きなカードが表示されます。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/20220117_101125.jpg?resize=485%2C494&ssl=1)
【大きなカード】
全ての新着記事が、大きなカードで表示されます。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/20220117_101252.jpg?resize=510%2C601&ssl=1)
縦型カードと、タイルカードの表示の違いは、並びが縦型はキレイに揃いますが、タイルは少しずれて表示されます。
【縦型カード2列】
新着記事が、縦2列に並びます。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/20220117_101404.jpg?resize=547%2C574&ssl=1)
【縦型カード3列】
新着記事が縦3列に並びます。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/20220117_101426.jpg?resize=498%2C406&ssl=1)
【タイルカード2列】
タイルカードが2列に並びます。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/20220117_101559.jpg?resize=478%2C518&ssl=1)
【タイルカード3列】
タイルカードが3列に並びます。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/20220117_101627.jpg?resize=510%2C435&ssl=1)
まとめ
今回は、トップページに新着記事とカテゴリー別の記事を表示する方法を紹介しました。
新着記事だけの表示だと、いろんなカテゴリーの記事が混ざっているので、記事を探すのが大変です。
それがカテゴリー別に記事を表示するだけで、一気にトップページの記事が見やすくなります。
ぜひ今回の記事を参考に設定してみて下さい。