【cocoon】記事カテゴリーをトップページに表示させる方法

こんにちは、わぁちゃんです。

無料だしプラグイン入れなくてもいろいろな機能が使えて扱いやすいcocoonを今も使用しているのですが、よく「デザイン凝ってますけど、テーマは有料テーマですか？」と聞かれます。

有料テーマじゃなくて無料テーマなのよ！とお伝えしているのですが、なぜいつも有料テーマかと思われるか考えてみたところ、トップページにあるカード表示のデザインが原因かな？というところに行きつきました。

今回はトップページに記事カテゴリーを表示させる方法について紹介していきます。

 

 

 

 

 

 

 

カテゴリーのアイキャッチ画像を設定する

まず、トップページに表示させたいカテゴリーのアイキャッチ画像を設定していきます。

 

アイキャッチ画像がまだ作れていない方は、このタイミングで作っちゃいましょう！

 

 

 

投稿→カテゴリー

 

投稿にある「カテゴリー」を開きます。

すると、投稿記事を作成した際にカテゴリー分けしているものの一覧が出てきます。

トップページに表示したいカテゴリーが決まったら、そのカテゴリー名の下にある「編集」をクリックします。

 

 

 

編集でアイキャッチ画像を作成する

 

スクロールすると、「アイキャッチ」という項目があるので、アイキャッチの「選択」をクリックしてカテゴリーのアイキャッチ画像を設定します。

設定したら、一番左下に「更新ボタン」があるので、更新して保存してください。

 

 

 

 

 

メニューを作成する

カテゴリー画像の設定ができたら、次はメニューを作成します。

ダッシュボードの外観からメニューを開いてください。

cocoon設定から設定する際、メニューをつかうので事前に作っておきます。

おすすめカードを作る

 

「新しいメニューを作成しましょう」というところから、新規メニューを作っていきます。

メニュー構造にある「メニュー名」におすすめカードと入力し、メニューを作成。

そして、カテゴリーからトップページに表示したいカテゴリーを選びましょう。

 

 

 

 

メニュー設定は、どこにもチェック入れずに、メニューを保存します。

 

cocoon設定で完了

最後にここまで準備してきたものをcocoon設定で反映させます。

cocoon設定→おすすめカード

 

cocoon設定より「おすすめカード」を開きます。

 

 

 

 

おすすめカードの表示

このカテゴリーをどこで表示するか設定できます。

わたしは全ページで表示していますが、見にくい方はフロントページのみでもいいかも。

 

メニュー選択

ここでのメニュー選択では、必ずさっき事前につくっておいた「おすすめカード」のメニューを設定してください。

でないと、せっかくアイキャッチ画像の設定をしたのに表示されなくなってしまいます。

 

表示スタイル

カテゴリーの表示の仕方を設定します。

固定ページや投稿ならタイトルなどあってもいいかもしれませんが、カテゴリーは画像で目立たせたいので、私は画像のみにしています。

 

カード余白/カードエリア左右余白

アイキャッチ画像に余白をつけるかどうかということです。

余白をつけると、アイキャッチ画像ごとの間隔が広くなります。

私はカード余白はつけていますが、カードエリア左右余白はつけていません。

 

全てを設定したら、「変更をまとめて保存」を忘れずに押してくださいね。

 

これで終了です！

サイトトップページで確認してみてください。

 

 

まとめ《初心者でも3工程でできる》

記事カテゴリーをトップページに表示するのは、準備も含めて3工程でできました。

 

 

カテゴリー記事ではなく、記事単体での設置もできるので、プロフィールや絶対見てほしい記事を固定するのにも使用できます。

初心者でも簡単に設定ができたので、デザインを変化させたい方はぜひ参考にしてみてください。