こんにちは、WPホームページ研究所の運営サポートチーム(@WP_LABO)です。
本日は「にじまないローディング画像の設定方法」をご紹介いたします。
こんな疑問にお答えしていきます。本記事で解説するプラグインは以下を使用。
ワードプレスにローディング画面を素早く導入できる便利プラグイン「WP Loading Gif Animations Plus」
使い方は別の記事でもまとめているのでぜひ併せてご参照ください。
1. WP Loading Gif Animations Plusの使い方を徹底解説
2. WP Loading Gif Animations Plusをスマホで設定する手順
以下では「ぼやけないローディング画像の設定手順」を解説させていただきます。
WP Loading Gif Animations Plusでぼやけない画像を設定する方法
結論から言うと「横48px縦48pxのローディング画像を設定」すればOKです。
▼バージョン1.1.4以降からあらゆる画像サイズに対応(追記:2022年12月9日)
https://wp-labo.com/loading-gif-animation-image-fix/
下記はバージョン1.1.3以前の記事です。
横縦48pxの画像を設定した場合
最新モニターでは横縦ともに裏側で24pxへ自動調整(旧型モニターでは48pxのまま表示)が入ります。
上記のローディング画像は横縦48pxです。設定画面に当て込みました。
設定後のスマホ画面が以下です。読込み画像を見せるためにループ処理しています。設定画面で「読込み画像」として選択した画像が綺麗に表示されていますよね。Retinaなので24pxに自動縮小されています。
ただ、上記は書き出し画像(GIFアニメーション)なので、通常より画質が悪く見えるかもしれません。画質というよりも「変更したローディング画像の見え方」としてご確認いただくのがおすすめです。以前に別の記事で検索結果からサイトに訪れた際のローディング画像も掲載しているのでぜひ併せてご参考ください。
最新式の無料プラグインを事前公開
WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
→ 改良されたプラグインを確認する