![](http://www.akira-blog.site/wp-content/uploads/2023/04/komatta_man2.png)
Cocoonの「おすすめカード」ってどんな機能なの?
Cocoonの「おすすめカード」は固定ページや、おすすめしたい記事のリンクを画像付きで表示してくれる機能です。
![管理人](https://www.akira-blog.site/wp-content/uploads/2023/04/xh3dg9.jpg)
この記事では、WordPressテーマCocoonの「おすすめカード」の設定方法と使い方を紹介します。
Cocoon おすすめカード【設定方法】
おすすめカードを設定することで「トップページ」や「サイドバー」におすすめのページのリンクを設置できるようになります。
⬇⬇ トップページ ⬇⬇
![トップページ](http://www.akira-blog.site/wp-content/uploads/2023/06/Compress_20230603_155553_3754-1021x1024.jpg)
⬇⬇ サイドバー ⬇⬇
![サイドバー](http://www.akira-blog.site/wp-content/uploads/2023/06/Compress_20230603_155553_3881-902x1024.jpg)
おすすめカードのメニュー作成
「管理画面」から「外観」→「メニュー」をクリックします。
![メニューをクリック](http://www.akira-blog.site/wp-content/uploads/2023/06/Compress_20230603_161250_0453-1024x600.jpg)
「新しいメニューを作成しましょう。」をクリックして、新しいメニューを作ります。
![新しいメニュー](http://www.akira-blog.site/wp-content/uploads/2023/06/Compress_20230603_161250_0377-1024x544.jpg)
「メニュー名」のところに「おすすめカード」と入力して「メニューを作成」をクリックします。
メニュー名は自分のわかるように名前を入力して大丈夫です。
![メニュー名を決める](http://www.akira-blog.site/wp-content/uploads/2023/06/Compress_20230603_161250_0291-1024x729.jpg)
「編集するメニューの選択」に先程作成したメニュー名表示されているのを確認します。
![メニューができたか確認](http://www.akira-blog.site/wp-content/uploads/2023/06/Compress_20230603_161250_0169-1024x815.jpg)
これで「おすすめカード」のメニューができました。
メニューに項目を追加
「おすすめカード」のメニューができたので、何をリンクするのか項目を追加してメニューに完成させていきましょう。
今回は、
- カテゴリー
- カテゴリー
- 投稿
- 投稿
の4つのリンクを追加しています。
カテゴリーを追加していきましょう。
「メニュー項目を追加」の項目から「カテゴリー」をクリックします。
![カテゴリーをクリック](http://www.akira-blog.site/wp-content/uploads/2023/06/Compress_20230603_171256_6112-1024x803.jpg)
カテゴリーの中から追加したいカテゴリーを選びます。チェックをいれたら「メニューに追加」をクリックします。
![メニューに追加](http://www.akira-blog.site/wp-content/uploads/2023/06/Compress_20230603_171256_6280-1024x804.jpg)
「メニュー構造」の中に追加したカテゴリーが追加されていたら追加されたことになります。
![投稿が追加されたか確認](http://www.akira-blog.site/wp-content/uploads/2023/06/Compress_20230603_171256_6385-1024x957.jpg)
次に「投稿」を追加していきます。
「メニュー項目を追加」から「投稿」をクリックします。
![投稿を選択](http://www.akira-blog.site/wp-content/uploads/2023/06/Compress_20230603_202827_7901-1024x957.jpg)
追加したい投稿にチェックをいれたら「メニューに追加」をクリックします。
![メニューに追加](http://www.akira-blog.site/wp-content/uploads/2023/06/Compress_20230603_202828_8050-1024x949.jpg)
「メニュー構造」の中に追加した「投稿」が表示されていたら追加できています。
![投稿が追加したことを確認](http://www.akira-blog.site/wp-content/uploads/2023/06/Compress_20230603_202828_8150-1024x988.jpg)
追加したい項目をすべて追加したら「メニューを保存」をクリックします。
追加できる項目の種類
おすすめカードに追加できる項目の種類を紹介します。
- 固定ページ
- 投稿
- カスタムリンク
- カテゴリー
・固定ページ
自分が作った、固定ページを追加することができます。
・投稿
自分が投稿した、投稿ページを追加することができます。
・カスタムリンク
自分が作っていない、外部リンクを追加することができます。
・カテゴリー
自分が作った、カテゴリーを追加することができます。
Cocoon おすすめカード【使い方】
「おすすめカード」の設置方法を紹介します。
トップページにおすすめカード設置
「管理画面」から「Cocoon設定」→「Cocoon設定」をクリックします。
![Cocoon設定](http://www.akira-blog.site/wp-content/uploads/2023/06/Compress_20230603_221913_3040.jpg)
Cocoon設定の項目から「おすすめカード」をクリックします。
![おすすめカード選択](http://www.akira-blog.site/wp-content/uploads/2023/06/Compress_20230603_221912_2893-695x1024.jpg)
おすすめカードの項目を設定していきましょう。
- おすすめカードの表示
- メニュー選択
- 表示スタイル
- カード余白
- カードエリア左右余白
・おすすめカードの表示
トップページに表示させる場合は「フロントページのみで表示」を選択します。
・メニュー選択
先程作成した「おすすめカード」を選択します。
・表示スタイル
どのように表示させるかを選択します。アイキャッチの種類で表示スタイルを決めましょう。
紹介しているブログはアイキャッチに文字も入っているので「画像のみ」を選択しています。
・カード余白
選んだおすすめカードを余白をつけるか、つけないかを選択します。
・カードエリア左右余白
パソコンで表示させる時に、左右に余白をつけるかつけないかを選択します。
設定が決まったら「変更をまとめて保存」をクリックして設定完了です。
トップページを確認してみましょう
サイドバーにおすすめカード設置
「管理画面」から「外観」→「ウェジェット」をクリックします。
![ウェジェットをクリック](http://www.akira-blog.site/wp-content/uploads/2023/06/Compress_20230604_211202_2169-1024x910.jpg)
[C]おすすめカードをクリックして、「サイドバー」をチェックします。
チェックしたら「ウェジェットを追加」をクリックします。
![サイドバーにウェジェット追加](http://www.akira-blog.site/wp-content/uploads/2023/06/Compress_20230604_211201_1851-904x1024.jpg)
サイドバーの項目に「おすすめカード」が追加されているのを確認します。
「タイトル」にサイドバーを開いたときに表示されるタイトルを入力します。
![タイトル入力](http://www.akira-blog.site/wp-content/uploads/2023/06/Compress_20230604_211201_1985-606x1024.jpg)
「メニュー名」に先程作成した「おすすめカード」を選択します。
![おすすめカード選択](http://www.akira-blog.site/wp-content/uploads/2023/06/Compress_20230604_211202_2073-613x1024.jpg)
・表示スタイル
どのように表示させるかを選択します。アイキャッチの種類で表示スタイルを決めましょう。
・余白を有効にする
選んだおすすめカードを余白をつけるか、つけないかを選択します。
![保存](http://www.akira-blog.site/wp-content/uploads/2023/06/Compress_20230604_215555_5850-722x1024.jpg)
設定が終わったら「保存」をクリックして、設定完了になります。
実際のサイトをひらいて、確認してみましょう。
![](http://image.moshimo.com/af-img/1762/000000038395.png)
おすすめカードの余白が気になる
おすすめカードを設定してみて余白が気になるかたは下記の記事で変更方法を説明しています。
コメント