
このような疑問にお答えします。
✔本記事の内容
- AFFINGER6ランキング作成手順
- ランキングカスタマイズ手順
- ランキング設置手順
- ランキング作成の注意点
AFFINGER6のランキング機能は非常に優秀で、売りたい商品をとにかく目立たせることができます。しかし、設定が難しくて挫折する人が多数。せっかくの機能を使えていない人が多いです。
ということで今回は、AFFINGER6のランキング作成手順を解説していきます。本記事を読めばランキング機能を間違いなく使いこなすことができますよ。
目次
AFFINGER6(アフィンガー)ランキング完成イメージ
まずは完成形をイメージしてもらいたいので、僕が作成したランキングをご覧ください。
自分で言いますが、なかなか綺麗にできているかと思います。
これから解説する内容を実践していただければ、必ず同じクオリティのランキングを作成することができます。それでは次の項から解説していきますね。
AFFINGER6(アフィンガー)ランキングを作成する前準備
- ASPに登録
- バナーor画像を用意
- アフィリエイトリンクを用意
まずは前準備から。ランキングを作成するには上記3点が必要です。
1つずつ解説していきますね。
①ASPに登録
ランキング機能を使ってアフィリエイト商品を販売するので、まずはASPの登録が必須。
この記事を読んでいる人はすでにASPの登録が済んでいるかと思いますが、もしまだの人のためにおすすめASPをまとめます。
おすすめASP
上記2点は審査が必要ない、誰でも登録可能なASPです。アフィリエイトをやるならどちらも登録しておきましょう。
②バナーor画像を用意
バナーとは画像にリンクが埋め込まれているもので、ASPで取得することができます。
もし自分がランキングを作成したい商品でバナーがない場合は、画像を用意してください。作り方は、下記コードを編集すればOK。
<a href="商品リンク"><img src="画像のURL" alt="画像の説明文"></a>
- 商品リンク:ASPで取得できるリンク
- 画像のURL:アップロードしたURL
- 画像の説明文:変更する必要なし
③アフィリエイトリンクを用意
こちらもASPで取得できるものです。下記のようなやつですね。(※一部消してます)
以上、AFFINGER6ランキングを作成する前準備でした。
続いては基本設定を解説していきます。
AFFINGER6(アフィンガー)ランキングの基本設定
- ランキングの大見出しの設定
- オリジナルページへのリンクボタンに表示するテキスト
- ランキング全体の説明
- ランキングの表示
- バナーサイズの設定
- 演出の設定
それではランキング機能の基本的な設定を解説します。解説項目は上記の6つ。
まずは「ランキング管理」→「基本設定」をクリックしてください。(※画像はAFFINGER5ですが、内容は同じです)
そこから各種設定を行います。
①ランキングの大見出しの設定
「ランキング大見出し」は、下記画像の「①」に対応しています。
設定画面は下記の通りで、「大見出しテキスト」に表示させたい文章を入力してください。
こちらは任意の設定なので表示させたい人は設定しましょう。

②オリジナルページへのリンクボタンに表示するテキスト
「オリジナルページへのリンクボタンに表示するテキスト」は、下記画像の「②」に対応しています。
設定画面は下記の通りで、リンクボタンに表示させたい文章を入力してください。

③ランキング全体の説明
こちらは、大見出しとランキング一覧の間に表示させる説明を記入できます。
設定画面は下記です。
大見出しとランキング一覧の間に文章を表示させたい人は設定しておくべきですが、僕は必要なしだと判断しています。
というのも、あまり文章だらけになっても見栄えが悪いのでね。

④ランキングの表示
こちらでは、「記事本文」以外でランキングを表示させる箇所を設定します。
- トップページに表示
- 固定ページの記事下に表示
- 投稿ページの記事下に表示
- サイドバーに表示
- カテゴリー一覧に表示
上記5点に設置できるので、表示させたい箇所にチェックを入れてください。
もし記事内にのみ表示したいならチェックを外しておきましょう。

⑤バナーサイズの設定
バナーサイズの設定では、下記画像の「b」に表示される、バナーの大きさを設定できます。
設定画面は下記です。
バナーは大きい方が読者が見やすいので、「バナーサイズを大きくする(300px)」にチェックを入れておきましょう。

⑥演出の設定
演出の設定では、下記画像の「d」「e」のボタンを、「光るボタン」に装飾できます。
設定画面は次の通り。
装飾したい人は、「ボタンに光る演出を入れる」にチェックを入れましょう。

