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

2022年6月13日

 

 

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

 

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

 

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

 

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

 

本記事の内容

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

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

 

 

\ 当ブログ使用テーマ /

  • 誰でもかんたんにオシャレデザイン
  • インフォトップ月間総合ランキング第1位
  • SEO対策と広告収入UP機能を標準装備!

初心者から有名ブロガーまで愛用されているSEO最強WordPressテーマ。下記のボタンから購入で、今なら5,000円相当のプラグインが無料でついてきます。

AFFINGER6の購入はこちら

 

\ AFFINGERのカスタマイズまとめ /

【徹底的に解説】AFFINGER6の設定・デザインをカスタマイズ方法まとめ

続きを見る

 

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

 

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

 

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

 

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

 

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

 

 

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

 

それでは、ランキングを作成するにあたって必要なものを揃えていきましょう。

 

以下のものの用意が必要です。

 

  • ASPの登録
  • 紹介したい商品リンク
  • バナー画像

 

順番に解説していきます。

 

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

 

「ASPの登録」について、ASPとはアフィリエイトサービスにあたるものです。

 

こちらへの登録を行なっていないと、2つ目の項目の「紹介したい商品リンク」が作成できません。

 

ASPへの登録ができていない方は早めに登録を完了しておくとよいでしょう

 

以下の記事を参考にしてみてください!

 

アフィリエイト
【厳選】登録無料ブログ初心者が収益化したい時におすすめなASP5選

続きを見る

 

 

バナー画像の準備

ASPに登録した後は、紹介したい商品のリンクも用意してください。

 

次に、商品リンクを貼り付けるバナー画像を設置します

 

 

画像を作るときはCanvaという無料のフリーソフトがおすすめです!

 

画像サイズの設定から、画像のカスタマイズも簡単に行えます

 

当ブログでもアイキャッチ画像はCanvaにて作成しているものが多数あります!

 

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

イラスト

 

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

 

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

 

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

 

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

 

 

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

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

 

入力項目の説明

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

 

 

 

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

 

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

1位:AFFINGER6(WING)

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

 

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

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

 

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

 

 

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

 

 

 

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

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

 

 

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

 

 

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

 

ランキングの設置方法

 

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

 

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

 

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

 

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

 

記事内に配置する

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

 

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

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

 

 

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

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

 

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

 

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

 

 

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

 

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

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

 

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

 

 

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

 

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

 

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

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

 

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

 

 

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

 

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

 

 

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

 

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

 

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

 

ランキングをリセットしたい場合

イラスト

 

最後に、作成したランキングをリセットしたい場合のリセット方法についての解説です

 

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

 

リセットする」にチェックを入れて最後に「保存」を選択することで、ランキングのリセットが可能です。

 

 

注意ポイント

一度リセットすると、復元することができず再度作り直しになるので、注意しましょう!

 

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

 

ランキングを複数設置したい
3位以降のランキング外も設定したい…

 

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

 

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

 

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

 

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

 

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

イラスト

 

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

 

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

 

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

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

 

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

 

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

  • この記事を書いた人

ANZU

ブログで毎日コツコツ積み上げ|ITスキルとライフハックをアウトプット|プログラミングも独学中|より良い学びと習慣のノウハウを発信| 詳細はブログに掲載していきます。

-AFFINGER, アフィリエイト
-, ,