WP Loading Gif Animations Plusでぼやけない画像を設定する方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

こんにちは、WPホームページ研究所の運営サポートチーム(@WP_LABO)です。

本日は「にじまないローディング画像の設定方法」をご紹介いたします。

初心者さん
最新のRatinaモニターでも旧型の古いモニターでもぼやけない綺麗なローディング画像を表示したい。上手に設定するにはどうすればいいのかな・・・。

こんな疑問にお答えしていきます。本記事で解説するプラグインは以下を使用。

ワードプレスにローディング画面を素早く導入できる便利プラグイン「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アニメーション)なので、通常より画質が悪く見えるかもしれません。画質というよりも「変更したローディング画像の見え方」としてご確認いただくのがおすすめです。以前に別の記事で検索結果からサイトに訪れた際のローディング画像も掲載しているのでぜひ併せてご参考ください。

WP Loading Gif Animations Plusの使い方を徹底解説

最新式の無料プラグインを事前公開

WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
改良されたプラグインを確認する

ローディング画面を導入してみませんか?

こんにちは、WPホームページ研究所の運営サポートチーム(@WP_LABO)です。

こんなお悩みはありませんか?

・ローディング画面を表示できるプラグインを探している
・ローディング用の画像を管理画面上から差し替えたい
・ローディング画像の上に運営サイトロゴを表示させたい

当サイトではワードプレスに関する導入相談を承っています。ローディング設定専用のプラグインは以下のボタンをクリックしてご確認くださいませ。なお、ご自身でのセッティングがむずかしい方へ向けて代行設定も行なっています。

最新式の無料プラグインを事前公開

WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
改良されたプラグインを確認する


プラグインを手に入れる