【Cocoon】サイト上部に記事を固定する方法｜おすすめカード

ブログを作ってきて、嬉しい事がありました。

僕の書いた記事が人の役に立っていたのです。

ニックさんの記事を見て、無料でアイコン作れるサイトがあるのを知りました！
早速作らせてもらいました😆
ありがとうございました🙇‍♀️

— ai@おうちブログ (@ienokoto22) February 27, 2022

ニックさん、こんにちは！
「ひかるボタンの作り方」とても参考になりました！
ありがとうございます😊

— ゆう@ブログ5ヶ月目 (@yuunoblog) February 27, 2022

こんなに嬉しいことはありません。

Twitterでリプをくださった方々、どうもありがとうございました！！

そしてこう思いました。

同じような思いをお持ちの方の、参考になれば嬉しいです。

【Cocoon】サイト上部に記事を配置する方法｜おすすめカード

Cocoonのデフォルトでは、新しい記事から順番に、上からずらっと並んで表示されます。

↓このような表示です。

今回の記事を読むと、おすすめの記事をサイト上部に表示できるようになります。

多くの方に役立つ記事を目立つ場所に表示すると、誰かの役に立つサイトになります。

役に立てばサイトになれば、アクセス数も増えるでしょう。

Cocoonの設定をしよう

さっそく設定していきましょう。

Cocoon（コクーン）での設定となります。

メニューを作ろう

まず、メニューを作ります。

メニューって何？という方は、こちらも参考になるかと思います。

あわせて読みたい

ワードプレスのメニューの作り方│ヘッダーメニュー・フッターメニュー 今回は、ワードプレスで「メニュー」を作る方法をお伝えいたします。 【ワードプレスのメニューとは】 嫁さん そもそもの話なんだけど、、メニューって何？ ニック 読者...

ダッシュボードより、「外観」➡「メニュー」をクリックします。

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

①メニュー名を入力します。

②「メニューを作成」をクリックします。

これでメニューが作成できました。

メニューにおすすめの記事を入れよう

作成したメニューに、おすすめの記事を入れます。

①「投稿」をクリックします。
②「すべて表示」をクリックします。
③ サイト上部に表示したい記事に✔を入れます。(表示上、４つ選ぶのがおすすめです。)
④「メニューに追加」をクリックします。

①ドラッグ＆ドロップで、記事の並び順を決めます。
　上の記事ほど左に表示され、下の記事ほど右に表示されます。

②「メニューを保存」をクリックします。

これで、メニューにおすすめの記事が入りました。

おすすめカードを表示しよう

メニューにおすすめの記事が入ったら、おすすめカードを表示しましょう。

「Cocoon設定」をクリックします。

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

おすすめカードを表示する場所を決めよう

おすすめカードを表示する場所を選択します。

今回は「フロントページのみで表示」を選びました。

「おすすめカード」用のメニューを選択しよう

メニュー選択より、先ほど作成した「おすすめカード」を選択します。

表示スタイルを設定しよう

表示スタイルを選択します。

写真マークにカーソルを合わせると、プレビューが表示されますので、お好みのものを選択します。

今回は「画像のみ」を選択しました。

画像は「アイキャッチ画像」が表示されます。

余白の設定をしよう

「カード余白」と「カードエリア左右余白」はお好みで✔を入れます。

どちらも、写真マークにカーソルを合わせると、プレビューが表示されます。

「変更をまとめて保存」をクリックします。

これで、おすすめカードの表示ができました。

サイトを確認しよう

サイトにアクセスし、表示を確認しましょう。

おすすめの記事がサイト上部に表示されました。

まとめ：おすすめカードを表示して、サイト訪問者を必要な情報に案内しよう

サイトのトップページ上部は、読者さんを迎える玄関のような場所ですね。

お客様を迎えるにあたり、必要な情報にたどり着きやすいように、おすすめカードを配置できると良いと思います。

さいごに、この記事のポイントをまとめます。

様々な使い方ができると思います。ぜひお試しください。