AFFINGER6のランキング作成手順を徹底解説

AFFINGER6のランキング機能ってどうやって使うの？作り方を教えて！

このような疑問にお答えします。

AFFINGER6のランキング機能は非常に優秀で、売りたい商品をとにかく目立たせることができます。しかし、設定が難しくて挫折する人が多数。せっかくの機能を使えていない人が多いです。

ということで今回は、AFFINGER6のランキング作成手順を解説していきます。本記事を読めばランキング機能を間違いなく使いこなすことができますよ。

AFFINGER6(アフィンガー)ランキング完成イメージ

まずは完成形をイメージしてもらいたいので、僕が作成したランキングをご覧ください。

Y!mobile

ポイント

• ワイモバ親子割で15GBが月々990円（税込み）～
• 全国どこでも大手キャリアと同じで速度が安定
• 余ったデータ容量は次月へ繰り越し！
• 他社からの乗り換えで最大1万円キャッシュバック

公式ページはこちら

自分で言いますが、なかなか綺麗にできているかと思います。

これから解説する内容を実践していただければ、必ず同じクオリティのランキングを作成することができます。それでは次の項から解説していきますね。

AFFINGER6(アフィンガー)ランキングを作成する前準備

まずは前準備から。ランキングを作成するには上記3点が必要です。

1つずつ解説していきますね。

①ASPに登録

この記事を読んでいる人はすでにASPの登録が済んでいるかと思いますが、もしまだの人のためにおすすめASPをまとめます。

上記2点は審査が必要ない、誰でも登録可能なASPです。アフィリエイトをやるならどちらも登録しておきましょう。

②バナーor画像を用意

もし自分がランキングを作成したい商品でバナーがない場合は、画像を用意してください。作り方は、下記コードを編集すればOK。

③アフィリエイトリンクを用意

こちらもASPで取得できるものです。下記のようなやつですね。（※一部消してます）

以上、AFFINGER6ランキングを作成する前準備でした。

続いては基本設定を解説していきます。

AFFINGER6(アフィンガー)ランキングの基本設定

それではランキング機能の基本的な設定を解説します。解説項目は上記の6つ。

まずは「ランキング管理」→「基本設定」をクリックしてください。（※画像はAFFINGER5ですが、内容は同じです）

そこから各種設定を行います。

①ランキングの大見出しの設定

「ランキング大見出し」は、下記画像の「①」に対応しています。

設定画面は下記の通りで、「大見出しテキスト」に表示させたい文章を入力してください。

こちらは任意の設定なので表示させたい人は設定しましょう。

ちなみに、僕は設定していません。(2020年10月)

kazuki

②オリジナルページへのリンクボタンに表示するテキスト

「オリジナルページへのリンクボタンに表示するテキスト」は、下記画像の「②」に対応しています。

設定画面は下記の通りで、リンクボタンに表示させたい文章を入力してください。

おすすめは僕も表示させている「詳細ページへ」です。

kazuki

③ランキング全体の説明

こちらは、大見出しとランキング一覧の間に表示させる説明を記入できます。

設定画面は下記です。

大見出しとランキング一覧の間に文章を表示させたい人は設定しておくべきですが、僕は必要なしだと判断しています。

というのも、あまり文章だらけになっても見栄えが悪いのでね。

見栄えがいい方が読者満足度が高まります。

kazuki

④ランキングの表示

こちらでは、「記事本文」以外でランキングを表示させる箇所を設定します。

上記5点に設置できるので、表示させたい箇所にチェックを入れてください。

もし記事内にのみ表示したいならチェックを外しておきましょう。

ちなみに僕はトップページに表示しています。

kazuki

⑤バナーサイズの設定

バナーサイズの設定では、下記画像の「b」に表示される、バナーの大きさを設定できます。

設定画面は下記です。

バナーは大きい方が読者が見やすいので、「バナーサイズを大きくする（300px）」にチェックを入れておきましょう。

見やすければ見やすいほどいい！

kazuki

⑥演出の設定

