AFFINGER5

AFFINGER5でおすすめ記事一覧をカンタンに表示する方法を解説

2020年8月4日

AFFINGER5でおすすめ記事一覧をカンタンに表示する方法

AFFINGER5(アフィンガー5)にはおすすめ記事を表示できる機能があるのをご存知ですか?

通常WordPressでおすすめ記事一覧を表示するには専用のプラグインを入れて、設定をしていく必要があります。

ですがAFFINGER5(アフィンガー5)にはおすすめ記事表示機能が標準で備わっています。

おすすめ記事一覧を設置して、読んで欲しい記事をオススメすることで、閲覧数が増えてコンバージョンが上がる可能性も高くなります。

閲覧数が増えてユーザーの滞在時間が長くなればSEOでもいい評価をもらえることが出来ます。

今回はAFFINGER5(アフィンガー5)を使っておすすめ記事一覧を表示するカンタンな方法をご紹介します!

記事のテーマ

AFFINGER5(アフィンガー5)を使った

  • おすすめ記事一覧を設置する方法
  • おすすめ記事の設定方法
  • 一覧をカスタマイズする手順

当サイトではウェブサイトやブログに関する記事を毎日投稿しています。
他の記事も合わせて読んでいただけると嬉しいです。

\今なら当サイト限定の豪華特典付き/

AFFINGER5の詳細を見る

AFFINGER5(アフィンガー5)でおすすめ記事一覧を表示する方法

それではAFFINGER5でおすすめ記事一覧を表示する方法をご紹介します。

▼完成形はこちら▼

おすすめ記事一覧完成形

AFFINGER管理画面へ

まずはおすすめ記事に関する設定をします。

AFFINGER管理画面へ

上の写真のように、WordPress管理画面から「AFFINGER5管理」→「AFFINGER管理」→「おすすめ記事一覧」に移動しましょう。

おすすめ記事一覧の作成

各項目の概要を見ていきましょう。

おすすめ記事一覧に表示する文字おすすめ記事一覧の見出しとなる文言を設定しましょう
任意の人気記事を指定記事IDを入力することで、おすすめ記事として表示したい記事を複数指定できます
記事IDを複数入力する時は「,」(半角)を忘れないようにしましょう
サイドのスクロールに表示するチェックを入れるとサイドバーに表示します
投稿の記事下に表示する記事ページの下部に表示します
固定記事の下に表示する固定記事の下部に表示します
トップの最上部表示にするトップページの一番上の部分に表示します
トップの挿入固定記事下に表示するトップページの挿入固定記事の下部に表示します
カテゴリに表示するカテゴリページに表示します

それぞれお好みで設定しましょう。

個人的にはサイドバーや投稿記事下に設置するのがおすすめです。

記事の上部に設置すると見栄えが悪いだけでなく、ユーザーの気をそらすことになるので「直帰率が上がる」「おすすめ記事を見てくれない」といった事態になります。

次に記事IDの調べ方についてご紹介します。

記事IDの調べ方

記事IDの調べ方は2種類あります。

記事IDの調べ方

  • 投稿記事一覧に表示されている
  • 投稿記事一覧でリンクの上にクリックを乗せると表示される

投稿記事一覧に表示されている

投稿記事一覧に表示されている

投稿一覧を開くと右側に「ID」の列に各記事のIDが書かれています。

投稿記事一覧でリンクの上にクリックを乗せると表示される

ホバーで表示

もう一つの方法は、同じく投稿一覧ページでタイトルにマウスを置くと、左下に移動先のリンクが表示されます。

このリンクの「post=〇〇」の部分が記事IDになります。

関連記事

AFFINGER5で新着記事・関連記事エリアをカスタマイズする方法
AFFINGER5で新着記事・関連記事エリアをカスタマイズする方法を解説

続きを見る

おすすめ記事一覧をカスタマイズ

オプションカラーから変更

次におすすめ記事一覧のカラーをカスタマイズする方法をご紹介します。

WordPress管理画面から
→  外観
→  カスタマイズ
→[+]オプションカラー
→  おすすめ記事
に移動しましょう。

