AFFINGER5

【絶対できる】AFFINGER5(アフィンガー5)でランキングを作成する方法

2020年7月22日

【絶対できる】AFFINGER5(アフィンガー5)でランキングを作成する方法

 

こまりくん
アフィリエイト商品をランキング順にかっこよく紹介したい!

ぎもんさん
AFFINGER5(アフィンガー5)でランキング形式で表示できる装飾があるって知ったんだけど、どうやって作成するの?

 

当記事ではこんな疑問を解消します。

 

AFFINGER5(アフィンガー5)はプラグインなどを使わずとも、ランキング形式で表示する装飾の機能が備わっています。

 

商品やアフィリエイトリンクをランキング形式で紹介したい人にとっては最適なテーマだね!
トモキ

 

ということで、当記事ではAFFINGER5(アフィンガー5)でランキングを作成する方法を絶対できるよう画像付きで詳しく解説いたしますね。

 

当記事の内容

  • AFFINGER5(アフィンガー5)でランキングを作成する方法
  • 作成したランキングを配置する方法パターンの紹介
  • 作成したランキングのリセット方法
  • ランキングが表示されない時の対処法

 

ちなみに当記事ではアフィンガー5を用意しテーマとして使用していることが前提です。
まだ購入していなく、気になっている方がいましたら是非この機会に検討してみてください。

 

\今なら当サイト限定特典付き/

AFFINGER5の詳細や購入はこちら

 

また、正直なレビューや特典が気になる方はこちらをどうぞ。
>>【限定特典付き】AFFINGER5の正直なレビューと特典の入手方法を紹介!

 

それでは早速記事を見てみましょう!

 

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

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

 

ランキングを実際に作った場合はこちら。
(各商品リンクや文言、装飾の色は自由にカスタマイズが可能です。)

 

WordPressおすすめテーマTOP3(2021年1月)

 

1位:AFFINGER5(WING)

AFFINGER5(WING)は「稼ぐ」に特化したWordPressテーマ。
月に100万以上稼ぐ有名ブロガーを筆頭に、様々なブロガーやメンタリストのDaiGoも使用している、信頼と実績のあるテーマです。

2位:SWELL

SWELLはとにかくシンプルなのに高性能。
導入するプラグインも少なくて済み、ブロックエディタに完全対応しており執筆が楽なのが魅力的です。

3位:THE THOR(ザ・トール)

THE THOR(ザ・トール)はデザイン性やサイトの表示速度、カスタマイズ性、SEO対策、使いやすさなど全体的に平均以上の高いバランスがとれた高水準のテーマです。

 

トモキ
こんなランキングが、プラグインなしで簡単に設定できるよ!

 

それでは続きで作り方を紹介します。

 

 

AFFINGER5(アフィンガー5)でランキングを作成する方法

 

AFFINGER5はテーマの管理画面よりランキングを作成することができますが、その前に必要なものもあるため、まず必要なものを説明してから作り方をご紹介します。

 

AFFINGER5でランキングを作成する流れ①必要なものを準備する

 

ランキングを作るために必要なものはこちら。

 

必要なもの

  1. ASPの登録
  2. 紹介したい商品リンク
  3. バナー画像

 

「ASPの登録」について、こちらに登録しなければ2つ目の「紹介したい商品のリンク」を用意することができません。

 

ASPは利用の際にサイトの審査があるものもあるので、まだ登録していない方は早めに済ませておきましょう。

 

ちなみにASP社によって同じ案件でも単価が違う場合が頻繁にあります。
複数のASPに登録して比較しながらリンクを探さないと損しますよ。

 

CHECK!
【ブログで稼ごう】アフィリエイトでおすすめのASP9社を紹介【登録無料】
【ブログで稼ごう】アフィリエイトでおすすめのASP9社を紹介【登録無料】

続きを見る

 

ASPに登録して紹介したい商品のリンクも用意できたら、次はバナー画像を用意しましょう。

例↓
swell

 

画像を作るときはCanvaという無料のフリーソフトがあるので、作る手段がまだないひとは是非Canvaをお試しください。

 

使い方はCanvaを使用したブログのアイキャッチ画像の作り方で説明しているのでよろしければどうぞ。
(アイキャッチを作る方法を紹介しておりますが、バナー画像としても使用できるので問題ないですよ)

 

