Simple GA4 Rankingを使ってランキング表示～アイキャッチ・順位数の表示～
このサイト・および記事にはアフィリエイト広告を利用しています。
先日の記事で、Google Analyticsのデータを引っ張ってきてランキング表示するために、プラグイン「Simple GA4 Ranking」を使って表示する方法をまとめました。
ただ、これだけだと文字だけの味気ないものになってしまうため、アイキャッチ画像を表示させたところ、順位数が表示されなくなってしまったため、改めて表示する方法についてまとめました。
完成イメージ
文字だけの表示→アイキャッチ表示（順位数表示消える）→アイキャッチ＆順位数表示（完成）となりました。
アイキャッチを表示させる（PHP）
アイキャッチを表示させるのは、こちらのページの「人気記事一覧にサムネイル画像を表示させる方法」を参考にfunction.phpに設定しました。
ただ、この方法だと、順位の数字が表示されなくなってしまいました。
順位数を表示させる（CSS）
PHPで持ってくる情報に順位数を追加するなど色々な方法があるかと思うのですが、私はCSSで表示させました。
下記を「外観」→「カスタマイズ」→「追加CSS」のところに追記しました。
追記したCSS
ol.sga-ranking {
counter-reset: ranking-counter; /* ランキングのカウンターをリセット */
}
ol.sga-ranking li {
list-style: none; /* 既存のリストスタイルを無効にする */
counter-increment: ranking-counter; /* 項番を1ずつ増やす */
}
ol.sga-ranking li::before {
content: counter(ranking-counter) ". "; /* 項番とピリオドを表示 */
font-weight: bold; /* 項番を太字にする */
color:#4082BB; /* 記事のタイトルと同じ色に */
}上記のCSSはChatGPT（Copilot）の力も借りながら調整しました。（むっちゃ助かった…！）
別ページでは70位までを表示
記事ランキングは固定ページを作成し、そちらでは70位までランキングを表示（2024年6月時点）させています。
ショートコード
[sga_ranking display_count="70"]100位まで表示させたい場合は、70の数字を100にします。
カテゴリ別などで表示予定
固定ページの方ではカテゴリ別の順位表示など、ランキングページとして見やすくしていきたいと思っています。
設定しましたらまた記事にしようと思います。
お役に立てれば幸いです。
