※当ページのリンクには広告が含まれております

ブログノウハウ

AFFINGER6「記事をおすすめする3つの機能」簡単作成手順【15分で完成】

AFFINGER6「記事をおすすめする機能3つ」簡単作成

こんなお悩みありませんか?

  • 「おすすめの記事」をブログに表示して、ユーザにいろんな記事を見てもらいたい・・・
  • ブログでよく見る「おすすめ記事一覧」ってどう設定すれば良いの・・・?
  • 作成した記事をスライドショー表示するには、どうやれば良いの・・・?
  • おすすめの記事をカード形式で表示して、ユーザに記事をアピールしたい・・・

AFFINGER6の機能を利用して記事をおすすめする方法を本記事にまとめました。

本記事を参照し、あなたのサイトに設定してみてください。

この記事で分かること

  • AFFINGER6の3つの記事をおすすめする方法
  • AFFINGER6の記事をおすすめする以下3つの機能の概要と詳細な設定手順
    • おすすめ記事一覧
    • ヘッダカード
    • サムネイルスライドショー

AFFINGER6には以下の3つの記事をおすすめする機能が標準機能として備わっています。

  • サイドバーにおすすめの記事を表示:おすすめ記事一覧
  • カード形式で記事を表示:ヘッダカード
  • 作成した記事のスライドショー表示:サムネイルスライドショー

本記事では3つの機能を詳細設定手順も含めてご紹介します。

いずれもAFFINGER6の標準機能ですので、プラグインなどは不要で、それぞれ簡単に表示できますよ。

「おすすめ記事一覧・ヘッダカード・サムネイルスライドショー」の表示により、期待できる効果は以下が挙げられます。

3機能により期待できる効果

  • おすすめ記事がユーザに刺さると、ユーザのブログ滞在時間が伸びる
  • 滞在時間が伸びるとSEO(検索サイトの表示順位)の観点で、検索サイトから高評価を得られる可能性が出てくる
  • 多くの記事をユーザに見てもらうことで、ブログのファン化の可能性向上が見込める

渾身の記事をユーザにお知らせして、あなたのブログをたっぷり楽しんでもらえるようにしましょう!

ぜひ最後までご覧ください!

AFFINGER6の購入手順は、こちらで解説しています。

購入手順
AFFINGER6の購入手順を簡単3STEPで解説【おすすめWordPressテーマ】

ぜひ最後までご覧ください! 目次1 AFFINGER6(アフィンガー6)の概要2 AFFINGER6(アフィンガー6)の商品情報3 筆者の経験:AFFINGER6(アフィンガー6)の購入手続きは10分 ...

続きを見る

WordPressブログの設定が未実施の方は、以下の記事で手順をご確認ください。

要チェック!
WordPressブログの始め方を5ステップで解説【初心者向け】

ぜひ最後までご覧ください! なお、レンタルサーバをどのサービスにするかお悩みの方は、以下の記事にて説明しておりますのでご確認ください。 目次1 筆者の経験:手続き5ステップで完了!2 ブログ開始までの ...

続きを見る

筆者の経験:AFFINGER6(アフィンガー6)記事おすすめ機能はいずれも5分程度で設定できた!

筆者の経験:AFFINGER6(アフィンガー6)記事おすすめ機能はいずれも5分程度で設定できた

ご紹介する3つの機能の設定作業概要を説明します。

おすすめ記事一覧

以下のわずか2ステップで完了しますので、5分もあればできてしまいます!

  1. おすすめ記事一覧に表示したい記事の「記事ID」を確認
  2. AFFINGER管理画面で「記事ID」を設定

ヘッダカード

こちらも以下の2ステップで完了します。5分で完了できますよ!

  1. 表示したい記事のURLを確認
  2. AFFINGER管理画面でURLと画像を設定

サムネイルスライドショー

こちらは1ステップで完了します。5分もかからずサクッとできてしまいます!

  1. AFFINGER管理画面でサムネイルスライドショーの設定