以上でAFFINGER6のランキングの基本設定が完了しました。
ここからはランキングタイトルの設定やアフィリエイトコードの設定などの、ランキングの作成を解説していきます。
AFFINGER6(アフィンガー)ランキングの作成手順
- タイトルの設定
- スターの設定
- アフィリエイトコード(バナー)の設定
- アフィリエイトコード(テキスト)の設定
- 説明文の記入
- 詳細ページへのリンクURL設定
ランキングの作成手順は上記の6つ。それでは1つずつ解説していきます。
まずは下記のとおり「ランキング管理」→「ランキング1位」をクリックしてください。(※画像はAFFINGER5ですが、内容は同じです)
そこから各種設定を行います。(※2位、3位の設定も同じ手順です)
①タイトルの設定
「タイトル」とは、下記「a」の部分です。
設定画面は下記で、テキスト欄に表示させたいタイトルを入力してください。
好きなタイトルにしてOKですが、おすすめはシンプルな商品名。間違っても「飲むだけで痩せるサプリメント」のようなタイトルはやめておきましょう。
せっかくランキングを作成したのに、怪しくて誰もクリックしてくれません。また、何も入力しないと表示されないので注意です。

②スターの設定
「スター」とは、下記画像の赤線の部分です。
設定画面は下記で、表示させたいスターの数にチェックを入れて下さい。
こちらの設定は任意なので、お好みでOKです。

③アフィリエイトコード(バナー)の設定
「アフィリエイトコード(バナー)の設定」は、下記画像の「b」の部分に対応しています。
設定画面は下記で、表示させたいASPのバナーコードを記入して下さい。
もし紹介したい商品のバナーがない場合は、自作しましょう。
まずは下記の通りWordPressに画像をアップロードしていただき、「URL」をコピーしてください。
あとは下記のようにコードを作成していただければOK。
<a href="①商品リンク"><img src="②画像URL"></a>
ちなみに、画像又はバナーは横長の長方形の方がランキングを挿入した時にきれいに表示されますよ。
[st-kaiwa1r]正方形だとバランスがおかしいです。。。[/st-kaiwa1]
④アフィリエイトコード(テキスト)の設定
「アフィリエイトコード(テキスト)の設定」は、下記画像の「e」に対応しています。
設定画面は下記で、空欄の部分に表示させたい商品のテキストリンクを入力してください。
⑤説明文の記入
「説明文」は、下記「c」に対応しています。
設定画面は下記で、あまり長すぎるとスマホで読みにくいので簡潔にまとめましょう。

⑥詳細ページへのリンクURL設定
「詳細ページへのリンクURL」は、下記画像の「d」に対応しています。
設定画面は下記で、サイト内に商品の紹介記事を書いているのであれば、その記事のURLを入力してください。
もしなければ、空欄でOKです。ただし、「詳細ページへ」のボタンは無くなります。

以上でAFFINGER6のランキング作成が完了です。最後に「保存」を忘れずに。
さて、ここからはさらにランキングをおしゃれに見せるカスタマイズ方法を解説します。
AFFINGER6(アフィンガー)ランキングのカスタマイズ
- ランキング見出し
- リンクボタン
- トップ以外に表示されるランキング一覧
ランキングのカスタマイズは上記の3項目が可能です。1つずつ解説しますね。
まずは「ランキング管理」→「CSS」の順でクリックしてください。
そこから各種カスタマイズをしていきます。
①ランキング見出し
ランキングの見出しをカスタマイズすることができます。
- ランキング見出しテキスト色
- ランキング見出し背景色
- ランキング見出しボーダー色
上記3点を変更することができるので、お好きに変更してください。

②リンクボタン
リンクボタンの見出しをカスタマイズすることができます。
- リンク文字カラー
- オリジナルリンク背景色
- アフィリエイトリンクボタン背景色
上記3点を変更することができるので、お好きに変更してください。
番号は下記画像に該当します。

③トップ以外に表示されるランキング一覧
トップ以外に表示されるランキング一覧をカスタマイズすることができます。
- ランキングタイトル吹き出し背景色
- ランキング総タイトル文字色
- ランキング一覧背景色
変更しなくても十分にきれいですが、気になる人はお好みで変更してください。

