こんにちは、WPホームページ研究所の運営サポートチーム（@WP_LABO）です。
先日に読者さまからローディング画像の指定方法でご質問をいただきました。技術チームに設定方法を確認するとCSSを追記すれば対応できるとの回答があったので念のため記事で解説させていただきます。
ローディング画像プラグインで好きなサイズを指定するカスタム方法
まずはいただいた画像をチェックしたところサイズが「横256px縦77px」でした。プラグイン側では正方形型のイメージを最適化する仕組みなのでそれが原因で表示が小さくなっています。画像がぼやけてしまう点については以前に別の記事でもご紹介していましたので念のため下記にも前回のリンクURLを貼っておきますね。
お送りいただいたGIF画像
下記の白い部分がお作りいただいたGIFアニメーションです。境界線がわかるように黒色で枠をつけています。
ちなみにGIF画像のサイズはブラウザに画像をドラッグすると確認できます。下記の通りタブに画像名が表示されてカッコ内に横と縦のpx数を調べられます。実際はポップアップ画面も出るのでお試しください。
GIF画像の設定方法
設定は下記の通り「読込み画像」にアップロードすればOKです。
あとはスタイルシート（CSS）を少しだけカスタムするだけです。
CSSのカスタマイズ方法
スタイルシートの追記は「外観 > カスタマイズ > 追加CSS」で行います。下記がコピペ用となります。
/* None Retina */
.pg-loading-logo-header img.pg-loading-logo[src*=".gif"] {
width: 256px!important;
}
/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.pg-loading-logo-header img.pg-loading-logo[src*=".gif"] {
width: 128px!important;
}
}カンタンに解説すると非Retinaディスプレイで256pxを指定。Retinaディスプレイでは256pxの半分（128px）を指定しています。このままスタイルシート用としてコピペするだけで表示が自動で最適化されます。
入力後は「公開」を押すとウェブサイト側に反映されます。ブラウザのキャッシュの影響でうまく適用されないケースもあるのでその際は「キャッシュ情報を強制一掃するリロード方法」を一度お試しください。
適用した後の見た目
下記の通りローディング画像が表示されていればカスタマイズ完了ですね。
独自サイズのGIFアニメーションを適用する場合は本記事をご参考ください。
▼最新バージョン「1.1.4」でサイズ自動調整に対応
https://wp-labo.com/loading-gif-animation-image-fix/
もし「WP Loading Gif Animations Plus」をバージョン1.1.4に更新すれば上記のカスタマイズ記述は不要です。設定のわずらわしさを考慮してプラグイン側で正式に対応いたしましたのでぜひお試しくださいませ。
最新式の無料プラグインを事前公開
WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
→ 改良されたプラグインを確認する
