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にします。
カテゴリ別などで表示予定
固定ページの方ではカテゴリ別の順位表示など、ランキングページとして見やすくしていきたいと思っています。
設定しましたらまた記事にしようと思います。
お役に立てれば幸いです。
サイト運営・お仕事に関するその他の記事
◆またまたお金にならんことをガチでやってしまった…💧貧乏暇なし…！今度はikumado紹介動画を編集してみました。
◆Youtubeプロジェクトでご一緒しているTAKA（石原孝尚）監督とランチ！何かもう全然宇宙人すぎて脳内バグりまくりだったけど、何かできることやりたくなった件！
◆久々にお仕事でやっちまった…！失敗がデカすぎてリカバリーに相当時間かかるので、日常の中で粛々と対応しようと若干「諦め」の境地でようやく切り替えられた件！
◆ブログ運営はもう立派な趣味だ！と思うので、サイトが毎月月末数日表示されなくなるのを、プランをアップグレード（利用料増額）して解決した！件
◆プラグイン「EWWW Image Optimizer」を使ってサイトをWebP化！作業中にストレージが爆増したので、プラグイン「File Manager Advanced」を使って「EWWW Image Optimizer」が作った不要画像を全削除で対応した！ようやく転送量も削減できた件！
◆今更SEO対策でURLスラッグをちょこちょこ変えてます！プラグイン「Redirection」を使って301対策したけど、内部リンクは手直し中…！😱
◆やっとできた！WebP化して費用節約しようとしたらストレージ爆増でサイトダウンした原因追及＆対策！！月$20も節約できるぞー！
◆WebP化して料金を下げようと思ったのに逆にストレージ容量爆増してやっぱりダウングレードできなかったけど、何とか解決策を探っています！
◆最近ブログ更新が滞りがちなのは、ikumado worksでのお仕事で「Happy First」YouTubeプロジェクトで頑張ってるから。今までの経験をフル活用してます♪
◆保育園の先生へのビデオメッセージを全部無料ソフトで編集！Canva・Microsoft Designer＆CapCut＆DOVA-SYNDROME使用（サンプルをYouTubeで公開中！）
◆Adsenseを利用しているとGoogleから求められる「税法上の居住地における追加の税務情報が必要です」はシンガポール宛＆郵便番号記載の居住者証明書でようやく解決した記事
◆Simple GA4 Rankingでサイトにアクセスランキングを表示させる方法まとめ
◆Simple GA4 Rankingでサイトにアクセスランキングをサムネイル・順位数も表示させる方法まとめ
◆ikumadoのPromadoのお仕事でプロジェクトメンバーにCanva教えたことに「ありがとう」と言われてめっちゃ嬉しかった件！
◆SSL証明書の期限切れはWordPressのホスティングサービスから新たに払い出されたドメイン検証レコードをAWSのRoute53に追記して解決した
◆普段から使いまくっているnotionがフリープランでも総容量無制限だと知って驚愕したので、これからもたくさん使っていこうと思った記事
◆いつもお世話になっているikumadoと共同で運営しているikumado×保活メンターサービスのLPをnotionを使って作ってみた記事
◆バリューコマースのアフィリエイトが訳わからんすぎて、「ヨメレバ」・「カエレバ」も使ってみた・バリューコマースならサイトに設置するタグはプラグインで設置してみた記事
◆バリューコマースのアフィリエイトで初！売上：1,029円を受け取れる！と思ったら口座名相違でやっぱり一発でうまくいかなかった（🤣）件
◆フリーランスで加入しているフリーランス保険では福利厚生（WELBOX）が使える！エアコンクリーニングはおそうじ革命さんの会員割引が利用できて、3台で6,594円もお得になった！
◆外のお仕事10時～17時でやってたら、自分の作業時間が全然なくて、発想転換して子どもの寝かしつけで一緒に寝て3時30分起きにしたら2時間作れた！
