このような疑問にお答えします。
✓本記事の執筆者
Twitter：かずき(@k03mind)
AFFINGER5のランキング機能は非常に優秀で、売りたい商品をとにかく目立たせることができます。
しかし、設定が難しくて挫折する人が多数。せっかくの機能を使えていない人が多いです。
ということで今回は、AFFINGER5のランキング作成手順を徹底的に解説していきます。
※本記事はすでにAFFINGER5を購入している人向けの記事です。もし、まだ購入されていないのであれば、下記の記事をどうぞ☟
目次
AFFINGER5(アフィンガー)ランキング完成イメージ
まずは完成形をイメージしてもらいたいので、僕が作成したランキングをご覧ください☟
自分で言いますが、なかなか綺麗にできているかと思います。
これから解説する内容を実践していただければ、必ず同じクオリティのランキングを作成することができます。
それでは次の項から解説していきますね。
AFFINGER5(アフィンガー)ランキングを作成する前準備
まずは前準備から。ランキングを作成するには下記3点が必要です。
- ASPに登録
- バナーor画像を用意
- アフィリエイトリンクを用意
1つずつ解説していきますね。
１．ASPに登録
まずはASPの登録が必須です。
というのも、ランキング機能を使ってアフィリエイト商品を販売するので。
この記事を読んでいる人はすでにASPの登録が済んでいるかと思いますが、もしまだの人のためにおすすめASPをまとめます☟
上記2点は審査が必要ない、誰でも登録可能なASPです。
２．バナーor画像を用意
バナーとは画像にリンクが埋め込まれているものですね。こちらは先ほど用意したASPで取得することができます。
もし自分がランキングを作成したい商品でバナーがない場合は、画像を用意してください。
作り方は、下記コードを編集すればOK☟
<a href="商品リンク"><img src="画像のURL" alt="画像の説明文"></a>
- 商品リンク：ASPで取得できるリンク
- 画像のURL：アップロードしたURL
- 画像の説明文：変更する必要なし
３．アフィリエイトリンクを用意
こちらもASPで取得できるものです。下記のようなやつですね☟
以上、AFFINGER5ランキングを作成する前準備でした。
続いては基本設定を解説していきます。
AFFINGER(アフィンガー5)ランキングの基本設定
それではランキング機能の基本的な設定を解説します。解説項目は次の6つ☟
- ランキングの大見出しの設定
- オリジナルページへのリンクボタンに表示するテキスト
- ランキング全体の説明
- ランキングの表示
- バナーサイズの設定
- 演出の設定
まずは「ランキング管理」→「基本設定」をクリックしてください。
そこから各種設定を行います。
１．ランキングの大見出しの設定
「ランキング大見出し」は、下記画像の「①」に対応しています。
設定画面は下記の通りで、「大見出しテキスト」に表示させたい文章を入力してください。
こちらは任意の設定なので表示させたい人は設定しましょう。
２．オリジナルページへのリンクボタンに表示するテキスト
「オリジナルページへのリンクボタンに表示するテキスト」は、下記画像の「②」に対応しています。
設定画面は下記の通りで、リンクボタンに表示させたい文章を入力してください。
３．ランキング全体の説明
こちらは、大見出しとランキング一覧の間に表示させる説明を記入できます。
設定画面はこちら☟
大見出しとランキング一覧の間に文章を表示させたい人は設定しておくべきですが、僕は必要なしだと判断しています。
というのも、あまり文章だらけになっても見栄えが悪いのでね。
４．ランキングの表示
こちらでは、「記事本文」以外でランキングを表示させる箇所を設定します。
- トップページに表示
- 固定ページの記事下に表示
- 投稿ページの記事下に表示
- サイドバーに表示
- カテゴリー一覧に表示
上記5点に設置できるので、表示させたい箇所にチェックを入れてください。
もし記事内にのみ表示したいならチェックを外しておきましょう。
５．バナーサイズの設定
バナーサイズの設定では、下記画像の「b」に表示される、バナーの大きさを設定できます。
設定画面はこちら☟
バナーは大きい方が読者が見やすいので、「バナーサイズを大きくする（300px）」にチェックを入れておきましょう。
６．演出の設定
演出の設定では、下記画像の「d」「e」のボタンを、「光るボタン」に装飾することが可能です。
設定画面は次の通り☟
装飾したい人は、「ボタンに光る演出を入れる」にチェックを入れましょう。
以上でAFFINGER5のランキングの基本設定が完了しました。
ここからはランキングタイトルの設定やアフィリエイトコードの設定などの、ランキングの作成を解説していきます。
AFFINGER5(アフィンガー)ランキングの作成手順
ランキングの作成手順は次の6つ☟
- タイトルの設定
- スターの設定
- アフィリエイトコード(バナー)の設定
- アフィリエイトコード(テキスト)の設定
- 説明文の記入
- 詳細ページへのリンクURL設定
それでは1つずつ解説していきます。
まずは「ランキング管理」→「ランキング1位」をクリックしてください。
そこから各種設定を行います。(※2位、3位の設定も同じ手順です)
１．タイトルの設定
「タイトル」とは、下記画像の「a」の部分です。
設定画面は下記で、テキスト欄に表示させたいタイトルを入力してください。
好きなタイトルにしてOKですが、おすすめはシンプルな商品名。
間違っても「飲むだけで痩せるサプリメント」のようなタイトルはやめておきましょう。
せっかくランキングを作成したのに、怪しくて誰もクリックしてくれませんよ。
また、何も入力しないと表示されないので注意です。
２．スターの設定
「スター」とは、下記画像の赤線の部分です。
設定画面は下記で、表示させたいスターの数にチェックを入れて下さい。
こちらの設定は任意ですので、お好みでOKです。
３．アフィリエイトコード(バナー)の設定
「アフィリエイトコード(バナー)の設定」は、下記画像の「b」の部分に対応しています。
設定画面は下記で、表示させたいASPのバナーコードを記入して下さい。
もし紹介したい商品のバナーがない場合は、自作しましょう。
まずはWordPressに画像をアップロードしていただき、「URL」をコピーしてください。
あとは下記のようにコードを作成していただければOK。
<a href="①商品リンク"><img src="②画像URL"></a>
ちなみに、画像又はバナーは横長の長方形の方がランキングを挿入した時にきれいに表示されますよ。
４．アフィリエイトコード(テキスト)の設定
「アフィリエイトコード(テキスト)の設定」は、下記画像の「e」に対応しています。
設定画面は下記で、空欄の部分に表示させたい商品のテキストリンクを入力してください。
５．説明文の記入
「説明文」は、下記画像の「c」に対応しています。
設定画面は下記で、あまり長すぎるとスマホで見たときに読みにくいので簡潔にまとめましょう。
６．詳細ページへのリンクURL設定
「詳細ページへのリンクURL」は、下記画像の「d」に対応しています。
設定画面は下記で、サイト内に商品の紹介記事を書いているのであれば、その記事のURLを入力してください。
もしなければ、空欄でOKです。ただし、「詳細ページへ」のボタンは無くなります。
以上でAFFINGER5のランキング作成が完了です。最後に「保存」をクリックすることを忘れずに。
さて、ここからはさらにランキングをおしゃれに見せるカスタマイズ方法を解説します。
AFFINGER5(アフィンガー)ランキングのカスタマイズ
ランキングのカスタマイズは下記の3項目が可能です☟
- ランキング見出し
- リンクボタン
- トップ以外に表示されるランキング一覧
1つずつ解説しますね。
まずは「ランキング管理」→「CSS」の順でクリックしてください。
そこから各種カスタマイズをしていきます。
１．ランキング見出し
ランキングの見出しをカスタマイズすることができます☟
- ランキング見出しテキスト色
- ランキング見出し背景色
- ランキング見出しボーダー色
上記3点を変更することができるので、お好きに変更してください。
２．リンクボタン
リンクボタンの見出しをカスタマイズすることができます☟
- リンク文字カラー
- オリジナルリンク背景色
- アフィリエイトリンクボタン背景色
上記3点を変更することができるので、お好きに変更してください。
番号は下記画像に該当します。
３．トップ以外に表示されるランキング一覧
トップ以外に表示されるランキング一覧をカスタマイズすることができます☟
- ランキングタイトル吹き出し背景色
- ランキング総タイトル文字色
- ランキング一覧背景色
変更しなくても十分にきれいですが、気になる人はお好みで変更してください。
以上、AFFINGER5ランキングのカスタマイズについてでした。
さて、これですべての設定は完了です。
続いてはいよいよ設置方法について。次の項で詳しく解説していきますね。
AFFINGER5(アフィンガー)ランキング設置方法
ランキングの設置方法は下記の3パターンあります。
- 記事内に設置する方法
- トップページに設置する方法
- ウィジェットで自在に設置する方法
1つずつ解説していきます。
１．記事内に設置する方法
作成したランキングは、[rank〇]のようにショートコードを記事に挿入すると、指定箇所にランキングが表示されます。
設置コード
- ランキング1位：rank1
- ランキング2位：rank2
- ランキング3位：rank3
※ランキングが表示されてしまうため、[ ]は外しています。
一度ランキング機能の設定が終わってしまえば、ショートコードを入力するだけで簡単に出力されます。
こんな感じにね。
２．トップページに設置する方法
「ランキング管理」→「基本設定」の順でクリックしていき、「ランキング表示」を見つけて下さい。
トップページに表示させたければ、「トップページに表示」にチェックを入れればOK。
また、その他にもサードバーに表示させたりもできるので、お好きなところにチェックを入れて下さい。
３．ウィジェットで自在に設置する方法
WordPress管理画面から「外観」→「ウィジェット」をクリック。
その中の、「00̠STINGERカスタムHTML」を表示させたい箇所にドラッグ。
あとはショートコードを入力すればOKです。
以上、ランキングの設置方法についてでした。
これでいつでもランキングの設置が可能になったわけですが、まだ設置してはいけません。
ランキング機能には3つの注意点があるので、それを理解してからにしましょう。
次の項で解説しますね。
AFFINGER5(アフィンガー)ランキングの注意点
ランキング機能の注意点は下記の3点☟
- 説明文は短めにすること
- ランキングの作成は３つまで
- ランキング設置はできるだけ自然に
1つずつ解説していきます。
１．説明文は短めにすること
説明文とは、下記画像の「c」の部分。
ランキングで紹介したい商品の説明文はできるだけ短く簡潔に。
せっかく見栄えが良くて目立つ機能なのに、文字が多すぎると読者はうんざり。
説明文は詳細ページで解説すればいいので、ここでは一言で素晴らしさを伝え、最後に"詳しくは詳細ページへ"のようにしましょう。
２．ランキングの作成は３つまで
残念なことに、ランキング機能は無料で使えるのは3つまで。
もし3つでは足りないのであれば、こちらのAFFINGERタグ管理マネージャー３を購入してください。
AFFINGERタグ管理マネージャー３を使えばランキングを10個まで作成することができます。
３．ランキング設置はできるだけ自然に
ランキング機能は"目立つ"というメリットがありますが、逆に目立ちすぎるという言い方もできます。
自然に設置していれば違和感はないのですが、例えば見出しごとに設置すると違和感だらけ。
押し売り感がハンパなくなります。
どうしても目立ってしまう機能なので、ランキングの設置はあくまでも自然に。
以上、AFFINGER5ランキング機能の注意点でした。
これであなたはランキングマスター。怖いものなしです。正しく設定・設置をし、収益アップを目指しましょう。
それでは最後にまとめです。
まとめ：AFFINGER5(アフィンガー)ランキング機能を使って収益をアップさせよう
本記事はAFFINGER5のランキング機能の使い方についてまとめました。
手順通り実行していただければ、トータルでも10分もかからない作業でランキング機能の作成から設置まで完了できます。
設定さえ終わってしまえば、その後はショートコードを入力するだけ。
ランキング機能は非常に目立ち、収益アップの可能性を秘めているので、使い方をしっかりマスターしておきましょう。
また、その他にもAFFINGER5には面白い機能があります。
詳細は個別でまとめた記事があるので、どうぞご活用ください☟
✓アフィンガー5の使い方
✓トップページカスタマイズ
>>[コピーOK]アフィンガー5でトップページをカスタマイズする手順
✓スライドショーの使い方
>>【超おしゃれ】アフィンガー5のスライドショーの設定方法と使い方
✓ブログカードの使い方
✓吹き出し機能の使い方
それでは今日はこのへんで。グッバーイ