前回、前々回に続いて今回は「おすすめカード」の設定方法を紹介しようと思う。
前回の「アピールエリア」と、前々回の「ブログカード」の設定方法は下より。
-
-
テーマ【Cocoon】の【アピールエリア】設置方法
続きを見る
-
-
テーマ【Cocoon】のブログカードの設定方法
続きを見る
例によって「WordPress」のテーマ「Cocoon」の環境なのであしからず。
おすすめカードとは
![](https://nobunblog.com/wp-content/uploads/2021/02/tachina-lee-wjk_SSqCE4-unsplash-1024x683.jpg)
僕のブログだとこれ。
![](https://nobunblog.com/wp-content/uploads/2021/03/c47fffc7295317624e4c32209a7dbffe-1024x244.png)
アピールエリアの下にある、4つの画像のこと。
左から「ゲーム」、「ラルク」、「松屋」、「生活系」の4つの記事。
ヘッダーの下に設定させることで、紹介したい記事のジャンルを、目立たせることができる。
ブログカードとの違い
![](https://nobunblog.com/wp-content/uploads/2021/03/compare-5201278_1280-1024x682.jpg)
「目立たせたい」という意味では、ブログカードと一緒だが、この2つには違いがある。
記事の数
「ブログカード」は1つの記事を目立たせるのに対して、「おすすめカード」は複数の設定することが可能。画像の種類も、それに比例するので目立たせることができる。
カデゴリー別に設定
「ブログカード」は記事そのものだが、「おすすめカード」は記事のカデゴリー、例えば僕のブログの場合は。「ゲーム」や「松屋」などのことである。
訪問者からしたら「このブログには何が載っているんだろう?」と迷わずに自分の好きなジャンルの記事を、見つけることができる。
注意
![](https://nobunblog.com/wp-content/uploads/2021/03/red-2708362_1280-1024x682.jpg)
設定するにあたって、最初に頭に入れておいてほしいことがある。
ちょっと面倒?
この後説明をするけど人によっては面倒かもしれない。
「アピールエリア」と「ブログカード」はCocoon設定で割とシンプルにできるけど、「おすすめカード」はそれ以外も使うからである。ただ、これは慣れれば、そこまで大変ではないので、問題ないと思う。
説明
というわけで、設定方法を説明していこうと思う。
その前に、過去作ってある記事に、カデゴリー設定をしてあるかチェックしてほしい。
これを設定しておかないと、何も始まらないので要チェック。
1、まずは、過去記事の、編集画面より「カデゴリー」でその中で、対象のジャンルにチェックを入れる。自分のブログの場合には、「ブログ」にチェックを入れている。
※ない場合は「新規カデゴリー追加をクリック」して追加させる。
![](https://nobunblog.com/wp-content/uploads/2021/03/8ef77dfc3db2e6726dc43a6b87eb8ab2.png)
2、次に「投稿」の「カデゴリー」をクリック。
![](https://nobunblog.com/wp-content/uploads/2021/03/45bb22007810ec27f918b3bc7d46e6ce.png)
下のような画面になる。
![](https://nobunblog.com/wp-content/uploads/2021/03/f90c7ffb871a18afc7b24f0c51086717-1024x512.png)
3、自分が選ぶ、対象のカデゴリーをクリック。ポインターを合わせて「編集」でOK。
※ここは「画像」を設定するのですでにしていれば飛ばしてOK。
![](https://nobunblog.com/wp-content/uploads/2021/03/3557eb0798e2b94815281e8a9fa03f80.png)
4、「カデゴリーを編集」になる。下までスクロールして
![](https://nobunblog.com/wp-content/uploads/2021/03/4d299d5724e954746832ead414d89895-1024x620.png)
「アイキャッチ」で好きな画像を選択で保存。
画像を設定しておかないと空白になってしまう。
![](https://nobunblog.com/wp-content/uploads/2021/03/d1aa1f96fd157c9c19057505f14b8458.png)
5、次に「外観」の「メニュー」をクリック。
![](https://nobunblog.com/wp-content/uploads/2021/03/c43efc566b9c0eb18d4c7e1db3225c0c-1.png)
下のような「メニュー」画面になる。
![](https://nobunblog.com/wp-content/uploads/2021/03/cf8b0539c47b073d3ebb915faa0eb3bc-1024x504.png)
すでにメニューがある場合は、「編集するメニューを選択」で選ぶ。
新しく作る場合は、「新しくメニューを作成」をクリック。
![](https://nobunblog.com/wp-content/uploads/2021/03/d2ce36490a1ecdaaeed5fa4e8885349f-1024x224.png)
新しくメニューを作成場合は、「メニュー名」に名前を入れて「メニューを保存」をクリック。
![](https://nobunblog.com/wp-content/uploads/2021/03/a120f95ee43900634d6cc261e54875b6-1024x129.png)
6、「カデゴリー」より表示させたいカデゴリーにチェックを入れる。
![](https://nobunblog.com/wp-content/uploads/2021/03/ad0cb3ee69c837d6af39ab628a432f0c.png)
7、下のようになる。順番を変えたい場合は、対象のカデゴリーをクリックした状態で上や下に移動させ離すと、順番が変わる。
![](https://nobunblog.com/wp-content/uploads/2021/03/f6e636dab7312ef80767d3ce84a558f6-1024x584.png)
例えば「ラルク」と「松屋」の順番を変えたい場合、「松屋」をクリックした状態で、上に移動させると
![](https://nobunblog.com/wp-content/uploads/2021/03/bcea598d28a120a31fbce0138c76cbc4.png)
「松屋」が上にきて、「ラルク」が2番目に配置させられる。
![](https://nobunblog.com/wp-content/uploads/2021/03/04173ea0d6f97e47d2a43527c345f325.png)
8、次に「Cocoon」の「おすすめカード」をクリックすると、下の画面になる。
ここで色々設定できる。
![](https://nobunblog.com/wp-content/uploads/2021/03/8e419afa424634cbcc4bb48a78238e2b-1024x455.png)
おすすめカードの表示
表示させたい場所の設定。自分は「全ページで表示」で設定。
メニュー選択
先ほど「外観」の「メニュー」で作ったメニューの選択。自分の場合は「おススメカード2」のこと。
表示スタイル
下のように変更できる(口で説明するよりは画像を見た方が分かりやすいと思った)。
- 画像のみ
![](https://nobunblog.com/wp-content/uploads/2021/03/432d96e3462dbd8206a2722ea858df78-1024x210.png)
2. 画像中央に白文字タイトル
![](https://nobunblog.com/wp-content/uploads/2021/03/9b9ae88bd183258b688825d7223d7f0e-1024x198.png)
3. 画像中央にラベルでタイトル
![](https://nobunblog.com/wp-content/uploads/2021/03/16a21e38a70f25ee2a368d20fdbdcb95-1024x178.png)
4. 像下段を黒背景にしタイトルを重ねる
![](https://nobunblog.com/wp-content/uploads/2021/03/b2064205d40a8bc3b8013838627e15e7-1024x192.png)
5. カード余白(カードとカードの間に、空白を入れられる。下は、チェックが入っていない)
![](https://nobunblog.com/wp-content/uploads/2021/03/ca2ef866928d11e74afd4e66ff08e57e-1024x203.png)
6. カードエリア左右余白
パソコン表示のみ、カードエリアは、画面の幅いっぱいに表示されるので、
チェックを入れることで空白を設定できる。
僕の場合は、よく分からなかったので、どっちでもいいと思っている。
おしゃれになった(気がする)
以上が、おすすめカードの紹介である。
やっぱり設定しておくと見た目も分かりやすくなるし、来てくださった方にも分かりやすくなると思っている。「このブログではこんな記事書いているんだ~」みたいに。
まだ、こんなシンプルな方法しか知らないけど、また新しい発見があったら、また記事にしようと思う。