AFFINGER5

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

2020年8月7日

AFFINGER5でランキングを作成する方法【超カンタン!】
「記事の中におすすめ商品のランキングを表示したい!」
「AFFINGER5(アフィンガー5)でランキングを表示できるって本当?」

今回はこんな疑問を解決していきます。

AFFINGER5(アフィンガー5)では標準でランキングを表示させる機能が備わっているため、誰でもカンタンにおしゃれなランキングを作成できます

「お気に入りの商品レビュー」「アフィリエイトでの商品比較」をしたい方にはもってこいの機能です!

今回のテーマはこちら!

  • AFFINGER5(アフィンガー5)のランクング完成図
  • AFFINGER5(アフィンガー5)でランクングを作成する方法
  • AFFINGER5(アフィンガー5)でランキングを設置する方法
  • ランキング管理の注意点

当サイトではウェブサイトやブログに関する記事を毎日投稿しています。
他の記事も合わせて読んでいただけると嬉しいです。

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

AFFINGER5の詳細を見る

AFFINGER5(アフィンガー5)のランクング完成図

まずは最初に今回作成するランキングの完成イメージを見てみましょう。

【1位】エックスサーバー (Xserver)






サーバーのレンタル、ドメインの取得、WordPressとの連携を一括で設定できてしまうサーバーです。サーバーのスピード・安定性ともに国内トップクラス、WordPressブログを始めたい方にオススメのレンタルサーバーです。

【2位】さくらのレンタルサーバー






WordPressとの連携はもちろん、無料SSLにも対応しており、初心者でも簡単に初期設定ができるハイスペックサーバー。2週間の無料お試し期間があるため安心してご利用できます。

【3位】ロリポップ!






シェア率が非常に高く、教育機関の授業で用いられるほどの知名度!安定・高速サーバーに加え、スタッフによるサポートサービスまで利用できるお得なサービス。

*当サイトではサーバーのランキングを使用しています。
よかったら参考記事もご覧ください。

見ての通り見やすくて分かりやすい最強のランキングをプラグインを使わずに作成できます。

それでは作成手順を紹介していきます。

ランキング作成に必要なものを揃えよう

ランキング作成に必要なものを揃えよう

まずはランキングに必要なものを揃えます

ランキング作成には以下のものが必要です。

ランキング作成に必要なもの

  • バナー画像のコード
  • ボタンのリンク先のコード

アフィリエイトをご利用の方は、各サービスの取引プロジェクトから用意できるはずです。

それぞれのコードを用意できたら次はランキングの作成をしていきます。

【厳選】初心者でも稼げるアフィリエイトASP9社を大公開!
【厳選】初心者でも稼げるアフィリエイトASP9社を大公開

続きを見る

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

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

AFFINGER5では標準でランキング機能の設定を行えます。

WordPress管理画面の左側のサイドバーの下の方にある「ランキング管理」というメニューに移動しましょう

作成手順①ランキング基本設定

基本設定画面

まず最初に一番上の「基本設定」メニューを選択しましょう。

ここではランキング作成にあたって必要な設定をおこないます。

各項目の概要は以下のようになります。

ランキングの大見出し(任意)ランキングの一番上に表示される大見出しの文言を任意で設定できます
オリジナルページへのリンクボタンに表示するテキストオリジナルページに移動するボタン(左のボタン)に表示する文言を設定できます
ランキング全体の説明大見出しとランキング一覧との間に表示する文字を任意で設定できます
ランキングの表示ランキングをどこに配置するか選択できます
(後で詳しく解説)
バナーサイズバナーサイズを大きく出来ます
演出ボタンに光る演出を追加できます(超オススメ!)

それぞれお好みに合わせて設定してみてください。

設定が完了したら保存ボタンを押して変更を保存しましょう。

おすすめポイント

「ボタンに光る演出を追加」は超オススメです。

ボタンに光る演出を加えると、ボタンのクリック率が格段に上がります

アフィリエイトで成果を出したい方にはオススメの機能です。

作成手順②アイコン設定

アイコン設定

アイコン設定は各順位のランキングのアイコンをオリジナル画像にしたい時に使う設定です。

標準の王冠マークを変更したい方は画像をアップロードしましょう。

