ローディング画像プラグインで好きなサイズを指定するカスタム方法

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

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

先日に読者さまからローディング画像の指定方法でご質問をいただきました。技術チームに設定方法を確認するとCSSを追記すれば対応できるとの回答があったので念のため記事で解説させていただきます。

ローディング画像プラグインで好きなサイズを指定するカスタム方法

まずはいただいた画像をチェックしたところサイズが「横256px縦77px」でした。プラグイン側では正方形型のイメージを最適化する仕組みなのでそれが原因で表示が小さくなっています。画像がぼやけてしまう点については以前に別の記事でもご紹介していましたので念のため下記にも前回のリンクURLを貼っておきますね。

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

お送りいただいた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してお試しくださいませ。
改良されたプラグインを確認する

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

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

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

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

💻SEOに強いWordPressテーマ

⇒ 大人気のワードプレステーマ「賢威」 2万を超えるお客様がご使用中!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


プラグインを手に入れる