CHECK!
Canvaを使用したブログの自作アイキャッチ画像の作り方【完全無料・誰でもできる】
Canvaを使用したブログのアイキャッチ画像の作り方【無料・誰でもできる】

続きを見る

 

 

AFFINGER5でランキングを作成する流れ②ランキングを作成する

 

必要なものが準備できたら、次はいよいよ管理画面からランキングを作成していきます。

 

step
1
ランキングを作成する画面に進む

ランキングを作成する画面に進む

【管理画面】→【ランキング管理】→【ランキング1〜3位】を選択して下さい。
(作りたいランキング順位のものを選択)

 

step
2
情報を入力してランキングを作成する

画面が切り替わったら、情報を入力しましょう。
基本的に、画面に沿って必要な情報を入力すればOKです。

 

トモキ
今回は上の方で紹介した完成イメージの中の「AFFINGER」のランキングを見本に設定を紹介するね!

 

 

該当箇所備考
a) タイトルランキングのタイトルになる部分。
必ず入力して下さい。
スター※任意星で5段階評価をつけることができます。
b) アフィリエイトコード(バナー)<a href="アフィリエイトリンク"><img src="画像のリンク" alt="代替テキスト"></a>の形で入力
e) アフィリエイトコード(テキスト)ASPでテキストタイプのアフィリエイトリンクをコピーし、貼り付けましょう。
c) 説明(上の方)バナーを設定している場合は、バナーの横に文字が表示されます。(見本のような状態)
c) 説明(下の方)バナーがある場合はバナーの下に、バナーがない場合は左詰めで文字が表示されます。
d) 詳細ページへのリンクURLアフィリエイトリンクのURL部分(https://〜)のみを貼り付けましょう。

 

実際に入力するとこのようになります。

 

bのアフィリエイトコード(バナー)について、画像のリンクは【メディア】をクリックし、リンクを知りたい画像をクリックして画面が変わったら【リンクをコピー】の箇所を見ると画像のリンクが取得できます。

 

ここまで設定すると、うまく設定できていれば下の画像のようになりますよ。

 

AFFINGERランキング完成形画像

 

step
3
ランキングをカスタマイズする

ここまで進んだら、見た目を変えてオリジナル感を出しましょう。

 

まず、左の青いボタンのテキストは【管理画面】→【ランキング管理】→【基本設定】の【2) オリジナルページへのリンクボタンに表示するテキスト】で変更が可能です。

 

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

 

また、ボタンやタイトルの色などを変更したい方は、【管理画面】→【ランキング管理】→【CSS】で設定をして見ましょう。

 

ボタンやタイトルの色などを変更したい場合

 

トモキ
こんな感じでランキングの1〜3位までの3つを入力してみよう!

 

 

作成したランキングを配置する方法は4パターン

作成したランキングを配置する方法は4パターン

 

無事ランキングの作成が終わったら、次はページ内の任意の場所にランキングを設置しましょう。

 

ランキングを配置する方法は、次の3つです。

 

ランキングを設置する方法、場所

  1. 記事内に配置
  2. サイドバーや投稿ページ記事下など、記事外に配置
  3. ウィジェットを使い、自在に配置

 

こちらの3箇所への配置方法について、詳しく説明します。

 

 

記事内に配置

 

記事内にランキングを挿入したいときは、下記のコードをコピペして下さい。
(3つ商品を登録していることが前提)

 

 [rank1]
<div class="rankid2">[rank2]</div>
<div class="rankid3">[rank3]</div>

 

無事にできたら下の画像のようになりますよ!

 

AFFINGERのランキングを記事内に配置した画像

 

 

サイドバーや投稿ページ記事下など、記事外に配置

 

AFFINGERは下記の場所であれば【管理画面】→【ランキング管理】→【基本設定】で設置することが可能です。

 

AFFINGERのランキングをサイドバーや投稿ページ記事下など、記事外に配置する方法の図

 

トモキ
チェックをいれるだけで表示されるよ!とっても簡単だね♪

 

 

ウィジェットを使い、自在に配置

 

