WEBサイト制作

【WordPress】「JIN」でランキング(jin-rank)の画像がずれる時の対処法

WordPressのテーマ「JIN」では、初期からランキング作成の機能が実装されていますよね。非常に便利で、商品やサービスのランキングを作成する時なんかに非常に便利なのですが、使用していて「ランキングの冠マーク(jin-rankの画像)が下にずれてる」という現象が起こったため、対処法を説明していきたいと思います。

ポイント

WordPressのテーマ「JIN」のランキングの冠マークが下にずれてしまうという現象が起こったため、同じ症状が起こった時の対処法

問題はプラグインにあり。20秒で対処可能

「JIN」に標準搭載されているランキングのフォーマットは以下のものです。

ランキング1位
ここに広告タグ(300 x 250)をコピペ
ここに説明文を入力してください。ここに説明文を入力してください。
項目名
項目名 ここに説明文を入力してください。
項目名 ここに説明文を入力してください。
項目名 ここに説明文を入力してください。

詳細ページ公式ページ

現在ランキングの金色王冠(jin-rank1)は正常に表示されていると思いますが、私が以前見たものは、以下の画像のようになっていました。

アニメ向けのVODのランキングを作成するつもりでしたが、王冠が下のラインに被ってしまっているのがわかります。

なぜ……と思いプラグインを停止していき原因を調べたのですが、どうやらみんなが大好きなプラグイン「EWWW Image Optimizer」のせいだったみたいです。

EWWW Image Optimizerの設定

EWWW Image Optimizerは画像のサイズを小さくしてくれるとてもありがたいプラグインですが、その設定の1つに、「リサイズされた画像を検出する」というものがあります。

設定 > EWWW Image Optimizer > リサイズ > リサイズ検知

これは画像がリサイズされてページ表示速度に悪影響を与えていないか確かめるものなのですが、このボックスにチェックマークを入れると、先ほどの画像のように王冠が下のラインに被ってしまいます

でも実は対処は必要ありません!

先ほどのような見え方になってしまったのはEWWW Image Optimizerに問題がありますが、実は対処は不要なのです。

なぜかというと、あれは「自分がログイン時」にしかそう見えないからです。

ログアウトしてみると、

このようにしっかりと王冠のマークが正常な位置に表示されていることがわかります。

EWWW Image Optimizerのリサイズ検知にチェックを付けると、この王冠のマークが青い太線で囲まれます。そのために表示が崩れてしまっただけであって、リサイズ検知の表示がない時、つまりログインしていない時は正常に表示されるため、サイトの訪問者には何の問題もなかったということです。