AFFINGER トップページカスタマイズ

【AFFINGER6】おすすめ・よく読まれている記事一覧を設定する方法を解説

2022年4月30日

AFFINGERを使っているけど、おすすめ記事をヘッダーやサイドバーに表示させるにはどうしたらいいのかな？？

 

今回の記事はこんな疑問を解決していきます。

 

 

人気記事の表示する方法には、いくつかありプラグインを使用するといって方法もあります。詳しくは以下の記事で紹介しています。

 

【WordPressプラグイン】WordPress Popular Postsのカスタマイズ方法

続きを見る

 

しかし、AFFINGERを使用されている方には、ぜひ今回のやり方がオススメなので参考にして見て下さい。

 

本記事の内容

AFFINGER6でおすすめ記事の設定

AFFINGER6でおすすめ記事のカスタマイズ

おすすめ記事の設定についての解説

 

この記事を書いた人

 

＼ 当ブログ使用テーマ ／

  • 誰でも簡単オシャレなデザイン！
  • インフォトップ月間総合第１位！
  • SEO対策と収益UPを標準で搭載！

有名ブロガーに愛用されているSEO最強WordPressテーマ。本ブログも使用中のカスタマイズ性が抜群のテーマです！

AFFINGER6の購入はこちら

 

AFFINGER6のおすすめ記事一覧の表示について

イラスト

 

おすすめ記事を作成し、上手に設定することであなたが読者のユーザーに読んでほしいキラー記事や全体のPV数がUPして、ブログでの収益にもつながります。

 

そうするためには、「おすすめ記事」や「よく読まれている記事」などを設定することが重要になってきます。

 

おすすめ記事には自分の記事だけではなく、自信が誘導したいセールス記事への誘導も可能になるので、ぜひ活用してみましょう。

 

 

おすすめ記事の設定は主に２箇所

  • トップページのヘッダーカードにおすすめ記事の設定をする
  • サイドバーによく読まれている記事を設定する

 

ヘッダーカードのおすすめ記事はこちら

 

サイドバーのよく読まれている記事はこちら

 

 

ヘッダーカードの設定方法に関しては、以前紹介していますのでそちらの記事から細かい設定方法やカスタマイズのやり方を解説しております。

 

以下の記事を参考にして見て下さい！

 

イラスト
【AFFINGER6】ヘッダーカードの作り方とカスタマイズ方法

続きを見る

 

おすすめ記事一覧の設定方法

イラスト

それでは、AFFINGER6で「おすすめ記事」の一覧を表示する方法について紹介していきます。

 

完成形はこちらになります

 

 

自分がおすすめしたい記事のIDを調べて設定するだけの作業になるので、5分もあれば簡単に設定ができます。

 

記事IDの調べ方

はじめに、おすすめ記事一覧の項目に表示したい記事のIDを確認しておきましょう。

 

WordPress管理画面から「投稿一覧」に移動しましょう。そこから記事IDを確認しておきます。

 

 

後からでも確認できるので、記事IDの確認方法がわかればOK！

 

AFFINGER管理画面の設定

次に管理画面から「AFFINGER管理」→「ヘッダー下／おすすめ」に移動してください。

 

そこから、ページ最下部に「おすすめ記事一覧」の項目にて設定をしていきます。

 

 

 

 

 

以上の項目にて、記事IDの入力とサイドバーへの表示項目にチェックを入れることで、おすすめ記事の表示ができます。

 

設定ができたら、トップ画面にて確認して見ましょう！

 

 

アイキャッチ画像も大きくて、すごくわかりやすい表示になってますね！

 

 

おすすめ記事一覧のカスタマイズ方法

イラスト

 

それでは、おすすめ記事の表示設定ができたら、次は配色のカスタマイズを行なっていきます。

 

デフォルトの表示

 

ちょっと、色合いがシンプルすぎる…

 

AFFINGERの管理画面から簡単に設定できるので、やっていきましょう！

 

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

WordPressの管理画面から「外観」→「カスタマイズ」→「オプションカラー」に移動しましょう。

 

 

 

 

 

全体の配色バランスを確認しながら、好みの色にカスタマイズして見て下さい。

 

 

 

カラー変更が反映されない時は？？

初期設定でAFFINGER6のメインカラーをオリジナルにした場合には、先ほど紹介した方法でうまくカラー変更でいない場合があります。

 

そういった時には、追加CSSから直接配色を編集することで、色のカスタマイズが可能になるので、そちらの方法も紹介しておきます。

 

WordPressの管理画面より、「外観」→「カスタマイズ」→「追加CSS」を選択しましょう。

 

 

追加CSSに移動したら、以下のショートコードを貼り付けて、配色はカラーコードなどから色を割り当てていきましょう。

 

 見出し文字色
#content-w .p-entry{
color:#ffffff;
}

 

 

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

 

 

 コンテンツ背景色
 #side aside .kanren.pop-box:not(.st-wpp-views-widgets) {
background-color: blue
}

 

 文字色
#side aside .kanren dd a {
color: red!important;
}

 

 

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

 

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

 

CSSを直接編集することで、より細かいところまで編集が可能になります。

 

慣れるまでは少し時間がかかりますが、編集できるようになると痒いところまで手が届くようになるので、ぜひCSSの編集のできるようになるのがおすすめです！

 

 

【NG】WordPressプラグインWordPress Popular Postsのデメリット

イラスト

 

以前紹介した、ブログのアクセス数を自動で集計してくれて人気記事を表示してくれるプラグインに「WordPress Popular Posts」があります。

 

【WordPressプラグイン】WordPress Popular Postsのカスタマイズ方法

続きを見る

 

かなり便利なプラグインである「WordPress Popular Posts」ですが、デメリットも存在します…

 

それが、「アクセス数」→「ランキング順位の表示」をいう処理が毎回されるため、どうしても表示速度か遅くなってしまい、SEO的に相性がよくないものになってしまいます。

 

そのため、紹介記事にはできるだけ遅くならないような設定も紹介しているので、そちらの設定は必ず行うようにしておきましょう。

 

まとめ：おすすめ記事一覧を上手に活用しよう

イラスト

 

 

以上、AFFINGER6のおすすめ・よく読まれている記事一覧を設定する方法の解説でした。よく読まれている記事の中に、自分がおすすめ記事を表示させるのもテクニックの一つです！

 

あなたのブログにアクセスした人がどんなブログか気になった時にチェックするのが、「新着記事」と「おすすめ記事」です。

 

ブログ運営をする上で、重要なポイントになってくる要素でもあるので上手に活用して見ましょう！

参考トップページのカスタマイズに関する記事かこちら

 

参考アップデートやインストール・プラグインに関する記事はこちら

 

参考投稿記事のカスタマイズも関する記事はこちら

 

参考Gogleアドセンス×AFFINGERのカスタマイズについての記事はこちら

 

 

  • この記事を書いた人

せなお

ブログ月間1.7万PV｜YouTubeチャンネル収益化達成！｜最新のAIとITに関する情報発信｜ガジェットレビュー｜Webデザイン｜ 動画編集スキル｜X, Instagram、TikTokで情報発信｜月3万円から副業術

-AFFINGER, トップページカスタマイズ
-,