【AFFINGER6（アフィンガー６）】ランキング機能の作成方法とカスタマイズ

こんにちは、めらです。

アフィンガー６では、ランキング機能を簡単に作ることができてとても便利ですよね。

でも、ランキング機能の作成方法がわからなくて、困った経験はありませんか？

わからない人

・ランキングの作成方法を知りたい•••
・ランキングのカスタマイズ方法を知りたい•••

ということで、この記事では現在AFFINGER6を使用している私が、アフィンガー６でのランキングの作成方法を詳しくご紹介します。

⬇︎今回作成するランキングはこんな感じ⬇︎

それではいきましょう！

⬇︎AFFINGER6を購入検討されている方は、以下の徹底レビュー記事をご覧ください⬇︎

気になった方は、記事の購入ボタンをクリックしてみてください。

ランキングの必要性

ランキングを作成する前に、「なぜランキングを作成する必要があるのか」を理解しておく必要があります。

結論、シンプルにその商品の魅力度を伝えるためです。

ランキングを使うことで、ひと目でそのジャンルにおける商品の魅力度がわかります。

たとえば、あなたが関東地方在住でラーメン屋を探しているときに、「関東地方　ラーメン屋」と調べますよね。

その時、検索結果には「関東地方　ラーメン屋　オススメランキング」みたいな記事が出てくると思います。

それを見ることで、関東地方のラーメン屋の違いだったり魅力度が視覚的にわかるわけです。

これはラーメン屋に限った話ではありません。

あなたが取り扱っているブログジャンルにも応用できます。

ランキング機能を使って、もう一段階上のサイトを目指しましょう！

AFFINGER6（アフィンガー６）でのランキング作成前の準備

はじめに、ランキングを作成する前に準備をします。

必要な準備は、以下の通りです。

１つずつ見ていきましょう！

ASPに登録

はじめに、「ASPってなに？」と思われた方がいらっしゃるかもしれないので、簡単に補足です。

ASPとはアフィリエイト・サービス・プロダイバの略称で、広告主とアフィリエイター（あなた）を繋ぐサービスです。

ランキングではアフィリエイト商品を販売するので、ASPの登録は必須となっています。

アフィンガー６を使っているあなたはすでにASPに登録済みだと思いますが、まだ登録されてないようでしたら以下のASPに登録してみてください。

A8.ネットは業界最大級のサービスです。

アフィリエイトブログをしているなら必ず登録しておきましょう。

もしもアフィリエイトはAmazonや楽天のアソシエイトの審査に落ちた方にオススメです。

もしもアフィリエイト経由だと審査がゆるいので、合格できます。

上記の２点はいずれも審査が必要なく、誰でも無料で登録できるASPです。

参考にしてください

めら

バナーか画像を用意

次に、バナーか画像を用意します。

「バナー」とは、画像にリンクが埋め込まれているもので、ASPから取得することができます。

上記の画像はもしもアフィリエイトのバナーです。

通常、バナー広告欄からソースコードをコピーして、記事に貼りつけるだけで、プレビューでバナー画像が表示されます。

もし自分がランキングで作成したい商品でバナーがない場合は、自分でバナーを作成することもできます。

まず、バナーに使用する画像を用意してください。

そして下記のコードを編集してください。

<a href="商品リンク"><img src="画像のURL" alt="画像の説明文"></a>

それぞれ解説します。

編集といってもやることは簡単です！

めら

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

こちらもASPから取得できます。

ランキングを作成する前の準備は以上になります！

AFFINGER6（アフィンガー６）でのランキングの基本設定

次に、ランキングの基本設定をします。

基本設定の手順は、以下の通りです。

１つずつ見ていきましょう！

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

はじめに、ランキングの大見出しの設定です。

「ランキング管理」→「基本設定」→「ランキングの大見出し（任意）」

大見出しに表示させたいテキストがある場合は、入力してください。

私の場合は、何も変更していません。

めら

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

次に、オリジナルページへのリンクボタンに表示するテキストの設定です。

「ランキング管理」→「基本設定」→「オリジナルページへのリンクボタンに表示するテキスト」

リンクボタンに表示させたいテキストを入力してください。

デフォルトでは「詳細ページへ」になっています。

私の場合は、何も変更していません。

めら

ランキング全体の説明

次に、ランキング全体の説明です。

「ランキング管理」→「基本設定」→「ランキング全体の説明」

