【AFFINGER6】AFFINGERの機能を使ったランキングの作成する方法解説【超簡単！】

自分のブログにおすすめランキングとかを挿入したいけど、どうしたらいいの？？

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

AFFINGER6を利用していたら、プラグインを使用せずに簡単にランキング形式でおすすめしているものを掲載することができます。

おすすめしたい商品やアフィリエイトリンクにも活用できるので、すごく便利ですよ！

本記事の内容

F AFFINGER6でランキングの掲載方法

F AFFINGER6でランキングのカスタマイズ

＼当ブログ使用テーマ／

誰でも簡単オシャレなデザイン！
インフォトップ月間総合第１位！
SEO対策と収益UPを標準で搭載！

有名ブロガーに愛用されているSEO最強WordPressテーマ。本ブログも使用中のカスタマイズ性が抜群のテーマです！

AFFINGER6の購入はこちら

AFFINGERのランキングを作成した完成図

ますはAFFINGER6で作成したランキングの完成形から確認していきましょう。

各商品リンクやテキスト、装飾は自由にカスタマイズが可能です。

実際に作成したランキングがこちら

こんな感じで、プラグインを使用せずに簡単にランキングを表示することが可能です！

AFFINGER6のランキングを作成する手順

イラスト

それでは、ランキング作成に必要なものが準備できたら、早速作っていきましょう。

step
1ランキング作成画面に移動する

WordPress管理画面より、『AFFINGER管理』→『ランキング管理』へ移動します。

『ランキング1位〜3位』の各設定項目をクリックします。

step
2ランキング情報の入力

各順位の設定画面に移動したら、完成画面をイメージしながら、各項目の情報を入力しましょう。

入力項目の説明

入力項目	備考
a：タイトル	ランキングのタイトル部分
スター※任意	星を５段階評価で入力
b：アフィリエイトコード	<a href="アフィリエイトリンク"><img src="画像のリンク" alt="代替テキスト"></a>の形で入力
e：アフィリエイトコード	ASPでテキストタイプのアフィリエイトリンクをコピーし、貼り付け。
c：説明（上部）	バナーを設定している場合は、バナーの横に文字が表示
c：説明（下部）	バナーがある場合はバナーの下、バナーがない場合は左詰めで文字の表示
d：詳細ページへのリンクURL	アフィリエイトのリンクを貼り付け

以上の項目を入力することで、１〜３位までのランキングの作成が可能になります。

実際に作成したランキング

1位：AFFINGER6（WING）

AFFINGER6（WING）はSEOの機能も考えられている「稼ぐ」ことに特化したWordPressテーマです。月に100万以上稼ぐ有名ブロガーの方を始め、メンタリストのDaiGoさんなど著名人も利用している、信頼と実績あるテーマです。

機能や詳細について

>> 公式サイト

step
3ランキングの基本設定のカスタマイズ

ランキングの設置が行えたら、見た目をカスタマイズしてオリジナリティを出していきましょう。

同じランキングの設定画面から「基本設定」などから設定変更が可能です。

こちらの項目は「ランキングの大見出し」や「リンクボタンの表示テキスト」の変更などが可能です。

step
4ランキングの基本デザインのカスタマイズ

続いて、ボタンやタイトルの色などの基本的な配色を変更していきます。ランキングの設定画面より「CSS」を選択しましょう。

「リンクボタン」などの項目より、ボタンの配色をカスタマイズが可能です。

細かい設定を行うことでオリジナリティ溢れるランキングが作れますよ！

ランキングの設置方法

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

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

記事内に配置する
サイドバーや投稿ページ記事したなどで、固定で配置する
ウィジェットを使用して配置する

それぞれの配置方法について、解説していきます。

記事内に配置する

記事内に配置する場合には、HTMLテキスト or ビジュアルテキストで挿入の２パターンあります。

HTMLテキストで挿入する場合

 ランキングの挿入
<div class="rankid1">[rank1]</div>
<div class="rankid2">[rank2]</div>
<div class="rankid3">[rank3]</div>

HTMLテキストで挿入する場合

 ランキングの挿入
[rank1]
[rank2]
[rank3]

以上のコードを、追加するだけでOKです！

追加作業が行えたら、プレビュー画面にて正しく表示できているか確認してみましょう。

上のイメージのように、ランキング表示ができていたら作業完了です！

サイドバーや投稿ページ記事したなどで、固定で配置する

２つ目の方法は、サイドバーや投稿記事したに固定表示させる方法です。

WordPress管理画面から「ランキング管理」→「基本設定」から設定が可能です。

上記のように「ランキングの表示」の項目にて、ランキングを表示させたい場所を選択するだけで表示することが可能です。

基本的にはチェックをつけるだけなので、表示設定が簡単にできます。

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

ランキングの設定位置をより細かく指定したい時には、ウィジェット機能を使います。

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

このように、左側のウィジェットから追加したいエリアへ設置を完了させましょう。

デフォルトでランキング設置のウィジェットはありませんので、「カスタムHTML」にランキング作成のコードを追加していきます。

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

コードは先ほどと同様のものになります。

 ランキングの挿入
<div class="rankid1">[rank1]</div>
<div class="rankid2">[rank2]</div>
<div class="rankid3">[rank3]</div>

複数種類のランキングを表示させてい場合

ランキングを複数設置したい

３位以降のランキング外も設定したい…

こういった場合には、公式AFFINGERのランキング作成機能を拡張する「AFFINGERタグ管理マネージャー」を使用することで可能になります。

AFFINGER6タグ管理マネージャーでは、同じブログ内で複数種類のランキング作成が可能で、10位までの順位作成にも対応しています。

他にも、データの分析が可能なので、収益化を目指している方は検討してみるのもアリかと思います。

「AFFINGERタグ管理マネージャー」は有料なので、コスパを考えて購入するか判断しましょう。

まとめ：AFFINGER6でランキングを作成してみよう！

イラスト

今回はAFFINGER6のランキングの作成方法とカスタマイズ方法の解説でした。

まとめは以下の通りです。

まとめ：AFFINGERの機能を使ったランキングの作成する方法

AFFINGERのランキング設定画面より設定可能
ランキング表示の画像とASPリンクの用意
ボタンなどのデザインのカスタマイズ

わかりやすいランキングを作成してクリックしてもらえば、アフィリエイト報酬の収益化も目指せます。

ぜひ一度、自分のブログでもランキングを作成してみてください！

参考トップページのカスタマイズに関する記事かこちら

参考アップデートやインストール・プラグインに関する記事はこちら

参考投稿記事のカスタマイズも関する記事はこちら

参考Gogleアドセンス×AFFINGERのカスタマイズについての記事はこちら

【AFFINGER6】AFFINGERの機能を使ったランキングの作成する方法解説【超簡単！】

AFFINGERのランキングを作成した完成図

ランキング作成時に用意するもの

ASPへの登録→紹介リンクの作成

ブログを収益化したい！こんな時に必見のおすすめASP5選紹介！

バナー画像の準備