【Cocoonカスタマイズ】トップページのヘッダー下に画像付きおすすめメニューを入れる方法

スポンサーリンク
【Cocoonカスタマイズ】トップページのヘッダー下に画像付きおすすめメニューを入れる方法 デザイン
スポンサーリンク

この記事では、Cocoonを使用してる方に、トップページヘッダー下におすすめカード(記事)を入れるカスタマイズをご紹介します。

【Cocoonカスタマイズ】トップページのヘッダー下に画像付きおすすめメニューを入れる方法

有料テーマJINなどを見ていると、主要おすすめメニューを、トップページのヘッダー下に入れているのをよく見かけますよね。

「有料テーマはやっぱかっこいいな~」なんて思っていませんか?

実は無料テーマCocoonでも、おすすめ画像付きカードをヘッダー下に入れることが出来ちゃうんです!

これで有料テーマ級のブログを作ってくださいね。

ヘッダー下に画像付きおすすめメニューを入れる方法

1:メニューを新規作成

ダッシュボード > 外観メニューをクリックして、新しいメニューを作成 をクリック。

【Cocoonカスタマイズ】トップページのヘッダー下に画像付きおすすめメニューを入れる方法

メニュー名を入れて、メニューを作成をクリックしてください。

【Cocoonカスタマイズ】トップページのヘッダー下に画像付きおすすめメニューを入れる方法

メニュー項目から、ヘッダー下に表示したい項目を選択して、メニューに追加をクリック。

おすすめは主要カテゴリー(もしくは投稿記事)を4つか、2つです。

【Cocoonカスタマイズ】トップページのヘッダー下に画像付きおすすめメニューを入れる方法

項目を追加できたら、メニューを保存をクリック。

【Cocoonカスタマイズ】トップページのヘッダー下に画像付きおすすめメニューを入れる方法

これでメニューの作成は完成。

次に、Cocoon設定で、おすすめカードの表示方法をカスタマイズします。

2:おすすめカードを設定する

ダッシュボード > Cocoon設定 > おすすめカードをクリック。

【Cocoonカスタマイズ】トップページのヘッダー下に画像付きおすすめメニューを入れる方法

おすすめカードの表示方法を設定します。

【Cocoonカスタマイズ】トップページのヘッダー下に画像付きおすすめメニューを入れる方法
\ピリリ.comの設定はこれ/
  • おすすめカードの表示
    全ページで表示
  • メニュー選択
    先ほど作ったメニュー(おすすめカード)を選択
  • 表示スタイル
    画像のみ
  • カード余白
    おすすめカード毎に余白を設ける

設定が完了したら、変更をまとめて保存してください。

これでカスタマイズ完成です!

ヘッダー下おすすめカードのできあがりはこんな感じ

まずはPCから見た時の表示です。

でかでかとオヌヌメしてくれています。

【Cocoonカスタマイズ】トップページのヘッダー下に画像付きおすすめメニューを入れる方法

スマホから見た時のBefore&Afterはこんな感じ。

【Cocoonカスタマイズ】トップページのヘッダー下に画像付きおすすめメニューを入れる方法

【Q&A】ヘッダー下おすすめカードについて

カスタムリンクで外部リンクを入れることはできますか?

物理的には可能です。

が、アイキャッチ画像を取得できないので、

画像が表示されない場合があります。(Cocoon公式より

ヘッダー下はウィジェットでも対応できないので、もし画像が表示されない場合は、

サイドバーにテキストウィジェットを追加して、画像+リンクを張り付けるとできます。

おすすめカードの位置に何を入れるのが一番適していますか?

やはり一番適しているのは主要メニューでしょう。

もし、オススメの記事を入れたい場合はサイドバーに入れると良いかもしれません。

ちなみに、サイドバーにおすすめカードを入れる方法は下記になります。

他にもなにかありましたら、Twitterに質問くださいね。

デザイン
スポンサーリンク
ピリリちゃんをフォローする
ピリリ.com(YouTuber×ブロガー)
タイトルとURLをコピーしました