AFFINGER6でおすすめ記事の表示方法を初心者向けに解説!

※記事内にプロモーションが含まれています。

悩める人
悩める人

Affinger6を使っています。
トップページやサイドバーなどにおすすめ記事を出すのはどうしたら良いですか?

きつねコード
きつねコード

アフィンガー6には「おすすめ記事一覧」の機能が用意されています。設定すると、任意の記事を好きな場所に表示することができて便利なので覚えておきましょう!

この記事でわかること

  • Affinger6「おすすめ記事一覧」機能の使い方
  • おすすめ記事一覧機能で可能なカスタマイズ内容
  • おすすめ記事一覧を、サイドバーもしくは任意の場所に出す方法

この記事を書いているきつねコードは、ワードプレスを触り始めてから10年以上、このブログを作ってからも毎日ワードプレスを触っています。当サイトではAffinger6を利用しており、今後も使い続ける予定です。

Affinger6のおすすめ記事一覧の機能は、誰でもすぐ設定することが可能です。

見せたい記事を目立つ場所に表示できるので、使い方を覚えてぜひ活用しましょう!

参考情報

AFFINGER6を使っているなら、絶対にチェックしておきたいのがこの2つ↓
タグ管理マネージャー】と【PVモニター】はまさに相棒的な存在です。

・広告タグを整理して、効率的に運用する
・PVとクリック数を分析して、収益導線を強化する

PVアップ➡️クリック数アップ➡️アフィリエイト成果発生アップ、を自然に増やす仕組みを作れます。
初期投資で迷ってたら、早めに導入するのがおすすめです!

5月キャンペーン中で正規価格よりさらに13,200円OFF↓

\AFFINGER6の相棒的存在!収益を押し上げる/

タグ管理マネージャーとPVモニターセット
購入ページへ

※きつねコードも購入し、愛用中。

関連記事:Affinger6タグ管理マネージャーとPVモニター

Affinger6「おすすめ記事一覧」の機能とは

Affinger6で標準装備されている「おすすめ記事一覧」の機能では、任意の記事をサイトTOPページやサイドバーなどに表示することができます。

例えば、TOPページに表示した場合はこのようになります↓。

affinger6のおすすめ記事一覧を表示した状態

設定方法は、めちゃくちゃ簡単です。

単純に人気の記事(アクセスが多い記事)を並べてももちろん良いですが、それよりも自分が見せたい記事収益記事などをピックアップして出しているサイトが多いと思います。

いつでも設定変更が可能で、表示する場所も選べるので、この機能はぜひ覚えておくと便利ですね。

きつねコード
きつねコード

当サイトでも使っていますよ。


余談ですが、Affinger6には「ヘッダーカード」という機能も存在します。
カード型のリンクを最大4枚まで表示できる機能です↓。

affinger6のヘッダカード機能

このヘッダーカードも設定が簡単でとても便利な機能です。”おすすめ記事”を表示することも可能です。
まだ知らない方は併せて使い方を確認しておくと良いでしょう。

関連記事
affinger6のヘッダーカードの設定方法
初心者でも簡単!AFFINGER6ヘッダーカードの設定&カスタマイズ方法

この記事でわかること Affinger6「ヘッダーカード」機能の使い方 ヘッダーカード機能で可能なカスタマイズについて ヘッダーカードに使用する画像サイズについ ...

Affinger6「おすすめ記事一覧」の設定方法(基本)

まずは、おすすめ記事一覧の基本の設定方法を解説します。

使い方は簡単です。

  • タイトルのテキスト
  • 表示する記事のID

この2点を入力して、表示する場所を選ぶだけです。


  • step.1

    管理画面「AFFINGRE管理」≫「ヘッダー下/おすすめ」をクリックします。

    affinger管理の「ヘッダー下/おすすめ」の設定画面

    「ヘッダー下/おすすめ」設定ページの下へ進むと、「おすすめ記事一覧」があります。
    ここに、タイトルテキストと、記事IDを入力しましょう。

    記事IDは、数字をカンマ「,」で区切って入れましょう。スペースなどは不要です。


  • 【記事IDの調べ方】

    記事IDは、管理画面「投稿一覧」を見れば簡単に分かります↓。

    affinger6投稿一覧で記事のIDを調べる

    もし記事IDの項目が見当たらない時は、「表示オプション」からカラムの表示設定を変更しましょう。


  • step.3

    タイトルと記事IDを入力したら、あとは用意されている項目で好きな位置に表示するだけです。

    affinger6おすすめ記事一覧の表示位置の設定

    これで保存すると、トップページの最上部におすすめ記事が表示されます。

    affinger6のおすすめ記事一覧を表示した状態

きつねコード
きつねコード

簡単ですね!

Affinger6「おすすめ記事一覧」のカスタマイズ内容

応用編としてアフィンガーで用意されている設定でできることをいくつかご紹介します。

全然難しくはないので、やりたい方はチェックしてみてください。

Affinger6おすすめ記事一覧のカスタマイズ色を変更する

デフォルトではオレンジっぽい色合いですが、もし色を変更したい場合は設定が用意されているので簡単に変えられます。

管理画面「外観」≫「カスタマイズ」の画面へ行き、「オプションその他」をクリックしましょう。