演出の設定では、下記画像の「d」「e」のボタンを、「光るボタン」に装飾できます。

設定画面は次の通り。

装飾したい人は、「ボタンに光る演出を入れる」にチェックを入れましょう。

ちなみに僕はチェックを入れています。

kazuki

以上でAFFINGER6のランキングの基本設定が完了しました。

ここからはランキングタイトルの設定やアフィリエイトコードの設定などの、ランキングの作成を解説していきます。

AFFINGER6(アフィンガー)ランキングの作成手順

ランキングの作成手順は上記の6つ。それでは1つずつ解説していきます。

まずは下記のとおり「ランキング管理」→「ランキング1位」をクリックしてください。（※画像はAFFINGER5ですが、内容は同じです）

そこから各種設定を行います。(※2位、3位の設定も同じ手順です)

①タイトルの設定

「タイトル」とは、下記「a」の部分です。

設定画面は下記で、テキスト欄に表示させたいタイトルを入力してください。

好きなタイトルにしてOKですが、おすすめはシンプルな商品名。間違っても「飲むだけで痩せるサプリメント」のようなタイトルはやめておきましょう。

せっかくランキングを作成したのに、怪しくて誰もクリックしてくれません。また、何も入力しないと表示されないので注意です。

怪しさは取り払おう。ここはシンプルに商品名でOK。

kazuki

②スターの設定

「スター」とは、下記画像の赤線の部分です。

設定画面は下記で、表示させたいスターの数にチェックを入れて下さい。

こちらの設定は任意なので、お好みでOKです。

ちなみに僕はスター5つにチェックを入れています。

kazuki

③アフィリエイトコード(バナー)の設定

「アフィリエイトコード(バナー)の設定」は、下記画像の「b」の部分に対応しています。

設定画面は下記で、表示させたいASPのバナーコードを記入して下さい。

もし紹介したい商品のバナーがない場合は、自作しましょう。

まずは下記の通りWordPressに画像をアップロードしていただき、「URL」をコピーしてください。

あとは下記のようにコードを作成していただければOK。

ちなみに、画像又はバナーは横長の長方形の方がランキングを挿入した時にきれいに表示されますよ。

[st-kaiwa1r]正方形だとバランスがおかしいです。。。[/st-kaiwa1]

④アフィリエイトコード(テキスト)の設定

「アフィリエイトコード(テキスト)の設定」は、下記画像の「e」に対応しています。

設定画面は下記で、空欄の部分に表示させたい商品のテキストリンクを入力してください。

⑤説明文の記入

「説明文」は、下記「c」に対応しています。

設定画面は下記で、あまり長すぎるとスマホで読みにくいので簡潔にまとめましょう。

目安は3行です。長い文章は読みにくいですよ。

kazuki

⑥詳細ページへのリンクURL設定

「詳細ページへのリンクURL」は、下記画像の「d」に対応しています。

設定画面は下記で、サイト内に商品の紹介記事を書いているのであれば、その記事のURLを入力してください。

もしなければ、空欄でOKです。ただし、「詳細ページへ」のボタンは無くなります。

紹介記事は可能なら書いておきましょうね！

kazuki

以上でAFFINGER6のランキング作成が完了です。最後に「保存」を忘れずに。

さて、ここからはさらにランキングをおしゃれに見せるカスタマイズ方法を解説します。

AFFINGER6(アフィンガー)ランキングのカスタマイズ

ランキングのカスタマイズは上記の3項目が可能です。1つずつ解説しますね。

まずは「ランキング管理」→「CSS」の順でクリックしてください。

そこから各種カスタマイズをしていきます。

①ランキング見出し

ランキングの見出しをカスタマイズすることができます。

上記3点を変更することができるので、お好きに変更してください。

ちなみに僕はデフォルトのまま。特にカスタマイズしなくても綺麗だと感じたので。

kazuki

②リンクボタン

リンクボタンの見出しをカスタマイズすることができます。

上記3点を変更することができるので、お好きに変更してください。

番号は下記画像に該当します。

