【Cocoonカスタマイズ】サイドバーに画像付きおすすめ記事を入れる方法

スポンサーリンク
【Cocoonカスタマイズ】サイドバーに画像付きおすすめ記事を入れる方法 デザイン
スポンサーリンク

この記事では、Cocoonを使用してる方へ、サイドメニューにおすすめカード(記事)を入れるカスタマイズをご紹介します。

【Cocoonカスタマイズ】サイドバーに画像付きおすすめ記事を入れる方法

トップブロガーさんのブログを見ていると、サイドバーにアピールしたい記事を、画像付きで入れていると思います。

「有料テーマはやっぱかっこいいな~」なんて思っていたら、2019年9月末に新機能として登場!

なんと、Cocoonでもサイドバーに画像付きおすすめメニュー(記事)を入れれるようになりました!

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

サイドバーに画像付きおすすめメニューを入れる方法

1:メニューを新規作成

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

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

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

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

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

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

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

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

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

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

次に、ウィジェットの設定で、おすすめカードをどこに入れるかを決めます。

2:ウィジェットで場所を設定

ダッシュボード > 外観 > ウィジェットをクリック。

おすすめカードを選択して、お好きな場所にウィジェットを追加してください。

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

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

【Cocoonカスタマイズ】サイドバーに画像付きおすすめ記事を入れる方法
\ピリリ.comの設定はこれ/
  • タイトル
    おすすめ
  • メニュー名
    先ほど作ったメニュー(おすすめカード)を選択
  • 表示スタイル
    画像のみ
  • カード余白を有効にする
    有効にするにチェック✅

設定が完了したら、保存してください。

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

サイドバーおすすめカードのできあがりはこんな感じ

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

ちょっと4つは多いかも、2つでも良いかもしれないです。

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

スマホから見た時の表示はこんな感じ。

【Cocoonカスタマイズ】サイドバーに画像付きおすすめ記事を入れる方法

【Q&A】サイドバーおすすめカードカスタマイズについて

おすすめカードはサイドバーにしか入れられないのですか?

このCocoon新機能は、どこにでも入れることができます!

もう少し正確に言うと、ウィジェットを設置できる位置ならどこでもOKです。

サイドバーだけでなく、フッターや、記事一覧にも入れることができます。

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

可能です。

が、アイキャッチ画像が取得できないので、画像が表示されない可能性があるようです。(Cocoon公式より

なのでもし外部リンクを入れたいなら、テキストウィジェットで画像+リンクを挿入すると可能です。

ヘッダー下におすすめカードを入れたいです!

トップページのヘッダー下におすすめカードを入れる場合は、

少し設定の仕方が異なりますので、以下の記事をご覧ください。

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