AFFINGER6で簡単に作る方法はありますか？
こうしたお悩みを解決します。
AFFINGER6のランキング機能を使えば、プラグイン不要で見やすいランキング記事を作れます。
本記事では、AFFINGER6のランキング表示を画像付きで初心者でもわかりやすく解説します。
この記事を読めば、今日からあなたの記事にもランキング表示を導入することがでますよ。
では本題に移りましょう。
AFFINGER6のランキング完成図
まず始めに、今回作るランキングの完成図がこちらです。
ConoHa WING（コノハウィング）
サイト表示速度国内No.1！
初期費用無料＆月額料金も安く、年間数億円を稼ぐ有名ブロガーも使用中のサーバーです。
これからWordPressブログを始めたい方におすすめ。
Xserver（エックスサーバー）
19年以上運営の老舗サーバー！
大きな事故や障害もなく、長年の信頼があるため安心して利用できます。
24時間365日のサポート体制付きです。
mixhost（ミックスホスト）
アダルトサイトの運営OK！
ブログで動画を扱っても、表示速度満足度でNo.1を獲得。
自動バックアップ・データ復元 標準装備で安心して利用できるレンタルサーバーです。
見やすくて伝わりやすいランキングが作れます。
さっそく作り方を解説していきますね。
AFFINGER6でランキングを作成する事前準備
ランキングを作る前に、事前準備として以下の3つを用意しておきましょう。
- ASPの登録
- 紹介したい商品のアフィリエイトリンク
- 画像もしくはバナー画像
アフィリエイトリンクやバナー画像を準備するためにも、まずはじめにASPサイトの登録が必要です。
まだ登録していない方は、審査のないASPサイトをご紹介している審査なしで登録できるアフィリエイトASP【これさえ登録すればOK！】をご覧ください。
また、画像はオリジナルのものを利用してもかまいません。
無料でプロ使用の画像が使えるサイトであればShutterstockが有名です。
今なら無料トライアルを利用できるので、気になる方はぜひ活用してみてください。
AFFINGER6でランキングを作成する方法
準備ができたら、ランキングの設定に進みます。
順番に解説します。
ランキング基本設定
WordPress管理画面から「ランキング管理」→「基本設定」に進みます。
表示された各項目を入力していきます。
| 項目 | 入力内容 |
|---|---|
| ランキングの大見出し | ランキング全体の説明を入力できます（入力しなくてもOK） |
| オリジナルページへのリンクボタンに表示するテキスト | 左に設置されているボタンに教示させる文言を自由に設定できます |
| ランキング全体の説明 | 大見出しとランキングの間に文字を追加したい場合に入力します |
| ランキングの表示 | ランキング表示位置について（後ほど解説） |
| バナーサイズ | ランキング画像を大きめに表示できます |
| 演出 | 光る演出のあるボタンに変更できます |
それぞれお好みに合わせて設定しましょう。
最後に「Save」ボタンを押せば、ここまで完了です。
アイコン設定
次はアイコンの設定です。
アイコンとは以下のように、ランキングに表示される画像のこと。
初期設定から変更したい場合は、好きなアイコンを指定することもできます。
1〜3位のランキング設定
続いて、1〜3位のランキングを設定していきます。
画面に表示された各項目を入力していきます。
| 項目 | 入力内容 |
|---|---|
| タイトル | ランキングのタイトル（商品名など） |
| スター | 星5つまで任意で設定できます |
| アフィリエイトコード（バナー） | ASPサイトで取得したバナー（画像）のアフィリエイトコードを入力します |
| アフィリエイトコード（テキスト） | eのテキストボタンに表示する文言とアフィリエイトコードを入力します |
| 説明 | cの部分に表示させる、商品の説明を入力します （長文になりすぎないよう注意） |
| 詳細ページへのリンクURL | ボタン左側のリンクURLを入力します （何もなければ空欄で構いません） |
入力が終われば「Save」を押して保存しましょう。
ランキングのCSS設定
CSSでは、ランキング表示させる見出しやボタンの色をお好みで変更できます。
特にこだわりなければ、初期設定のままでも構いません。
ここまで終われば、ランキングの設定は完了です。
作成したランキングの設置方法 3つ
さっそく作ったランキングをブログに設置していきましょう。
設置方法は大きく分けて3つあります。
順番に解説していきます。
記事内に設置する
記事内に設置するには、以下のコードを設置したい場所に入力するだけでできます。
shortcode
ランキング1位：[rank1]
ランキング2位：[rank2]
ランキング3位：[rank3]
入力が完了したら、きちんと表示されているか確認してみましょう。
うまくいかない時はコードが間違っていないか、ランキング作成時に保存忘れはないか、確認しましょう。
サイドバーに設置する
サイドバーに設定する時は、先ほどの「ランキング基本設定」から行います。
WordPress管理画面から「ランキング管理」→「基本設定」に進みます。
「ランキングの表示」項目の中に「サイドバーに表示」があるのでチェックを入れましょう。
他にも投稿ページの下に表示させる設定もあるので、お好みに応じてチェックを入れてくださいね。
注意点として、サイドバーの上部に表示したりといった細かな位置を指定できません。
好きな位置で表示させたい場合は、次でご紹介するウィジェット設定を行いましょう。
ウィジェットで好きな場所に設置する
ウィジェットでは好きな場所にランキングを表示できます。
今回はサイドバートップに表示していきますね。
WordPress管理画面から「外観」→「ウィジェット」へ進みます。
「カスタムHTML」→「サイドバートップ」を選び、先ほどご紹介したランキングのショートコードを入力します。
サイドバー以外でもOK！ここで設置したい場所を選びます。
ランキングのショートコードを入力し、「保存」をクリックすれば完了です。
最後にきちんと表示されているか確認しましょう。
その他ランキング管理でできること
最後に、その他にランキング設定でできることを2つご紹介します。
リセット方法
作成したランキングを作り直したい時の手順です。
リセットしたランキングは復活できないので注意しましょう。
WordPress管理画面から「ランキング管理」→「ランキングリセット」へ進みます。
「リセットする」にチェックを入れ「Save」を押せば完了です。
複数のランキングを作成
- いろんなパターンのランキングを作りたい
- 3位以降のランキングも表示したい
こうした設定はAFFINGER6タグ管理マネージャーを導入することで設置できるようになります。
AFFINGER6タグ管理マネージャーは複数ランキングを作成できる機能や、ランキングの数を10位まで表示できるようになります。
しかしAFFINGER6タグ管理マネージャーは有料なので、まずは通常のランキングを使ってみてから検討しましょう。
AFFINGER6のランキング機能を取り入れて、ブログ収益化を目指そう！
ここまで、AFFINGER6でランキングを作成する方法を解説しました。
ランキングを設置することで、視覚的にも分かりやすい記事に仕上がりますし、アフィリエイト報酬に繋がるかもしれません。
ぜひあなたのブログでも活用してみてくださいね。
最後までご覧いただき、ありがとうございました。
