【Cocoon/カスタマイズ】ヘッダー下の画像リンク「おすすめカード」を表示させる

Cocoon
まちゃりさ
まちゃりさ

こんにちは、まちゃりさです。

おすすめカード」は、Cocoonで標準搭載されている機能の1つです。

次のように、ヘッダーの下に「画像リンク」を並べて表示させることができる機能です。

おすすめカードのイメージ

 

本記事では、Cocoonのおすすめカードを設定するやり方について、丁寧に解説していきます。

本記事を読むことで、誰でも簡単に「おすすめカード」を設定することができます。

それでは、どうぞ!

スポンサーリンク

【Cocoon】「おすすめカード」を設定するメリット

Cocoonの「おすすめカード」を使えば、簡単にヘッダー下に画像付きカテゴリーや、見てほしい記事のリンクを作ることができます

 

うまく表示させることで、ブログ閲覧者の回遊率を上げることも期待できます。

Cocoonなら、コードを使うことなく簡単に設置できるので、是非やってみましょう!

 

ちなみに表示するカード数は、偶数個がおすすめです。

モバイル表示できれいに見えるためです。

メニュー数7個と8個で、見え方の比較をしてみました。

▼PC表示の比較

PC表示の比較
PC表示の比較

▼モバイル表示の比較

モバイル表示の比較
モバイル表示の比較
まちゃりさ
まちゃりさ

モバイル表示の場合は、偶数個の方がきれいに見えるので覚えておきましょう。

また、メニュー数を多くしすぎるとトップページがごちゃつきます。

多くても、6個くらいがおすすめです。

↑目次に戻る

【Cocoon/カスタマイズ】「おすすめカード」を表示させるやり方

ここからは、実際にCocoonで「おすすめカード」を表示させるやり方を、画像付きで紹介していきます。

本記事を見ながら一緒に設定していくことで、簡単に「おすすめカード」を表示させることができます。

まちゃりさ
まちゃりさ

最後まで一緒にがんばりましょう!


今回は、下のようなイメージで「大カテゴリー」ごとの画像リンクを表示させるやり方について、ご紹介します。

おすすめカードのイメージ

次の4つのステップで実施していきます。

  1. テーマのバックアップ
  2. 画像の準備
  3. 「おすすめカード」用メニューの作成
  4. 「おすすめカード」の設定

↑目次に戻る

事前準備① テーマのバックアップ

「テーマをいじるのが不安」という方は、あらかじめバックアップを取っておきましょう

今後もCocoonで「Cocoon設定」をいじる場合は、常に行っておくことをおすすめします。

(Cocoon設定以外をいじる場合は、ワードプレスのバックアップも取っておきましょう)

デザインをいじった後、おかしくなった場合、もとに戻すことができます。

なお、設定の変更は自己責任にて実施をお願いします。

 

▼テーマのバックアップのやり方

ワードプレス管理画面の[Cocoon設定]→[バックアップ]をクリックし、

[Cocoon設定]→[バックアップ]をクリック
[Cocoon設定]→[バックアップ]をクリック

バックアップファイルの取得」をクリックする。

「バックアップファイルの取得」をクリック
「バックアップファイルの取得」をクリック

取得したファイルは、専用のフォルダを作成して保存しておきましょう。

バックアップファイルを保存する
バックアップファイルを保存する

↑目次に戻る

事前準備② 画像の準備と登録

私のように「大カテゴリー」をおすすめカードに表示させる場合、カテゴリーごとに画像を作成登録する必要があります。

 

カテゴリーごとの画像を作成する

カテゴリーごとのイメージ画像を作成します。

画像作成のツールは、何を使っても問題ありませんが、私は「CanvaPro」を利用しています。

チーム利用のため、たったの月額200円ほどで利用できています。

「CanvaPro」を使用することのメリットは、次のとおり。

  • 7500万点以上のイメージ画像が用意されている(便利)
  • 画像のリサイズが可能(便利)
  • 画像背景を消すことができる(便利)
  • フォント種類が充実している
  • 編集がしやすい

1ヶ月の無料トライアルもできるので、どんなものか試してみるのもおすすめです

CanvaProのトライアルはこちらから

 

 

作成する画像は、どのくらいのサイズがよいか、気になりますよね?

そこで、今回は画像のサイズによる違いがあるかを検証してみました。

比較したのは、【1200×630】ピクセルと【1920×1280】ピクセルです。

まちゃりさ
まちゃりさ

結論、見え方による違いは、ほとんどありませんでした

▼PC表示の比較

PC表示の比較
PC表示の比較

▼モバイル表示の比較

モバイル表示の比較
モバイル表示の比較

ただ、画像作成後に「やっぱりサイズが違った・・・」という時にすぐに変更ができるので、「CanvaPro」で作っておくとかなり便利です。

↑目次に戻る

カテゴリーページに画像を登録する

つづいて、作成した画像をカテゴリーページに登録します。

ワードプレス管理ページの「投稿」→「カテゴリー」をクリックし、おすすめカードに表示させたい「カテゴリー」の編集ページまで進みます。

「投稿」→「カテゴリー」をクリック
「投稿」→「カテゴリー」をクリック

[アイキャッチ]欄に、設定したい画像を登録します。(「選択」をクリックし、画像名を選択する)

[アイキャッチ]欄に設定したい画像を登録
[アイキャッチ]欄に設定したい画像を登録

これで準備OKです。

↑目次に戻る

「おすすめカード」用メニューの作成