大見出しとランキングの間にテキストを表示させたい場合は、入力してください。

ただ、ここに文章を入れてしまうとランキング自体がごちゃごちゃした印象になり、正直わかりずらいです。

ひと目見てわかるのがランキングのメリットだと思っているので、そこは理解しておきましょう。

私の場合は、何も変更していません。

めら

ランキングの表示

次に、ランキングの表示の設定です。

「ランキング管理」→「基本設定」→「ランキングの表示」

ランキングを表示させたい所にチェックを入れてください。

固定ページでフロントページを作っている方は、「固定ページ•••」にチェックを入れてください。

私の場合は「固定ページ」に入れています

めら

バナーサイズの設定

次に、バナーサイズの設定です。

「ランキング管理」→「基本設定」→「バナーサイズ」

バナーは小さいよりも大きい方が読者の目につきやすいので、チェックすることをオススメします。

私の場合は、チェックしています。

めら

演出の設定

最後に、演出の設定です。

「ランキング管理」→「基本設定」→「ランキングの表示」

チェックを入れることで、アフィンガー定番の光るボタンにすることができます。

ただのボタンより、光るボタンの方が読者の目につきやすく、クリック率向上につながるのでチェックすることをオススメします。

私の場合は、チェックしています。

めら

最後に「save」で保存を忘れないようにしましょう！

AFFINGER6（アフィンガー６）でのランキングの作成方法

次に、ランキングの作成方法です。

ランキングの作成方法は、以下の通りです。

１つずつ見ていきましょう！

タイトルの設定

はじめに、タイトルの設定です。

「ランキング管理」→「ランキング１位」→「タイトル」

タイトルに表示させたいテキストを入力します。

タイトルは自由に決めることができます。

オススメは商品名です。

「そんなシンプルで大丈夫なのかな？」と思ったかもしれませんが、大丈夫です。

読者が知りたいのはあくまでもランキングという統計データです。

そこでわざわざ商品に変なタイトルをつけるよりかは、シンプルな商品名をつけたほうが無難といえます。

スターの設定

次に、スターの設定です。

「ランキング管理」→「ランキング１位」→「スター」

その商品のオススメ度をスターを使って表すことができます。

ここは読者が一番見ている所なので、必ず表示するようにしましょう。

デフォルトでは非表示になっています。

Amazonの評価を想像するとわかりやすいですが、スターをつける際に全部５だと読者はあなたのサイトに対して不信感を感じます。

他のデータを参考にしながら、正確な評価をするように心がけましょう！

アフィリエイトコード（バナー）の設定

次に、アフィリエイトコード（バナー）の設定です。

「ランキング管理」→「ランキング１位」→「アフィリエイトコード（バナー）」

ASPサイトからコピーしたアフィリエイトコードを貼りつけてください。

もし自分がランキングで作成したい商品でバナーがない場合は、自分でバナーを作成することもできます。

まず、バナーに使用する画像を用意してください。

そして下記のコードを編集してください。

<a href="商品リンク"><img src="画像のURL" alt="画像の説明文"></a>

それぞれ解説します。

アフィリエイトコード（テキスト）の設定

次に、アフィリエイトコード（テキスト）の設定です。

「ランキング管理」→「ランキング１位」→「アフィリエイトコード（テキスト）」

ボタンに表示させたいテキストを<a>タグの間入力してください。

</a>の前に表示させたいテキストを入力です！

めら

説明文の記入

次に、説明文の記入です。

「ランキング管理」→「ランキング１位」→「説明」

「ランキング全体の説明」では不要と言いましたが、商品説明文は必要です！

商品説明文を作成する際は、長文にせずに簡潔にまとめるようにしましょう。

スマホだと長文が読みにくいです。

めら

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

最後に、詳細ページへのリンクURLの設定です。

「ランキング管理」→「ランキング１位」→「詳細ページへのリンクURL」

紹介する商品の記事を書いている場合は、その記事のURLを入力してください。

なければ空欄で大丈夫です。

その場合は、「詳細ページへ」ボタンがなくなります。

ただ、それだと見栄えが悪いし、内部リンクを充実させるためにも可能なら書いておきましょう。

最後に「save」で保存を忘れないようにしましょう！

ランキング２位・３位もそれぞれ同じやり方です！

めら

AFFINGER6（アフィンガー６）でのランキングのカスタマイズ方法

