【cocoon】ヘッダー下におすすめ記事を表示させたいときに使う「おすすめカード」の作り方

cocoonおすすめカード ワードプレス

ブログの記事が少しずつ増えてくると、来てもらった訪問者さんにまず見てもらいたいページがだんだん埋もれてきます。

そんなときにまず見てもらいたい記事をトップページのヘッダー下に表示したいですよね。

僕はcocoonを使用してカスタマイズしているのでcocoonでのヘッダー下におすすめ記事を固定する方法をご紹介します。

出来上がるとこんな感じになります。

cocoonおすすめカードを表示

参考にさせてもらったサイト

ヘッダー下に任意の画像リンクを追加できる「おすすめカード」機能の使い方
サイト内回遊率の改善に、ヘッダー下画像リンクの作り方。

cocoonでのヘッダー下の記事はおすすめカードを使う

僕の場合記事の「この投稿を先頭に固定表示」にチェックをしても先頭に固定されませんでした。

これが効いたらこれでもよかったのですが、cocoonの場合記事をヘッダー下に固定したいときは「おすすめカード」を使ったほうが良さそうです。

メニューを作成する

外観からメニュー表示

まずは外観→メニューに入って新しいメニューを作成します。

メニュー名は任意の名前でいいですが、僕はおすすめカードにしました。

表示させたい記事を選ぶ

表示させたい記事を選択

メニュー構造の横にある投稿をクリックします。

すると投稿一覧が出てくるのでその中でトップページ下に固定したい記事、すなわち「おすすめカード」になるものを選びます。

このとき選ぶ記事数は4つがおすすめです。

横並びになるのでPCだと4つがちょうどよく、スマホの場合は横2つの2列になります。

4つの場合:PC

おすすめカード記事4つの場合(PC)

2つの場合:PC

おすすめカード記事2つの場合(PC)

タイトルが長すぎるとトップ下に表示したときに文字で画像が埋もれてしまいますのでナビゲーションラベル名を短くしておくと見栄えが良くなります。

ナビゲーションパネル

cocoon設定でおすすめカードを編集する

メニューでおすすめ表示したい記事を作ったら次はcocoon設定のおすすめカード を選びます。

cocoon設定
おすすめカード

おすすめカードの表示はトップページだけで出すのか、全てのページで出すのかを選ぶことができます。

今回はトップページの下に表示させたかったのでプロントページのみで表示を選択しています。

おすすめカードの表示

メニュー設定で先ほど作成した「おすすめカード」を選びます。

おすすめカードメニュー選択

おすすめカード表示スタイル例

表示スタイルはおすすめカードがどのような表示でタイトルが入るかを変更することができます。

こういった細かいところが変更できるのがcocoonのいいところだと思います。

画像のみ

おすすめカード画像のみ
画像のみ

画像中央に白文字タイトル

おすすめカード画像中央に白文字タイトル
画像中央に白文字タイトル

画像中央にラベルでタイトル

画像中央にラベルでタイトル

画像下段を黒背景にしタイトルを重ねる

画像下段を黒背景にしタイトルを重ねる

カード余白・カードエリア左右余白あり

カード余白は記事と記事との間隔、カードエリア左右余白はおすすめカード全体の余白になります。

カード余白・カードエリア左右余白あり:PC

カード余白・カードエリア左右余白あり:PC

カード余白・カードエリア左右余白あり:スマホ

カード余白・カードエリア左右余白あり:スマホ

カード余白・カードエリア左右余白なし:PC

カード余白・カードエリア左右余白なし:PC

カード余白・カードエリア左右余白なし:スマホ

まとめ

おすすめカード表示

これでヘッダー下におすすめ記事を表示することができました。

おすすめカードはそのほかにも、カスタムリンクやカテゴリーを表示することも可能です。

まだまだ使っていない機能などありますがcocoonは無料なのにとてもカスタマイズ性が高いです。

ワードプレスで無料テンプレートを使用するのならばcocoonを色々触っていけばかなり自由度が高くなると思います。

Amazonで買い物をするならAmazonギフト券へチャージしてからの方がお得

現金でギフト券残高にチャージすると最大2.5%ポイントが付いてくる! 詳しくはこちら

Amazonプライム会員なら最大2.5%ポイント還元!

一回のチャージ額 通常会員 プライム会員
90,000円〜 2.0% 2.5%
40,000~89,999円 1.5% 2.0%
20,000~39,999円 1.0% 1.5%
5,000~19,999円 0.5% 1.0%
ワードプレス
ARAKINGをフォローする
アラブロ

コメント

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