AFFINGER5

AFFINGER5でランキングが表示されない時の対処法5選

AFFINGER5でランキングが表示されない時の対処法5選

「AFFINGER5でランキングを設定したいのに表示されない」
「今まで表示されていたランキングが表示されなくなった」

AFFINGER5(アフィンガー5)の便利機能のひとつであるランキング機能ですが、表示されなくて困っていませんか?

今回はAFFINGER5(アフィンガー5)でランキングが表示されなくなった時の対処法5選をご紹介します。

ランキングが表示されなくて困っている人はぜひ実践してみてください。

今回のテーマ

  • AFFINGER5(アフィンガー5)でランキングが表示されなくなった時の対処法5選
  • AFFINGER5のランキング機能を無料でカンタンに拡張する方法

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

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

AFFINGER5の詳細を見る

AFFINGER5でランキングが表示されなくなった時の対処法

では早速AFFINGER5でランキング位が表示されなくなった時の対処法を5つご紹介します。

今回は以下の5つの方法をご紹介します。

5つの対処法

  1. ランキング設定を見直す
  2. ショートコードを見直す
  3. キャッシュをリフレッシュする
  4. ランキング設定をリセットする
  5. ランキングのHTMLコードを直接埋め込む

実は私もランキングが表示されない問題が発生したのですが、5つ目の「ランキングコードを直接埋め込む」で解決できました。
よかったら参考にしてみてください!

1. ランキング設定を見直す

1つ目はランキング設定を見直しましょう

具体的には以下のポイントをチェックしてみましょう。

  • 各順位のタイトルは入力されているか
  • 「アフィリエイトコード」にはaタグとimgタグがちゃんと書かれているか
  • 「詳細ページへのリンクURL」はURLのみになっているか

ひとつでも項目を間違えているとランキングが表示されないことがあります。

どこか入力ミスや記入漏れが無いか確認しましょう。

AFFINGER5のランキング設定の詳細は以下の記事をご覧ください。

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

続きを見る

2. ショートコードを見直す

続いては記事内に挿入したランキング用のショートコードの入力を間違えていないかチェックしましょう。

デフォルトで挿入したい時は

 デフォルトのコード
[rank1]
[rank2]
[rank3]

順位ごとに王冠の色を変えたい場合は

 アレンジ用のコード
<div class="rankid1">[rank1]</div>
<div class="rankid2">[rank2]</div>
<div class="rankid3">[rank3]</div>

と入力しましょう。

これらのショートコードが間違っていれば当然ランキングも表示されません。

今一度入力したショートコードが正しいかどうか確かめましょう

3. キャッシュを削除する

以前読み込んだキャッシュが残っていると、ページを再読み込みしても内容が更新されないことがあります。

そういった時はキャッシュを削除して再読み込みを行うと、新しいデータを表示させることが出来ます。

キャッシュを削除する再読み込みの方法をまとめましたので、ご自分に合った方法を試してください。

ブラウザ・OSごとの再読み込み方法

  • Google Chrome
    Windows : 「Ctrl」+「F5」,「Shift」+「F5」,「Ctrl」+「Shift」+「R」
    Mac : 「command⌘」+「R」
  • Firefox
    Windows :「Ctrl」+「F5」
    Mac : 「command⌘」+「Shift」+「R」
  • Safari
    Mac : 「command⌘」+「R」,「Shift」+「更新ボタン」
  • Microsoft Edge
    Windows : 「Ctrl」+「F5」
  • Internet Explorer
    Windows : 「Ctrl」+「F5」

4. ランキング設定をリセットする

ここまでの方法を実践してもランキングが表示されない時は、一度ランキング設定をリセットしてみましょう。

またランキング設定を0からやり直す必要がありますので、必要な入力項目はメモ帳などに控えておきましょう

この方法は少々面倒ですがリセットすることで設定を初期状態に戻すことができるので、表示される可能性は高くなります。

5. ランキングのHTMLコードを直接埋め込む

最後の手段としてランキングのHTMLコードを直接埋め込むことで強制的にランキングを表示させることが出来ます。

いちいちコードを考えて書いていくのは面倒ですので下のサンプルコードをお使いください。

 ランキングのHTMLコード
<div class="rankid1">←2位のときはrankid2,3位のときはrankid3と入力しましょう
<div class="rankst-box post">
<h4 class="rankh4">【1位】タイトル<br />
<span class="st-star" style="display:flex;">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</span>
</h4>
<div class="clearfix rankst">
<div class="rankst-l">アフィリエイトコード(バナー)をペーストしてください</div>
<div class="rankst-r">
<div class="rankst-cont">
<p>1位の説明文</p>
</div>
</div>
</div>
<div class="clearfix rankst">
<div class="rankstlink-l">
<p><a href="詳細ページのURLのみ(アフィリエイトコードではありません)">詳細ページへ</a></p>
</div>
<div class="rankstlink-r">
<p>アフィリエイトコード(テキスト)をペーストしてください</p>
</div>
</div>
</div>
</div>

注意ポイント

こちらのコードはHTMLコードですので入力する際は、エディタ画面の「ビジュアル」タブから「テキスト」タブに切り替えましょう。

こちらのコードは順位1つ分ですので3位まで出力したい時は、それぞれカスタマイズした上で3回コードを書きましょう。(ちなみに4位や5位まで出力することも可能です)

AFFINGER5のランキング機能は本来なら3位までのランキングを1種類しか出力できません

ですがこの方法を使えば多少手間がかかるものの、10位までのランキングを10種類作ることだって可能になります。

ランクの順位数やランキングの種類を増やしたくて困っていた人にとってはおすすめの方法です。

まとめ:AFFINGER5のランキングが表示されない時は...

まとめ

ランキングが表示されない時の対処法まとめ

  1. ランキング設定を見直す
  2. ショートコードを見直す
  3. キャッシュを削除する
  4. ランキング設定をリセットする
  5. ランキングのHTMLコードを直接埋め込む

今回はAFFINGER5(アフィンガー5)でランキングが表示されない時の5つの対処法について解説しました。

特に5つ目の「ランキングのHTMLコードを直接埋め込む」ではAFFINGER5のランキング機能をさらに拡張することができるのでおすすめです。

こんな便利な機能は中々ありませんのでみなさんも活用しましょう!

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

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

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

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

続きを見る

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

AFFINGER5の詳細を見る

AFFINGER5関連の記事はこちら

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

続きを見る

AFFINGER5でアドセンス広告をサイドバーに設置する方法
AFFINGER5でアドセンス広告をサイドバーに設置する方法

続きを見る

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

続きを見る

AFFINGER5でアドセンス広告をn番目の見出し前に設置する方法
AFFINGER5でアドセンス広告をn番目の見出し前に設置する方法

続きを見る

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

-AFFINGER5

Copyright © wagtechblog All Rights Reserved.