それぞれ画像も用いて詳細解説しますので、安心して確認・作業実施してくださいね。

設定作業のポイント

3つの機能は、いずれも「AFFINGER管理画面」にて設定を実施します。

「AFFINGER管理画面」を開く方法をこちらに記載します。

各機能の設定時にもし分からなくなったら、この欄へのジャンプリンクを設置してますので確認してください。

「AFFINGER管理画面」を開く方法

WordPressメニュー内の「AFFINGER管理」>「AFFINGER管理」をクリックします。

WordPress画面でAFFINGER管理画面への画面遷移

AFFINGER管理画面が開けたら、以下のリンクよりそれぞれの説明欄にジャンプして設定を続けてください。

「おすすめ記事一覧」のAFFINGER管理画面の設定へジャンプする

「ヘッダカード」のAFFINGER管理画面の設定へジャンプする

「サムネイルスライドショー」のAFFINGER管理画面の設定へジャンプする

AFFINGER6(アフィンガー6)おすすめ記事一覧の完成形

AFFINGER6(アフィンガー6)おすすめ記事一覧の完成形

完成形イメージとして、当サイトのおすすめ記事一覧を貼っておきますね。

画像の赤枠箇所が「おすすめ記事一覧」です。

欄のタイトルは必ずしも「おすすめ記事一覧」でなくとも構いません。自由に設定が可能です。

本サイトは「よく読まれている記事」と設定しています。

おすすめ記事一覧(赤枠箇所)

それでは、具体的な設定手順を説明します。

AFFINGER6(アフィンガー6)おすすめ記事一覧の設定手順

AFFINGER6(アフィンガー6)おすすめ記事一覧の設定手順

先に記載の通り、

  1. おすすめ記事一覧に表示したい記事の「記事ID」を確認
  2. AFFINGER管理画面で「記事ID」を設定

の2ステップで説明を進めます。

おすすめ記事一覧に表示したい記事の「記事ID」を確認

まずは一覧に表示したい記事IDを確認しましょう。

WordPressメニュー内の「投稿」>「投稿一覧」をクリックします。

WordPress画面で投稿一覧への画面遷移

「おすすめ記事一覧」に表示したい記事の「記事ID」を確認し、メモ帳にコピーしておきましょう。

表示する記事数は5つ程度がおすすめで、当サイトでも5つ設定しています。

投稿一覧画面で記事IDを確認

これで「記事ID」の確認は完了です!

AFFINGER管理画面で「記事ID」を設定

続いて記事の表示設定を行います。

AFFINGER管理画面を開きます。開き方はこちら(本記事内でジャンプします)

おすすめ記事一覧のAFFINGER管理画面での設定は、以下の通りです。

画面左側メニューの「ヘッダー下/おすすめ」をクリックし、「おすすめ記事一覧」をクリックします。

AFFINGER管理画面でおすすめ記事一覧をクリック

「おすすめ記事一覧」を設定します。

設定箇所は以下の3ヶ所です。

「おすすめ記事一覧」設定内容

「おすすめ記事一覧に表示する文字」:画面表示時のタイトル部分です。当サイトでは「よく読まれる記事」と設定しています。

「任意の人気記事を指定」:表示したい記事のIDを入力します。ステップ1でメモ帳にコピーしたIDを半角カンマ「,」で区切って入力します。

「チェックボックス」:おすすめ記事一覧を画面のどこに表示するかを設定します。詳しくはすぐ下の"チェックボックス設定"を確認ください。

サイドのスクロールに表示にする:サイドバーに表示
投稿の記事下に表示にする:記事ページの下の領域に表示
固定記事の下に表示にする:固定記事の下の領域に表示
トップの最上部表示にする:トップページ一番上の領域に表示
トップの挿入固定記事下に表示にする:トップページの挿入固定記事の下の領域に表示
カテゴリーに表示にする:カテゴリページに表示