【ランキング管理】からサイドバーなど配置場所を設定すると、楽ですが設置する場所が限られています。

 

もっと自由にいろんな場所に設置したい方は、ウィジェッドを利用し配置しましょう。

 

方法は、管理画面へ進み【外観】→【ウィジェッド】をクリック。
そしたら次は【00_STINGERカスタムHTML】を任意の場所にドラッグ。

 

無事できたら、ショートコード[rank1]や[rank2]を記述し保存するだけでOKです。

 

AFFINGERのランキングをウィジェットを利用し配置する図

 

トモキ
この方法を駆使すると、サイドバーの"一番上"にランキングを表示させたりすることができるよ!

 

 

作成したランキングのリセット方法

ブログを副業としておすすめできる人の特徴や理由

ぎもんさん
ランキングを作成したけど全部消して新しく作り直したい!

 

そんなときは【管理画面】→【ランキング管理】→【ランキング管理リセット】をクリックしましょう。

 

AFFINGERのランキングをリセットする方法

 

たったこれだけ!
一瞬で最初からやり直すことができますよ。

 

作成したランキングが表示されない時の対処法

作成したランキングが表示されない時の対処法

 

AFFINGER5でランキングを作成した際に、場合によってはうまく表示されないことがあります。

 

トモキ
実は僕もはじめて作成してみたときに、作成してショートコードを貼り付けても全然反映されなくて30分手間取ったことがあるよ!

 

うまく表示されない原因は主に次の3点。

 

ランキングがうまく表示されない原因

  1. 正確にランキングを作成できていない
  2. ショートコードの文字列が正確ではない
  3. AFFINGERタグ管理マネージャーを使用している

 

もしうまく表示されない現象に遭遇しましたら、【問題解決】AFFINGER5でランキングが表示されない時の解決法で詳しく対処法をまとめておりますので是非参考にしてください。

 

CHECK!
【問題解決】AFFINGER5でランキングが表示されない時の解決法
【問題解決】AFFINGER5でランキングが表示されない時の解決法

続きを見る

 

 

複数商品をレビューする時などに積極的に活用しよう!

AFFINGER5(アフィンガー)を豪華特典つきで入手する方法

 

当記事を参考に、AFFINGER5でランキングを作成・配置する方法は理解できましたでしょうか?

 

ランキングは、複数の商品が紹介されている記事で効果を発揮しますよ。

 

複数の商品を紹介されたとき、顧客心理は「一番いいものが欲しい」となります。
そうなった時に、ランキングで明確に良いものが順番に紹介されていると、判断がしやすい。

 

判断がしやすくなるということは、そのぶん購入までのハードルが下がります。

 

ということで、紹介される側からみてもランキングで紹介するということは親切なので、機会があれば是非積極的に使ってみることをおすすめします。

 

 

最後に

 

アフィンガーをまだ導入していないけど、今回の記事で少しでも興味を持たれた方は、参考までにAFFINGER5の正直なレビューとお得な限定特典の入手方法の記事を是非読んでもらえると嬉しいです。

 

CHECK
【最新】AFFINGER5の特典付きレビュー!正直な感想やお得な入手方法もご紹介!
AFFINGER5の正直なレビューとお得な限定特典の入手方法

続きを見る

 

上記のレビュー記事にも書いてありますが、ただいま当サイトよりアフィンガーを購入された方限定で10つの素敵な特典をプレゼントさせていただいております!

 

\今なら当サイト限定特典付き/

AFFINGER5の詳細や購入はこちら

 

また、これから購入を検討されている方はアフィンガー5の購入〜インストール方法を徹底解説を参考に手順通り進めると失敗せずに安全ですので、よろしければこちらもどうぞ。

 

CHECK
【絶対できる】アフィンガー5の購入手順とダウンロード・インストール方法を徹底解説!
【絶対できる】アフィンガー5の購入手順とダウンロード・インストール方法を徹底解説!

続きを見る

 

この記事が参考になれば幸いです。

 

 

関連記事AFFINGER5の正直なレビューと特典の入手方法をご紹介!

関連記事アフィンガー5の購入〜インストールまでの方法を徹底解説

 

 

 

-AFFINGER5
-

Copyright © TOMOKIBLOG , All Rights Reserved.