AFFINGER6

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

更新日 :

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

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

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

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

今回のテーマ

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

当サイトではプログラミングやWebサイト運営に関する記事を毎日投稿しています。
他の記事も合わせて読んでいただけると嬉しいです。

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

AFFINGER6の詳細を見る

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

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

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

5つの対処法

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

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

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

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

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

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

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

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

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

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

「記事の中におすすめ商品のランキングを表示したい!」 「AFFINGER6(アフィンガー6)でランキングを表示できるって本当?」 今回はこんな疑問を解決していきます。 AFFINGER6(アフィンガー ...

続きを見る

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位まで出力することも可能です)

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

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

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

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

まとめ

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

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

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

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

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

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

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

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

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

AFFINGER6のサイトをオリジナルにカスタマイズする方法を知りたい! AFFINGER6をオシャレにカスタマイズしたいけど手順が分からない! 今回はこんな悩みを解決していきます。 AFFINGER ...

続きを見る

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

AFFINGER6の詳細を見る

AFFINGER6関連の記事はこちら

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

アフィリエイトやアドセンスに特化したテーマとして有名な「AFFINGER6(アフィンガー6)」ですが実際のところどうなのでしょうか? 今回は実際にAFFINGER6(アフィンガー6)を使用してみた感想 ...

続きを見る

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

「アドセンス広告をサイドバーに設置したい!」 「AFFINGER6(アフィンガー6)を使ってアドセンス広告を設置したい!」 今回はAFFINGER6(アフィンガー6)でアドセンス広告をサイドバーに設置 ...

続きを見る

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

「記事の中におすすめ商品のランキングを表示したい!」 「AFFINGER6(アフィンガー6)でランキングを表示できるって本当?」 今回はこんな疑問を解決していきます。 AFFINGER6(アフィンガー ...

続きを見る

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

アドセンス広告を特定の見出しの前に設置したい! AFFINGER6(アフィンガー6)を使って様々な方法でアドセンス広告を設置したい! 今回はそんな方たちに向けてAFFINGER6(アフィンガー6)の便 ...

続きを見る

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

  • この記事を書いた人(著者情報)
wagtechblog

wagtechblog

本サイトの運営者・管理人。慶應義塾大学環境情報学部卒。人材系のWeb系メガベンチャー企業に新卒入社。兼業でフリーランスとしてiOSアプリ開発、Web開発、Webメディア運営、SEOマーケティング等を行う。IT人材系のベンチャー企業でiOSエンジニア、Web系メガベンチャー企業でWebアプリケーションエンジニア、士業のスタートアップ企業でフロントエンドエンジニア、Web系メガベンチャー企業でプロダクトマネージャー兼SEOディレクター、ゲーム系のスタートアップ企業で最高技術責任者(CTO)、学生向けプログラミングスクールで講師の勤務経験あり(インターンを含む)。好きなプログラミング言語はSwiftとPythonとPHPとRubyとJavaScript。侍エンジニア塾元受講生。エンジニアやプログラミングスクールでの体験・経験に基づいた記事を執筆。
保有資格:ITパスポート / 基本情報技術者試験 / TOEIC730点 / 日商簿記3級

-AFFINGER6

Copyright © wagtechblog All Rights Reserved.