類似画像はWINGユーザー専用マニュアルからダウンロードできますのでそちらの画像も利用してみると良いでしょう。
*AFFINGER5購入者限定です。

作成手順③順位設定

次にランキングの順位ごとの設定をしていきます。

順位設定

順位設定は上画像のように1〜3位でメニューが分かれています

各メニューではアフィリエイトコードや詳細コードの設定ができます。

各項目の概要は以下のようになります。

タイトル各順位のタイトル(商品名)を設定します
スター5段階評価を任意で設定できます
アフィリエイトコード(バナー)アフィリエイトコードをそのまま貼り付けることで、バナー画像を設定できます
アフィリエイトコード(テキスト)アフィリエイトコードをそのまま貼り付けることで、テキストリンクを設定できます
説明各順位の商品の説明を設定します。
長さとしては3~5文程度がオススメです。
詳細ページへのリンクURL詳細ページのリンク先を設定します。
何も書かないと詳細ボタンは表示されず、アフィリエイトボタンのみが表示されます
nofollowを設定する詳細ページのリンク先に対して設定できます

これらの項目を1~3位すべてに設定しましょう

設定が完了したら保存ボタンを押して変更を保存しましょう。

おすすめポイント

バナー画像は宣伝文句の少ない画像を選びましょう。

宣伝文字が多いと広告感が強くなってしまい、ユーザーは見る気を無くしてしまいます。

作成手順④ランキングCSS設定

ランキングCSS設定

ランキングCSSでは文字色や背景色をカスタマイズできます。

カスタマイズできるボタンの色は以下のとおりです。

  • ランキング見出しテキスト色
  • ランキング見出しテキスト背景色
  • ランキング見出しボーダー色
  • リンク文字カラー
  • オリジナルリンク背景色(上・下・シャドウ・グラデーション)
  • ランキングタイトル吹き出し背景色
  • ランキング総タイトル文字色
  • ランキング一覧背景色

それぞれお好みに合わせて設定してみてください。

設定が完了したら保存ボタンを押して変更を保存しましょう。

*当サイトでは標準のカラーがサイトの色合いとマッチしていると感じたので、カラー設定を変更していません。

おすすめポイント

色をカスタマイズしすぎるとカラーバランスが崩れて見栄えが悪くなることがあります。

むやみに色を変えすぎないようにしましょう。

これでランキングの設定は完了です!

次は作成したランキングを設置していきます。

AFFINGER5で作成したランクングを設置しよう

作成したランクングを設置しよう

作成したランキングは主に3種類の方法で設置できます

それぞれの違いを確認しながら設置してみてください!

設置手順1. 記事に設置

まず1つ目は投稿記事に設置する方法です。

この方法は、記事エディタにショートコードを埋め込むことで設置できます。

ショートコード入力

このように、たったの3行で設置ができます。

さすがAFFINGER5ですね!

 実際のコード(コピー可)
<div class="rankid1">[rank1]</div>
<div class="rankid2">[rank2]</div>
<div class="rankid3">[rank3]</div>

*divタグを消すと1~3位まで王冠の色が同じになります。

HTMLコードを書きますので、ビジュアルタブではなくテキストタブから入力しましょう。

設置手順2. サイドバーや記事下に設置

2つ目はサイドバーや記事下といったサブコンテンツに設置する方法です。

先程も少し触れましたが、WordPress管理画面から「ランキング管理」→「基本設定」メニューから設定できます。

設置場所

上画面のように「ランキングの表示」という項目がありますので、ランキングを表示したい場所にチェックを入れましょう

ここでは、サイドバーのどこに設置するかは指定できません。

「サイドバーの一番上」「カテゴリ一覧とアーカイブの間」といったように細い位置を設定するにはウィジェットから設定する必要があります。

設置手順3. ウィジェットで細かく配置

設置位置を細かく指定したい時はウィジェット機能を使います。

まずはWordPress管理画面から「外観」→「ウィジェット」に移動しましょう。

ウィジェット画面

このようにウィジェットでは左側がウィジェット一覧右側が設置場所に分かれています。

標準でランキングを設置するウィジェットは用意されていませんので、「カスタムHTML」にランキング作成のコードを書いて実装します。