こちらも僕はデフォルトのままです。

kazuki

③トップ以外に表示されるランキング一覧

トップ以外に表示されるランキング一覧をカスタマイズすることができます。

変更しなくても十分にきれいですが、気になる人はお好みで変更してください。

こちらも僕はデフォルトのまま。

kazuki

以上、AFFINGER6ランキングのカスタマイズについてでした。

さて、これですべての設定は完了です。

続いてはいよいよ設置方法について。次の項で詳しく解説していきますね。

AFFINGER6(アフィンガー)ランキング設置方法

ランキングの設置方法は上記の3パターンあります。

1つずつ解説していきます。

①記事内に設置する方法

作成したランキングは、[rank〇]のようにショートコードを記事に挿入すると、指定箇所にランキングが表示されます。

一度ランキング機能の設定が終わってしまえば、ショートコードを入力するだけで簡単に出力されます。

Y!mobile

ポイント

• ワイモバ親子割で15GBが月々990円（税込み）～
• 全国どこでも大手キャリアと同じで速度が安定
• 余ったデータ容量は次月へ繰り越し！
• 他社からの乗り換えで最大1万円キャッシュバック

公式ページはこちら

こんな感じにね。

設定がめんどくさい代わりに、出力は鬼簡単！

kazuki

②トップページに設置する方法

「ランキング管理」→「基本設定」の順でクリックしていき、「ランキング表示」を見つけて下さい。

トップページに表示させたければ、「トップページに表示」にチェックを入れればOK。

また、その他にもサードバーに表示させたりもできるので、お好きなところにチェックを入れて下さい。

僕はトップページにのみチェックを入れています！

kazuki

③ウィジェットで自在に設置する方法

WordPress管理画面から「外観」→「ウィジェット」をクリック。

その中の、「00̠STINGERカスタムHTML」を表示させたい箇所にドラッグ。

あとはショートコードを入力すればOKです。

ウィジェットを使えばサイドバーの一番上に表示させることも可能です！

kazuki

以上、ランキングの設置方法についてでした。

これでいつでもランキングの設置が可能になったわけですが、まだ設置してはいけません。

ランキング機能には3つの注意点があるので、それを理解してからにしましょう。

次の項で解説しますね。

kazuki

AFFINGER6(アフィンガー)ランキングの注意点

ランキング機能の注意点は上記の3点。

1つずつ解説していきます。

①説明文は短めにすること

説明文とは、下記画像の「c」の部分。

ランキングで紹介したい商品の説明文はできるだけ短く簡潔に。

せっかく見栄えが良くて目立つ機能なのに、文字が多すぎると読者はうんざり。

こんなに読めねぇよ。。。

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

購入ページに誘導する文章を簡潔に書こう！

kazuki

②ランキングの作成は３つまで

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

AFFINGERタグ管理マネージャー３を使えばランキングを10個まで作成することができます。

まぁ、正直3つもあれば十分かなと思う。なので僕は購入していません。

kazuki

③ランキング設置はできるだけ自然に

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

押し売り感がハンパなくなります。どうしても目立ってしまう機能なので、ランキングの設置はあくまでも自然に。

多くても1記事に1回の設置がベスト！

kazuki

以上、AFFINGER6ランキング機能の注意点でした。

これであなたはランキングマスター。怖いものなしです。正しく設定・設置をし、収益アップを目指しましょう。

まとめ：AFFINGER6(アフィンガー)ランキング機能を使って収益をアップさせよう

本記事はAFFINGER6のランキング機能の使い方についてまとめました。

手順通り実行していただければ、トータルでも10分もかからない作業でランキング機能の作成から設置まで完了できます。

設定さえ終わってしまえば、その後はショートコードを入力するだけ。

めちゃ簡単です！

kazuki

ランキング機能は非常に目立ち、収益アップの可能性を秘めているので、使い方をしっかりマスターしておきましょう。

また、当サイトでは下記のようにアフィンガー6に関して役に立つ情報を網羅的にまとめているので、気になるものがあれば読んでみてください。