以上、AFFINGER6ランキングのカスタマイズについてでした。
さて、これですべての設定は完了です。
続いてはいよいよ設置方法について。次の項で詳しく解説していきますね。
AFFINGER6(アフィンガー)ランキング設置方法
- 記事内に設置する方法
- トップページに設置する方法
- ウィジェットで自在に設置する方法
ランキングの設置方法は上記の3パターンあります。
1つずつ解説していきます。
①記事内に設置する方法
作成したランキングは、[rank〇]のようにショートコードを記事に挿入すると、指定箇所にランキングが表示されます。
設置コード
- ランキング1位:rank1
- ランキング2位:rank2
- ランキング3位:rank3
※ランキングが表示されてしまうため、[ ]は外しています。
一度ランキング機能の設定が終わってしまえば、ショートコードを入力するだけで簡単に出力されます。
こんな感じにね。

②トップページに設置する方法
「ランキング管理」→「基本設定」の順でクリックしていき、「ランキング表示」を見つけて下さい。
トップページに表示させたければ、「トップページに表示」にチェックを入れればOK。
また、その他にもサードバーに表示させたりもできるので、お好きなところにチェックを入れて下さい。

③ウィジェットで自在に設置する方法
WordPress管理画面から「外観」→「ウィジェット」をクリック。
その中の、「00̠STINGERカスタムHTML」を表示させたい箇所にドラッグ。
あとはショートコードを入力すればOKです。

以上、ランキングの設置方法についてでした。
これでいつでもランキングの設置が可能になったわけですが、まだ設置してはいけません。
ランキング機能には3つの注意点があるので、それを理解してからにしましょう。

AFFINGER6(アフィンガー)ランキングの注意点
- 説明文は短めにすること
- ランキングの作成は3つまで
- ランキング設置はできるだけ自然に
ランキング機能の注意点は上記の3点。
1つずつ解説していきます。
①説明文は短めにすること
説明文とは、下記画像の「c」の部分。
ランキングで紹介したい商品の説明文はできるだけ短く簡潔に。
せっかく見栄えが良くて目立つ機能なのに、文字が多すぎると読者はうんざり。

説明文は詳細ページで解説すればいいので、ここでは一言で素晴らしさを伝え、最後に"詳しくは詳細ページへ"のようにしましょう。

②ランキングの作成は3つまで
残念なことに、ランキング機能は無料で使えるのは3つまで。もし3つでは足りないのであれば、こちらのAFFINGERタグ管理マネージャー3を購入してください。
AFFINGERタグ管理マネージャー3を使えばランキングを10個まで作成することができます。

③ランキング設置はできるだけ自然に
ランキング機能は"目立つ"というメリットがありますが、逆に目立ちすぎるという言い方もできます。自然に設置していれば違和感はないのですが、例えば見出しごとに設置すると違和感だらけ。
押し売り感がハンパなくなります。どうしても目立ってしまう機能なので、ランキングの設置はあくまでも自然に。

以上、AFFINGER6ランキング機能の注意点でした。
これであなたはランキングマスター。怖いものなしです。正しく設定・設置をし、収益アップを目指しましょう。
まとめ:AFFINGER6(アフィンガー)ランキング機能を使って収益をアップさせよう
本記事はAFFINGER6のランキング機能の使い方についてまとめました。
手順通り実行していただければ、トータルでも10分もかからない作業でランキング機能の作成から設置まで完了できます。
設定さえ終わってしまえば、その後はショートコードを入力するだけ。

ランキング機能は非常に目立ち、収益アップの可能性を秘めているので、使い方をしっかりマスターしておきましょう。
また、当サイトでは下記のようにアフィンガー6に関して役に立つ情報を網羅的にまとめているので、気になるものがあれば読んでみてください。
-
[購入特典あり]AFFINGER6(アフィンガー)の購入&導入手順
続きを見る
-
【特典付きレビュー】AFFINGER6(アフィンガー)の口コミ・評判まとめ
続きを見る
-
【アフィンガー6 JET】評価、導入・カスタマイズ方法【すべて語る】
続きを見る
-
AFFINGER6(アフィンガー)がSEOに強いと言われる5つの理由
続きを見る
-
【最短5分】AFFINGER6(アフィンガー)の初期設定を徹底解説
続きを見る
-
【初心者向け】AFFINGER6の使い方【絶対に使う機能6選】
続きを見る
-
[コピーOK]AFFINGER6でトップページをカスタマイズする手順
続きを見る
-
【AFFINGER6】吹き出し機能の設定から使い方まで徹底解説
続きを見る
-
AFFINGER6(アフィンガー)のブログカードの作り方。2秒で作れます。
続きを見る
-
【超おしゃれ】AFFINGER6のスライドショーの設定方法と使い方
続きを見る
-
【徹底解説】AFFINGER6で目次を作る方法3選
続きを見る