AFFINGER7には、おすすめの商品やサービスを見やすく紹介できるランキング機能が搭載されています。
「初心者向けレンタルサーバーランキング」など、順位を付けて比較したい記事では非常に便利な機能です。
しかし、初めてAFFINGER7を使う方には少し解りにくい面があります。
この記事では、AFFINGER7のランキング機能の使い方を初心者向けに画像付きで分かりやすく解説していきます。
※ この記事はAFFINGER6時代に作成した内容をAFFINGER7対応版として更新しています。
AFFINGER7のランキング管理とは？
AFFINGER7のランキング管理は特定の場所に一括でランキングを表示させることが出来る機能です。
特にアフィリエイト記事では、ランキング形式の表示は成約にも大きく直結します。
こんな感じのランキングを表示することができます。
ランキング機能のメリット
商品の比較がしやすい
順位・画像・説明・ボタンがまとまって表示されるため、商品の違いが一目で分かります。
比較記事との相性は非常に高く、読者が迷わず商品を選べるようになります。
クリック率アップにつながる
ランキング形式は視線が自然と上位商品へ集まります。
さらにボタンも目立つため、通常のテキストリンクよりクリックされやすい傾向があります。
アフィリエイト記事と相性抜群
AFFINGER7のランキング機能は、アフィリエイトリンクを設置することを前提に作られているため、商品紹介記事との相性は非常に優れています。
収益記事を作るなら、ぜひ活用したい機能の一つです。
ランキング機能の注意点
ランキング機能には使用前に把握しておくべき、注意点もあります。
複数種類のランキングが作成できない
例えば、「レンタルサーバーランキング」の他に「WordPressテーマランキング」など複数のランキング作成はできません。
指定場所に一括で表示される
ランキング管理で作成したランキングは固定ページの記事下や投稿ページ記事下に一括で表示させることができます。
しかし、この記事には表示させたいけど、こちらの記事には表示させたくないといった使い分けができないデメリットがあります。
ショートコードを併用すれば、記事ごとの使い分けが出来ないわけではないですが・・・
AFFINGER7でランキングを作成する手順
実際にランキング機能の使い方について解説していきます。
ランキング管理を開く
メニューからランキング管理を開きます。
ランキングの作成
ランキング１位から３位までを作成します。
設定項目はa)~e)の５か所です。
| a) タイトル | ランキングで紹介する商品のタイトルと星を設定 |
| b)アフィリエイトコード（バナー） | アフィリエイトコード（バナー）を入力して商品画像を設定 |
| c)説明 | 紹介する商品の説明文を設定 |
| d)詳細ページへのリンクURL | 自分のサイトで商品の詳細ページがある場合はURLを入力 |
| e)アフィリエイトコード（テキスト） | アフィリエイトコード（テキスト）を入力 |
a) タイトル
ランキングで紹介する商品のタイトルと星数を設定します。
b) アフィリエイトコード（バナー）
アフィリエイトコード（バナー）を入力することで、商品画像を表示させることができます。
バナーサイズは３００ｐｘ以上が推奨です。
c) 説明
紹介する商品の説明分を入力します。
d) 詳細ページへのリンクURL
自分のサイトで商品の詳細ページなどがある場合に、そのURLを入力します。
e) アフィリエイトコード（テキスト）
アフィリエイトコード（テキスト）を入力します。
ランキング商品の登録が終了したら保存するのを忘れないように注意しましょう。
ランキングの大枠・表示位置を設定
ランキング管理の基本設定を選択します。
基本設定では以下の内容を設定できます。
| ①：ランキングの大見出し | ランキングの大見出しの設定 |
| ②：オリジナルページへのリンクボタンに表示するテキスト | オリジナルページへのボタンに表示するテキストを設定 |
| ランキング全体の説明 | 大見出しの説明文の設定 |
| ③：ランキングの表示 | ランキングを表示させる場所の設定 |
| ④：バナーサイズ | バナーサイズを300pxに設定 |
| ⑤：演出 | ボタンに光る演出を追加 |
① ランキングの大見出し
ランキングの大見出しを作成します。
例：入力欄に「お勧めレンタルサーバー」と入力するとこんな感じです。
② オリジナルページへのリンクボタンに表示するテキスト
オリジナルページへのリンクボタンに表示するテキストを設定可能です。
ランキング全体の説明
大見出し下のランキングの説明分です。
③ ランキングの表示
ランキングを表示する位置を設定できます。
トップページとサイドバーに表示を選択するとこんな感じです。
④ バナーサイズ
バナーサイズを300pxに変更することが可能です。
⑤ 演出
ボタンに光る演出を加えることができます。
ランキングアイコンを変更する方法
ランキングのアイコンを変更することが可能です。
変更する方法は「ランキング管理」の「アイコン」から１位～３位にそれぞれ用意した画像をアップロードすればOKです。
実際にランキングアイコンを変更してみるとこんな感じです。
アップロードする画像サイズは５０～６０ｐｘ程度がいいかもしれません。
上の表示例では６０×６０ｐｘの画像を作成してアップロードしました。
オリジナルのランキングアイコンを使用したい場合は複数サイズの画像を準備して実際表示を確認しながら設定するのがお勧めです。
見出しやボタンの色などを変更する方法
見出しやボタンの色を「ランキング管理」→「ランキングCSS」で変更することができます。
ランキングCSSで変更できること
ランキングCSSの項目では以下の設定が可能です。
| ランキング見出し部分 |
|---|
| ランキング見出しテキスト色 |
| ランキング見出し背景色 |
| ランキング見出しボーダー色 |
| リンクボタン部分 |
|---|
| リンク文字カラー |
| オリジナルリンク背景色 |
| アフィリエイトリンク背景色 |
| その他 |
|---|
| ランキングタイトル吹き出し背景色 |
| ランキング総タイトル文字色 |
| ランキング一覧背景色 |
以上がランキング管理の使い方になります。
ランキング管理を使わずにランキングを作成する方法
ランキング管理では特定の場所に一括でランキング表示をさせることには便利です。
しかし、自由度があまり高くないイメージです。
記事ごとにもっと自由にランキングを表示させたい時にはちょっと使いにくいですね。
例えば、
母の日にお勧めのプレゼント特集という記事なら「母の日にお勧めプレゼントランキング」
父の日にお勧めのプレゼント特集という記事なら「父の日にお勧めプレゼントランキング」
というように、記事ごとランキングを表示させることも記事作成機能で作成可能です。
例えば、下のような感じのランキングです。
記事作成機能を使って簡単なランキングを作成する方法についてはこちらの記事をご覧になってください。
→ AFFINGER7の記事作成機能で簡単なランキングを作成する方法
まとめ
AFFINGER7のランキング機能を活用すれば、商品やサービスを分かりやすく比較できる記事を簡単に作成できます。
特にアフィリエイト記事では、順位・商品画像・説明・ボタンをまとめて表示できるため、読者が商品を比較しやすくなり、クリック率や成約率の向上も期待できます。
一括でランキングを表示させたい時に便利な機能なので、活用してみてくださいね。
\\ 収益化に強い圧倒的人気テーマ！//
AFFINGER7がついにリリース！
AFFINGER6から更に機能がパワーアップ！
※ AFFINGER6は現在、AFFINGER7へと移行となりました。