カラー設定

するとこのように見出しの文字色、見出し背景色、コンテンツ背景色などのカラーをオリジナルで設定できます。

それぞれお好みで設定しましょう。

カラー変更が反映されない時の対処法

初期設定でAFFINGER5のメインカラーをオリジナルにした方は、この方法ではカラー変更できません。

追加CSSから直接色を変更しなければなりません。

まずはWordPressの管理画面から「外観」→「カスタマイズ」→「追加CSS」に移動しましょう。

追加CSS

上のように「追加CSS」のエディタ画面にCSSのコードを入力することでカラー変更ができます。

以下の一覧から、変更したい部分に合わせてCSSコードを入力しましょう

見出し文字色

 見出し文字色のCSSコード
#content-w .p-entry{
color:#ffffff;
}

見出し背景色

 見出し背景色のCSSコード
#content-w .post .p-entry {
background:#ffffff;
}

コンテンツ背景色

 コンテンツ背景色のCSSコード
.pop-box {
background:#ffffff;
}

文字色

 文字色のCSSコード
.kanren .clearfix dd h5:not(.st-css-no2) a{
color:#ffffff;
}

ナンバー色

 ナンバー色のCSSコード
.poprank-no{
color:#ffffff;
}

ナンバー背景色

 ナンバー背景色のCSSコード
.poprank-no{
background:#ffffff;
}

各項目の「#ffffff」の部分を、設定したい色コードにしてください。

すこし手間がかかりますがすぐに慣れますので心配することはありません

色コードはこちらを参考にしてみてください:WEB色見本 原色大辞典

まとめ:おすすめ記事一覧は重要!

まとめ

まとめ

  • AFFINGER5では簡単におすすめ記事一覧の設定ができる
  • 各エリアのカラー設定はカスタマイズor追加CSSからできる

今回はAFFINGER5(アフィンガー5)でおすすめ記事一覧をカンタンに表示する方法について解説しました。

おすすめ記事を設置すればユーザビリティが向上しSEOでいい評価を貰える可能性が高まります。

やっておいて損がない機能ですので、ぜひおすすめ記事一覧を設置してみましょう!

わからない部分がある方はお問合せフォームで質問して貰えばすぐに返信します。

今サイトではこれからもウェブサイト運営に関する有益な情報をたくさん発信していきたいと思っていますので応援よろしくお願いします!

AFFINGER5のカスタマイズ方法のまとめはこちら

AFFINGER5(アフィンガー5)のカスタマイズ方法まとめ
AFFINGER5(アフィンガー5)のカスタマイズ方法まとめ

続きを見る

\今なら当サイト限定の豪華特典付き/

AFFINGER5の詳細を見る

AFFINGER5関連の記事はこちら

All in One SEO Packの導入手順
AFFINGER5を使ってみた感想【良かった点と悪かった点】

続きを見る

AFFINGER5(アフィンガー5)でオシャレな目次を作成する方法
AFFINGER5(アフィンガー5)でオシャレな目次を作成する方法

続きを見る

AFFINGER5(アフィンガー5)でお問い合わせフォームを簡単に設置する方法
AFFINGER5(アフィンガー5)でお問い合わせフォームを設置する簡単な方法

続きを見る

AFFINGER5で内部・外部リンクのブログカードを作る方法
AFFINGER5で内部・外部リンクのブログカードを作る方法を解説

続きを見る

AFFINGER5(アフィンガー5)に関する記事一覧はこちら→

  • この記事を書いた人(執筆者情報)

wagtechblog

プログラミングとWordPressに溺れた私立大学生。フリーランスのiOSエンジニアとしてアプリ開発しています。その傍らWeb集客のベンチャー企業で勤務。主にフロントエンドエンジニア・WebアプリケーションエンジニアとしてWebアプリケーション開発、SEOマーケティング、データビジュアライゼーションといった業務もしてます。好きな言語はSwiftとPythonとPHPとRuby。趣味はApex Legendsとゲーミングデバイス集め。

-AFFINGER5

Copyright © wagtechblog All Rights Reserved.