最初に「おすすめカード」用のメニューを作成しておく必要があります。

 

▼やり方:「おすすめカード」用のメニューを作成する

ワードプレス管理ページの「外観」→「メニュー」を選択します。

「外観」→「メニュー」をクリック
「外観」→「メニュー」をクリック

[新しいメニューを作成しましょう]をクリックします。

「新しいメニューを作成しましょう」をクリック

 

メニュー名にそれらしい名前を付けて[メニューを作成]を選択します。

まちゃりさ
まちゃりさ

ここでは、そのまま「おすすめカード」とします。

「メニュー名」をつけ、「メニューを作成」をクリック
「メニュー名」をつけ、「メニューを作成」をクリック

 

左側の「カテゴリー」項目から「おすすめカード」に表示させる項目を選択します。

「大カテゴリー」にチェックを入れて、[メニューに追加]をクリックします。

「固定ページ」や「投稿記事」などを選択することも可能です。

カテゴリーをメニューに追加
カテゴリーをメニューに追加

 

右側に、大カテゴリーが追加されました!

メニューにカテゴリーが追加される
メニューにカテゴリーが追加される

おすすめカードの表示数は、偶数個の方がモバイル表示できれいに見えるのでおすすめです。

追加後、[メニューを保存]をクリックします。

「メニューを保存」をクリック
「メニューを保存」をクリック
まちゃりさ
まちゃりさ

あと少しです!頑張りましょう!

↑目次に戻る

「おすすめカード」の設定

続いて、先ほど作成したメニューを「おすすめカード」に設定します。

 

▼やり方:「おすすめカード」メニューの設定

ワードプレス管理画面の[Cocoon設定]をクリックし、[おすすめカード]タブを開きます。

「Cocoon設定」から「おすすめカード」タブを開く
「Cocoon設定」から「おすすめカード」タブを開く

 

[メニュー選択]項目で、作成したメニュー(例では「おすすめカード」)を指定します。

「メニュー選択」で作成したメニュー名を指定する
「メニュー選択」で作成したメニュー名を指定する

 

設定後、[変更をまとめて保存]をクリックし、変更を反映させることをお忘れなく。

「変更をまとめて保存」をクリック
「変更をまとめて保存」をクリック
まちゃりさ
まちゃりさ

これで、「おすすめカード」の設定は完了です!

↑目次に戻る

【Cocoon】「おすすめカード」の表示をページごとに変えるには?

ここからは、さらにこだわりがある方向けに設定のやり方を紹介します。

ページごとに「おすすめカード」の表示を変更することもできます。

 

これも、「Cocoon設定」→「おすすめカード」タブを開き、

「Cocoon設定」→「おすすめカード」タブを開く
「Cocoon設定」→「おすすめカード」タブを開く

おすすめカードの表示」項目で、表示させたいページを指定します。

「おすすめカードの表示」項目で、表示させたいページを指定
「おすすめカードの表示」項目で、表示させたいページを指定

選択できる表示ページは、次のとおりです。

  • 全ページ
  • フロントページのみ
  • 投稿・固定ページ以外
  • 投稿・固定ページのみ
  • 投稿ページのみ
  • 固定ページのみ

たとえば、固定ページなど「おすすめカード」を表示させたくないページもあると思います。

そのようなページがある場合には、表示を除外することができます。

まちゃりさ
まちゃりさ

ページごとに表示を変えたい場合は、設定してみましょう。

↑目次に戻る

ウィジェットでも「おすすめカード」を設定できる

ウィジェットで「おすすめカード」を表示させるページを指定することも可能です。

 

▼やり方:ウィジェットで「おすすめカード」を表示させるページを指定する

「外観」→「ウィジェット」を開きます。

「外観」→「ウィジェット」を開く
「外観」→「ウィジェット」を開く

「おすすめカード」の「追加」をクリックします。

「おすすめカード」の「追加」をクリック
「おすすめカード」の「追加」をクリック

 

「おすすめカード」の「表示スタイル」を指定し、

「おすすめカード」の「表示スタイル」を指定
「おすすめカード」の「表示スタイル」を指定

「おすすめカード」を追加したい場所を指定します。

「おすすめカード」を追加したい場所を選択
「おすすめカード」を追加したい場所を選択

 

例えば、「投稿本文中」に表示させたイメージは、このようになります。

「投稿本文中」に表示させたイメージ
「投稿本文中」に表示させたイメージ

サイドバー」に表示させたイメージは、こちらです。

「サイドバー」に表示させたイメージ
「サイドバー」に表示させたイメージ

 

このように、ウィジェットの機能を使うことで、おすすめカードを表示させる幅が広がります

まちゃりさ
まちゃりさ

色々な場所に追加して、表示を試してみましょう!

参考にした記事は、こちらです。

↑目次に戻る

まとめ

今回は、Cocoonで「おすすめカード」を設定するやり方をご紹介しました。

  1. テーマのバックアップ
  2. 画像の準備
  3. 「おすすめカード」用メニューの作成
  4. 「おすすめカード」の設定

 

思ったより簡単でしたか?私は最初わからず、かなり苦戦しました。

Cocoonは、理解できれば簡単なのですが、それまでが結構大変ですね。

本記事が、ブログ初心者・Cocoon利用者の役に立つことを期待しています!

 

それでは、今回はこのへんで。

最後までお読みいただき、ありがとうございました!

Cocoonのカスタマイズ・設定のやり方

Cocoonのカスタマイズ・設定のやり方については、以下の記事でまとめています。

コメント

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