おすすめ記事一覧の設定内容

表示領域を設定するチェックボックスについて

当サイトでは上記画像の通り「サイドのスクロールに表示にする」を設定しています。

画面を下の方にスクロールしていった際に、おすすめ記事一覧が画面スクロールに着いてきてくれるので、ユーザに渾身の記事をご覧いただける可能性が高くなると考え、この設定にしています。

表示する領域をどこにするかは好みもあると思いますので、それぞれ試してみてくださいね。

設定を終えたら「Save」ボタンをクリックします。

これで設定完了です!

AFFINGER6(アフィンガー6)ヘッダカード・サムネイルスライドショーの完成形

AFFINGER6(アフィンガー6)ヘッダカード・サムネイルスライドショーの完成形

完成形イメージとして、当サイトのトップページを貼ります。

画像の赤枠箇所が「ヘッダカード」、画像の青枠箇所が「サムネイルスライドショー」です。

ヘッダカード(赤枠箇所)・サムネイルスライドショー(青枠箇所)

それでは、具体的な設定手順を説明していきます。

AFFINGER6(アフィンガー6)ヘッダカードの設定手順

AFFINGER6(アフィンガー6)ヘッダカードの設定手順

先述の通り、

  1. 表示したい記事のURLを確認
  2. AFFINGER管理画面でURLと画像を設定

の2ステップで説明を進めます。

表示したい記事のURLを確認

まずは、あなたのサイトにアクセスし、ヘッダカードに表示したい記事のURLを確認します。

ヘッダカードに表示したい記事のURLを確認

ヘッダカードは最大4つ設定可能です。

表示したい記事のURLを最大で4つ確認し、メモ帳にコピーしておきましょう。

これでURLの確認は完了です!

AFFINGER管理画面でURLと画像を設定

続いて、URLと画像の設定を行います。

AFFINGER管理画面を開きます。開き方はこちら(本記事内でジャンプします)

ヘッダカードのAFFINGER管理画面での設定は、以下の通りです。

画面左側メニューの「ヘッダー下/おすすめ」をクリックし、「ヘッダーカード」をクリックします。

AFFINGER管理画面でヘッダカードをクリック

ヘッダカードを設定しましょう。

設定箇所・内容は以下の通りです。

サイト全体に表示にする(デフォルトはTOPのみ)ヘッダカードを全てのページで表示したいときにONにします。
画像のURLカードに表示したい画像のURLです。「アップロード」ボタンをクリックし、
すでにメディアライブラリにアップロードしている画像か
新たに画像をメディアライブラリにアップロードし選択します。
テキストカードに表示する文章を入力します。
2行のうち、上段は少し文字が大きく下段は少し文字が小さくなります。
上段はタイトル・下段はサブタイトルのイメージで設定しましょう。
リンク先URLSTEP1:表示したい記事のURLを確認 の手順でメモ帳にコピーしたURLを貼り付けます。
PCに表示しないパソコンで見た際に表示しない場合にONにします。
スマホ・タブレットに表示しないスマホ・タブレットでサイトを見た際には表示しない場合にONにします。
【ヘッダーカード1~4の設定内容】
テキストのある背景画像をぼかす背景画像をぼかし、カードにマウスカーソルをあわせると、ぼかしが取れる設定になります。
テキストのある背景画像を暗くする背景画像を暗くし、カードにマウスカーソルをあわせると、明るくなる設定になります。
デフォルト上記2つの設定は行わず、デフォルトの設定とします。
角丸にするONにするとカードの角に丸みを帯びます。
スマホ閲覧時(959px以下)のおすすめヘッダーカードの高さを倍にONにするとスマホ閲覧時(959px以下)にカードの高さを倍にします。
【ヘッダカード デザイン欄の設定内容】

設定を終えたら「Save」ボタンをクリックします。

これで設定完了です!

AFFINGER6(アフィンガー6)サムネイルスライドショーの設定手順