ウィジェット一覧の左上に「00_STINGERカスタムHTML」というボックスがありますので設置したい場所にドラッグしてあげましょう。

*サイドバーの一番上に設置したい時は「サイドバートップ」にドラッグしましょう。

ドラッグが終わったら、カスタムHTMLの「▼」を押して展開し、エディタ画面にランキング作成のコードを入力します。

 実際のコード(コピー可)
<div class="rankid1">[rank1]</div>
<div class="rankid2">[rank2]</div>
<div class="rankid3">[rank3]</div>

*divタグを消すと1~3位まで王冠の色が同じになります。

コードは先程と同じです。

入力が終わったら保存ボタンを押して変更を保存しましょう。

ランキング管理の注意点

ランキング管理の注意点

続いてAFFINGER5でランキングを管理する際の注意点をご説明します。

作成したランキングをリセットする方法

作成したランキングをリセットしたい時はボタン一つでリセットできます。

WordPress管理画面から「ランキング管理」→「ランキングリセット」に移動します。

ランキングリセット

すると上画面が表示されますので「リセットする」にチェックを入れて「保存」を押しましょう。

注意ポイント

リセットすると復元できないので注意しましょう。

複数のランキングを作成する方法

「ランキングを複数用意したい」
「3位以降のランキングも設定したい」

そう思われる方もいるでしょう。

ランキング作成機能を拡張するには現在のAFFINGER5にAFFINGERタグ管理マネージャーを新たに購入する必要があります。

AFFINGER5タグ管理マネージャーでは複数種類のランキング作成10位までの順位作成に対応しています。

AFFINGERタグ管理マネージャーは有料です。

コスパを考えながら購入するかどうか判断しましょう。

まとめ:AFFINGER5(アフィンガー5)でランキングを作成する方法【超カンタン!】

まとめ:AFFINGER5(アフィンガー5)でランキングを作成する方法【超カンタン!】

まとめ:AFFINGER5(アフィンガー5)でランキングを作成する方法【超カンタン!】

  • AFFINGER5のランキング機能を使えばカンタンにオシャレなランキング一覧が作れる
  • ランキング機能を拡張したい時はAFFINGER5タグ管理マネージャーを使おう

今回はAFFINGER5(アフィンガー5)でオシャレなランキングを作成する方法について解説しました。

ランキングを作成してクリックしてもらえば、アフィリエイト報酬アップにも繋がります。

AFFINGER5をご使用の方には作らない理由がありません!

わからない部分がある方はお問合せフォームで質問して貰えばすぐに返信します。

今サイトではこれからもウェブサイト運営に関する有益な情報をたくさん発信していきたいと思っていますので応援よろしくお願いします!

AFFINGER5のカスタマイズ方法のまとめはこちら

AFFINGER5(アフィンガー5)のカスタマイズ方法まとめ
AFFINGER5(アフィンガー5)のカスタマイズ方法まとめ

続きを見る

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

AFFINGER5の詳細を見る

AFFINGER5関連の記事はこちら

All in One SEO Packの導入手順
AFFINGER5を使ってみた感想【良かった点と悪かった点】

続きを見る

AFFINGER5で人気記事を表示する方法【WordPress Popular Posts】
AFFINGER5で人気記事を表示する方法【WordPress Popular Posts】

続きを見る

AFFINGER5でオシャレなトップページを作る方法を大公開!
AFFINGER5でオシャレなトップページを作る方法を徹底解説

続きを見る

AFFINGER5でアイキャッチ画像を設定するカンタンな方法をご紹介
AFFINGER5でアイキャッチ画像を設定する方法をご紹介

続きを見る

AFFINGER5(アフィンガー5)に関する記事一覧はこちら→

  • この記事を書いた人(執筆者情報)

wagtechblog

プログラミングとWordPressに溺れた私立大学生。フリーランスのiOSエンジニアとしてアプリ開発しています。その傍らWeb集客のベンチャー企業で勤務。主にフロントエンドエンジニア・WebアプリケーションエンジニアとしてWebアプリケーション開発、SEOマーケティング、データビジュアライゼーションといった業務もしてます。好きな言語はSwiftとPythonとPHPとRuby。趣味はApex Legendsとゲーミングデバイス集め。

-AFFINGER5

Copyright © wagtechblog All Rights Reserved.