affinger6おすすめ記事一覧の色を変更する設定

次に、おすすめ記事」をクリックしましょう。

affinger6おすすめ記事一覧の色を変更する設定

ここから好きに色を変更することが可能です。
見出しやナンバーなどをそれぞれ選べます。

affinger6おすすめ記事一覧の色を変更する設定

色が決まったら、最後に「保存」するのをお忘れなく。

もし複数の場所でおすすめ記事一覧を表示している方は、その全ての場所に適用されますので留意しておいてください。

こんな風に背景色をつけてメリハリを出したりすることもできますね。

affinger6おすすめ記事一覧の色を変更する設定

Affinger6おすすめ記事一覧のカスタマイズショートコードで任意の場所に表示する(追尾しないサイドバーなど)

”おすすめ記事一覧"は、ショートコードで表示することも可能です。追尾(スクロール)しないサイドバーなどに表示するときに使えます。

Affinger6のおすすめ記事一覧では、あらかじめ表示する場所の項目が用意されていますが、ショートコードを使えばどこでも任意の場所に表示することができます。

ショートコードは下記の通りです。

[st-osusume] 

例えば、管理画面「外観」≫「ウィジェット」を開きます。
「AFFINGERカスタムHTML」のブロックを好きな場所に挿入しましょう。

affinger6のウィジェット画面で、AFFINGERカスタムHTMLを入れる

次に、先ほどのショートコードだけそのまま入力します。

affinger6で「おすすめ記事一覧」をショートコードでサイドバーウィジェットに表示する

これで保存すれば、サイドバーにおすすめ記事一覧が表示されます

普通の「サイドバー」ウィジェットに入れているので、これだとスクロールしても追尾してきません。

ショートコードで挿入したaffinger6のおすすめ記事一覧

使うかどうかは別として、ショートコードが効く場所であればどこでも利用することはできます。記事ページや固定ページの好きな場所で表示することも一応可能です。

関連記事
affinger6の使い方入門ガイド
初心者でも使いこなす!AFFINGER6の使い方・初期設定入門ガイド

こんにちは、AFFINGER6ユーザーのきつねコードです。 当サイトでは、Wordpressやブログ運営のノウハウなどを解説しています。 この記事では、AFFI ...

まとめ

まとめ

  • Affinger6の「おすすめ記事一覧」機能を使うと、任意の記事をサイトTOPページやサイドバーなどに表示できる。
  • 管理画面「AFFIGNER管理」≫「ヘッダー下/おすすめ」におすすめ記事の設定があるので、①タイトル表示する記事IDを入力し、表示場所を選ぶだけ。
  • 管理画面「外観」≫「カスタマイズ」≫「オプションその他」≫「おすすめ記事」で、色をカスタマイズできる。
  • おすすめ記事一覧をショートコードで表示すれば、任意の場所に出せる

Affinger6専用プラグインで収益を次の段階へ

5月GWキャンペーン中!正規価格よりさらに13200円OFF。↓

\AFFINGER6の相棒的存在!収益を押し上げる/

Affingerタグ管理マネージャーとPVモニターセット
販売ページへ

※きつねコードも有料版を購入し愛用中。

タグ管理マネージャーとPVモニターの活用方法はこちら>>

  • この記事を書いた人

きつねコード

Webディレクター兼プログラマー|2児の父 現在はWeb制作・プログラミング講師・サイト運営を手がけるフリーランスとして活動中。これまでにWebサービスの立ち上げや大規模サイトの運用、コンテンツ制作など、10年以上web業界に携わってきました。20代の頃にはスタートアップに参画し、栄枯盛衰も経験。 「パソコンが苦手だけど、Webを活用したい」という方からの相談も多く、そうした声に応えるためにこのブログを開設。専門知識をやさしく、実践的に伝えていきたいと思います。

人気記事

wordpressテーマおすすめ【ブログ編】 1

この記事を書いた人「きつねコード」 webディレクター・プログラミング講師・個人ブロガー。wordpressには10年以上触れており、自身でブログ運営もしていま ...

cocoonからswellに移行する全手順 2

cocoon以外のテーマからswellへ移行する場合でも、確認することとしては大体同じ手順となります。ご参考にしてみてください。 結論:cocoonとswell ...

おすすめのASP 3

こんにちは、きつねコードです。 当サイトでは、Wordpressやブログ運営のノウハウなどを解説しています。 この記事では、登録必須のASP会社について、ご紹介 ...

cocoonからaffinger6への移行手順 4

cocoon以外のテーマからaffinger6へ移行する場合もチェック項目は大体同じですので、参考にしてみてください。 関連記事:cocoonからswellへの ...

ラッコキーワードの使い方を徹底解説! 5

この記事でわかること ラッコキーワードを使うと何ができるのか? 他のツールと比べたときのラッコの優位性 ラッコキーワードの超具体的な使い方 (初心者向け)SEO ...

エックスサーバーのクーポンコード 6

この記事でわかること エックスサーバーのクーポンコード エックスサーバーの公式キャンペーン情報 最安で契約する方法 この記事の情報は、2025年5月8日に更新し ...

-Affinger, ブログ・wordpress運営
-, ,