Cocoonのピックアップコンテンツ(おすすめカード)の作り方を解説

Cocoon

こんにちは、リュウスケです。

今日はこんな疑問に答えます。

WordPressテーマのCocoonでブログを運営しているんだけど、ブログのヘッダー部分にピックアップコンテンツ(おすすめカード)を作って表示させたいです。ただ、やり方がわからないので教えてほしい...。

リュウスケ
リュウスケ

この記事では、Cocoonブログのピックアップコンテンツ(おすすめカード)を作成方法と設定方法を実際の設定画面の画像付きで初心者向けにできるだけわかりやすく解説していきます。

 

Cocoonブログのピックアップコンテンツとは↓

みたいな感じでオススメの記事をヘッダーメニューの下に表示している部分のこと。

 

今回はこのピックアップコンテンツの作成方法と設定方法を解説します。

Cocoonブログのピックアップコンテンツの作成方法と設定方法を知りたいと思っている人は、
ぜひ最後までお付き合いください。

1:Cocoonのピックアップコンテンツ(おすすめカード)の作成方法

まず、WordPressのサイドバーの[外観]→[メニュー]をクリックしてメニューの設定画面に
移動してください。

 

移動したら↓みたいな感じのページに移動するので

 

[新しいメニューを作成しましょう]と書かれている部分をクリックして、メニューを新しく
作成してください。

※なお、今まで作成したメニューが無い場合は移動しないでOKです。

 

移動したら↓みたいなメニューの

 

[メニュー名]の部分にメニュー名を入力してください。今回は[ピックアップ]で設定します。

名前を設定したら[メニューを作成]をクリックして、新規でメニューを作成してください。

 

作成したら↓みたいな感じで

メニュー項目を設定する画面が出てきます。

メニュー項目には以下の↓

  • 固定ページ
  • 投稿
  • カスタムリンク
  • カテゴリー

 

の4種類がありますが、基本的にはピックアップコンテンツには投稿を乗せるのが良いかと。

投稿の項目部分で、ピックアップコンテンツ上に載せたい記事を検索するなどして見つけたら、
[メニューに追加]をクリックしてピックアップコンテンツに追加してください。

 

イメージ的には投稿の項目の中で、ピックアップコンテンツに乗せる記事を選び設定する感じ。

ちなみに、記事数は2列ずつ表示されるような感じになるので、個人的には4記事がオススメ。奇数だとスマホ表示の際に不自然になる上に2記事や6記事だと少なすぎたり多すぎたりと不自然になるので...。

 

で、最終的にはこんな感じになります↓

記事は上から順に、ピックアップコンテンツでは左から表示されるので、順番を変えたい場合は
ドラッグ&ドロップして変更してください。

設定出来たら[メニューを保存]をクリックして作成したメニューを保存しましょう。
これで、メニューの設定は完了です。

 

メニューの設定が済んだら、次にWordPressのサイドバーの[Cocoon設定]→[Cocoon設定]を
クリックしてCocoonの管理画面に移動してください。

 

移動したらこんな感じです↓

 

おすすめカードの設定画面に移動したらこんな感じです。

 

設定項目は以下の5つあります。

 

この中の設定項目はそれぞれ↓

  • おすすめカードの表示|全ページで表示
  • メニュー選択|ピックアップ(さっき作ったメニュー名)
  • 表示スタイル|画像下段を黒背景にしタイトルを重ねる
  • カード余白|チェックあり
  • カードエリア左右余白|チェック無し

 

みたいな感じで設定しておけばOK。

実際、このブログのヘッダー下のピックアップコンテンツは上の設定になっています。

 

設定が済んだら一番下の[変更をまとめて保存]をクリックして設定を保存してください。

 

で、最後に自分のサイトにアクセスして↓みたいな感じで

ピックアップコンテンツ(おすすめカード)が表示されていれば設定は完了です。

お疲れさまでした!!

まとめ

以上がCocoonブログのピックアップコンテンツ(おすすめカード)の作り方の解説でした。

この記事がCocoonのピックアップコンテンツ(おすすめカード)の作り方を知りたいと思っていた
人の参考になったら嬉しいです。

 

おわり。

タイトルとURLをコピーしました