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

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

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

初心者さん
最新の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です。

横縦48pxの画像を設定した場合

最新モニターでは横縦ともに裏側で24pxへ自動調整(旧型モニターでは48pxのまま表示)が入ります。

上記のローディング画像は横縦48pxです。設定画面に当て込みました。

設定後のスマホ画面が以下です。読込み画像を見せるためにループ処理しています。設定画面で「読込み画像」として選択した画像が綺麗に表示されていますよね。Retinaなので24pxに自動縮小されています。

ただ、上記は書き出し画像(GIFアニメーション)なので、通常より画質が悪く見えるかもしれません。画質というよりも「変更したローディング画像の見え方」としてご確認いただくのがおすすめです。以前に別の記事で検索結果からサイトに訪れた際のローディング画像も掲載しているのでぜひ併せてご参考ください。

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

【今すぐ無料プラグインを手に入れる】
無料ダウンロードはこちら

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください

💻受講料無料でプログラミング習得

⇒ 完全無料のプログラミングスクール - 手に職をつけて安定的に働きたい人へ -

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

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

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

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

【今すぐ無料プラグインを手に入れる】
無料ダウンロードはこちら

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください


プラグインを手に入れる