「普通のランキングでは満足できない！」って思う方もいらっしゃいますよね。

そこで、カスタマイズ方法もご紹介します。

ランキングのカスタマイズできるところは、以下の通りです。

１つずつ見ていきましょう！

ランキングの見出し

はじめに、ランキングの見出しを変更することができます。

変更できるところは、以下の通りです。

お好みの色に変更してみてください。

私の場合は、何も変更していません。

めら

リンクボタン

次に、リンクボタンの変更です。

変更できるところは、以下の通りです。

お好みの色に変更してみてください。

私の場合は、何も変更していません。

めら

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

最後に、トップ以外に表示されるランキング一覧の変更です。

変更できるところは、以下の通りです。

お好みの色に変更してみてください。

私の場合は、何も変更していません。

めら

AFFINGER6（アフィンガー６）でのランキングの設置方法

それでは、作成したランキングを実際に設置してみましょう。

ランキングの設置は、以下の３パターンあります。

１つずつ見ていきましょう！

記事内に設置する方法

はじめに、記事内に設置する方法です。

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

実際に入力してみると、こんな感じになります。

AFFINGER6（ACTION）

あの有名ブロガーも使っている最強テーマ。

カスタマイズ豊富でSEOに強いので
プロはもちろん初心者にもオススメ。

詳しくは「詳細ページ」で解説しています。

詳細ページへ

公式サイトへ

きちんと表示されましたか？

めら

うまく表示されない原因は、以下の通りです。

きちんと表示されていない人は、以下の記事を参考にしてください。

ランキングが表示されない原因について詳しく解説しています。

トップページやサイドバーに設置する方法

次に、トップページやサイドバーなどの特定の場所に設置する方法です。

「ランキング管理」→「基本設定」→「ランキングの表示」

表示させたい所にチェックをしてください。

たとえば、サイドバーに表示させたい場合は「サイドバーに表示」にチェックを入れてください。

私の場合は、固定ページにチェックを入れています。

めら

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

最後にウィジェットで自由に設置する方法です。

「外観」→「ウィジェット」→「STINGER：カスタムHTML」→「コード入力」

上記の場合、サイドバートップのプロフィールカードの下にランキングが表示されるように設定しています。

他の場所に移動させたい場合は、「STINGER：カスタムHTML」を移動させるだけで大丈夫です。

AFFINGER6（アフィンガー６）ランキングを使うときの注意点

ランキングは便利ですが、使い方を間違えるとマイナスイメージがついてしまいます。

そうならないためにも、ランキングを使うときの注意点を紹介します。

ランキングを使うときの注意点は、以下の通りです。

１つずつ見ていきましょう！

説明文は簡潔に

説明文とは、その商品の概要の部分です。

よくある間違えとして、この説明文で商品の魅力を長文で書こうとしている人がいます。

これは絶対にやめましょう。

よく考えてみるとわかりますが、この説明文を読んで商品を実際に購入する人はほとんどいません。

むしろここの説明文は簡潔にして、詳細ページに力を入れるべきです！

そこを勘違いしないようにしましょう！

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

アフィンガー６で使えるランキング機能は３つまでです。

ただ、正直３つあれば十分だと思います。

想像してみるとわかりやすいですが、オススメ〇〇ランキングベスト10みたいな記事で、ベスト10の商品を買いますか？

おそらくあなたが気になるのはベスト３までの商品ではないしょうか。

もし、４個以上のランキングを作りたい場合は、有料サービスか自作HTML等で対応することができます。

ランキングの使い過ぎはダメ

ランキング機能はそのままでも目立ちますが、光るエフェクトを入れるともっと目立つようになります。

それだけ目立つものを使いすぎるとどうなるでしょうか？

結論、主張のぶつかり合いが起こり、押し売り感が強くなります。

なので、多くても１記事につき１回の設置が適切と言えます。

まとめ：AFFINGER6（アフィンガー６）でランキングを設定して収益率UPを目指そう

今回は、アフィンガー６でのランキングの作成方法を解説しました。

ランキングは一度設定しておくことで、[rank○]のコードだけで呼び出すことができます。

また、商品の違いや魅力度がひと目でわかるので、読者にやさしいです。

ランキングを上手に使って収益アップを目指しましょう！

最後まで読んでいただき、ありがとうございました！

まだAFFINGER6を購入されてない方は、以下の徹底レビュー記事をご覧ください