「おすすめカード」をおしゃれに並べたいなぁ
本記事では、以下のようなニーズにお答えします。
・「おすすめカード」を記事のアイキャッチ画像以外にしたい
・「おすすめカード」に表示されるタイトルを短くしたい
・CSSの追加なしで「おすすめカード」の画像を変更したい
✓ この記事を書いた人
✓ 本記事の内容
「おすすめカード」に表示する画像を変更したり、タイトルを短くする方法を解説します。
このブログの「おすすめカード」の、BEFORE / AFTER です。
【Cocoon】おすすめカードをアイキャッチ画像以外にする方法
ブログを開設して数か月。サイトのトップページに表示される「おすすめカード」を、以下のように変更したいと思いませんか？
・記事のアイキャッチ画像以外にしたい
・表示されるタイトルの文字数を減らしたい
・画像の雰囲気を統一して、おしゃれにしたい
実は簡単にカスタマイズする方法があります。
なぜならCSSの変更など必要なく、ワードプレス（Cocoon）の設定だけでカスタマイズできるからです。
この記事ではCSSの変更なしで、「おすすめカード」を記事のアイキャッチ画像以外にする方法を解説します。
この記事を読むと、「おすすめカード」をお好みの画像とタイトルで表示することができるようになります。
結論は、リダイレクト機能を使うことです。
【Cocoon】「おすすめカード」をアイキャッチ画像以外にする手順
おすすめカードとは
「おすすめカード」とは何ですか？
✓ おすすめカードとは？
おすすめしたい記事やカテゴリーなどを、トップページの目立つ場所に表示させる機能です。
このブログの「おすすめカード」は、以下の赤枠の部分です。
前提条件
「おすすめカード」をアイキャッチ画像以外にする前提条件として、トップページに「おすすめカード」を表示する必要があります。
「おすすめカード」の表示方法が分からない方は、以下の記事にまとめてありますのでご覧ください。
≫【Cocoon】サイト上部に記事を固定する方法｜おすすめカード
手順の概要
「おすすめカード」を記事のアイキャッチ画像以外にする手順は以下の通りです。
① 「おすすめカード」用の固定ページを作る
② アイキャッチ画像を設定する
③ リダイレクトの設定をする
④ 固定ページを「おすすめカード」メニューに入れる
順番に設定していきましょう
「おすすめカード」用の固定ページを作ろう
ワードプレスのダッシュボードから「固定ページ」→「新規追加」をクリックします。
タイトルをつけよう
「タイトル」を入力します。「おすすめカード」にタイトルを表示する場合は、このタイトルが表示されます。短いタイトルがおすすめです。表示がすっきりするためです。
「インデックスしない」に✔を入れよう
本文下に表示される「SEO」より、「インデックスしない（noindex）」に☑を入れます。「おすすめカード」用のページなので、検索エンジンに登録する必要はありません。
「アイキャッチ画像」を設定しよう
画面右側の設定より、固定ページの「アイキャッチ画像」を設定します。
この「アイキャッチ画像」が「おすすめカード」に表示される画像になります。
アイキャッチ画像の作り方は、以下の記事にまとめています。興味のある方はご覧ください。
リダイレクトの設定をしよう
画面右側の設定より、「リダイレクトURL」を入力します。
リダイレクトとは何ですか？
✓ リダイレクトとは？
URLにアクセスしたユーザーを、自動的に新しいURLに転送する機能です。本来は記事のURLを変更した場合などに利用されます。
リダイレクト機能を使い、「おすすめカード用の固定ページ」から、「目的の記事」にアクセスさせることができます。
「目的の記事」のURLを「リダイレクトURL」に入力します。
固定ページを「公開」します。
固定ページを「おすすめカード」メニューに入れよう
ワードプレスのダッシュボードより、「外観」→「メニュー」をクリックします。
おすすめカード用のメニューを選択します。
「選択」ボタンをクリックします。
メニュー項目を追加しよう
メニュー項目を追加します。
「固定ページ」→「おすすめカード用のページ」に☑を入れます。
「メニューに追加」をクリックします。
元々設置してある「入れ替えたいおすすめカード」を選択し、削除します。
項目をドラッグすることで、好みの順番に入れ替えることができます。
画面右下より、「メニューを保存」をクリックします。
サイトを確認しよう
自分のサイトにアクセスし、表示を確認します。
おすすめカードをタップし、目的の記事にリダイレクトされることを確認します。
同様の手順で、残りのおすすめカードも設定していきます。
✔ 手順
① 「おすすめカード」用の固定ページを作る
② アイキャッチ画像を設定する
③ リダイレクトの設定をする
④ 固定ページを「おすすめカード」メニューに入れる
残りの「おすすめカード」も変更することができました。
タイトルの長さを合わせたいときは、「固定ページ」のタイトルを変更して調整します。
最終的には、このような仕上がりになりました。
まとめ：【Cocoon】「おすすめカード」をアイキャッチ画像以外にする方法
リダイレクト機能を使うことで「おすすめカード」に、お好みの画像とタイトルを表示できるようになりました。
「おすすめカード」はサイト上部に表示されます。ブログの玄関とも呼ばれ、読者さんが一番最初に見るページなので、すっきりと綺麗にしておきたいですね。
最後にこの記事のまとめです。
最後までお読みいただきまして、ありがとうございました。
✔ 人気記事
≫1000万円貯めました【手取り20万円】節約とお金を増やす方法を公開
≫【ブログ開始１か月】PV数・収益を公開｜アドセンスは？ASPは？
≫Googleアドセンス｜合格時（2022年3月31日）のデータを公開
コメント