AFFINGER6(アフィンガー6)サムネイルスライドショーの設定手順

サムネイルスライドショーを設定しましょう。

AFFINGER管理画面でサムネイルスライドショーの設定

AFFINGER管理画面を開きます。開き方はこちら(本記事内でジャンプします)

サムネイルスライドショーのAFFINGER管理画面での設定は、以下の通りです。

画面左側メニューの「ヘッダー下/おすすめ」をクリックし、「サムネイルスライドショー」をクリックします。

AFFINGER管理画面でサムネイルスライドショーをクリック

サムネイルスライドショーを設定しましょう。

設定箇所・内容は以下の通りです。

サムネイルスライドショーの設定内容
ヘッダー画像下ウィジェットエリアにサムネイル画像のスライドショーを表示します。無効:スライドショーが無効になります。
フロントページ:トップページにスライドショーが表示されます。
全ページ:全てのページにスライドショーが表示されます。
カテゴリーID(※デフォルトは「0(全て)」)スライドショーに特定カテゴリの記事のみを表示したい場合は、カテゴリIDを入力します。
表示数スライドショー上に表示させるカード数(記事数)を入力します。
取得記事数スライドショーに含めるカード数(記事数)を入力します。
昇順 or 降順スライドショーに表示する記事の順番を設定します。
ID or 投稿日 or 更新日 or ランダムスライドショーに表示する記事の順番を何順とするかを設定します。
子カテゴリーを除外するスライドショーに表示する記事から子カテゴリーを除外したい場合、ONにします。
日付を表示しないスライドショーから日付の表示を除外したい場合、ONにします。
センター寄せにする(スマホ)スライドショーをセンターに寄せる場合、ONにします。
画像 + テキスト or 画像のみスライドショーにテキストも表示するかを設定します。
画像を角丸にするONにすると、スライドショー上のカードの角が丸みを帯びます。
画像に影を付けるONにすると、スライドショー上のカードに影が付きます。
画像をフルサイズにするONにすると、スライドショー上のカードのサイズが、記事のアイキャッチ画像のフルサイズ表示になります。
タイトルカラースライドショー上に表示する記事タイトルの文字の色を設定します。
【サムネイルスライドショーの設定内容】

設定を終えたら「Save」ボタンをクリックします。

これで設定完了です!

まとめ:AFFINGER6(アフィンガー6)記事をおすすめする機能を簡単に設定しよう!

まとめ:AFFINGER6(アフィンガー6)記事をおすすめする機能を簡単に設定しよう

「おすすめ記事一覧・ヘッダカード・サムネイルスライドショー」の表示による期待効果を再掲します。

【再掲】3機能により期待できる効果

  • おすすめ記事がユーザに刺さると、ユーザのブログ滞在時間が伸びる
  • 滞在時間が伸びるとSEO(検索サイトの表示順位)の観点で、検索サイトから高評価を得られる可能性が出てくる
  • 多くの記事をユーザに見てもらうことで、ブログのファン化の可能性向上が見込める

AFFINGER6ではご覧いただいた通り、いずれも非常に簡単に設定可能ですが、様々な効果が期待できます。

ぜひ、サクッと設定してしまうことをおすすめします。

ユーザは記事に気付きやすく有益な情報を得られやすい・運営側は多くの記事をユーザに見てもらえる可能性が高くなる

まさにユーザ・運営、Win-Winの施策と言えますよね。

本記事の設定を行って、あなたの渾身の記事をたっぷりとユーザにご覧いただきましょう

  • この記事を書いた人
  • 最新記事

ゴウ

・2022年4月:ブログ研究、情報収集開始
・2023年4月:自身のブログサイト「副業の種」立ち上げ
・研究内容とブログサイト立ち上げ経験を活かし、ブログのノウハウを発信中
・マーケティング、ライティングも並行して学習中
 読了した本の紹介などで知見を発信
・大手通信系企業の会社員(システムエンジニア)

-ブログノウハウ