ローディング画像プラグインをあらゆる横幅サイズに対応させる方法

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

WPホームページ研究所運営サポートチーム監修のオムスビ(@OMUSUVIcom)です。

以前「ローディング画像を導入するプラグインでGIFアニメーション側の横幅を変更する方法」について解説させていただきました。本日はプラグイン本体側の標準機能としてさまざまな画像サイズ(横幅)に対応できる仕組みを導入する流れをご紹介いたします。カスタマイズしている内容は前回の記事と変わりません。

ローディング画像プラグインをあらゆる横幅サイズに対応させる方法

現時点での最新バージョンは「1.1.3」なので「1.1.4」から正式対応となります。

手順としては下記ですね。

1. 画像の横幅を確認するロジックを入れる
2. 取得した画像サイズから最適な値を算出
3. 計算後にスタイルシートで自動出力する

それぞれカンタンに補足しておきます。

1. 画像の横幅を確認するロジック

イメージの横幅を取得するために使える関数「getimagesize」があります。使い方は下記の通りです。

<?php
	$imgfile = 'sample.jpg';
	$imgsize = getimagesize($imgfile);
	echo '横幅は' . $imgsize[0] . 'です。';
?>

ちなみに下記が実際に出力した状態です。

sample.jpgは横480pxなので正常に取得できていますね。

2. 取得した画像サイズで値を算出

次にどんな画像でも最適な値を算出できる計算式が必要です。

今回はアップロード画像の通常サイズと縮小用サイズをそれぞれ設定。割り切れかなった場合は繰り上げとしています。

3. 計算後にスタイルシートへ出力

最後に計算後の数値をCSS内へ埋め込みます。今回は「echo」で追記。

設定状況に応じてブラウザ側へ出力されてCSSを上書きできればOK。

以上で完了です。

まとめ

本日は「プラグインのバージョンアップ手順」について解説させていただきました。

以前に読者さまより「ローディングプラグインに好きなサイズのGIFアニメーションを使いたい」とリクエストが届いたので設定手順を解説記事で公開いたしました。しかし、メールでやりとりをしていると「あまりCSS追記画面も使ったことがない」と仰っていたので念のためアップデートで対策する流れになりました。

細かい作業をご依頼するよりもシステム側で対応した方がいいケースも多いです。もしさまざまな画像サイズのGIFアニメーションに対応させたい場合は最新バージョン「1.1.4」への更新をお試しくださいませ。

▼管理画面からプラグインを更新する手順
https://wp-labo.com/plugin-update/

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

💻SEOに強いWordPressテーマ

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

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

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

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

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

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

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

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

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

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

WPホームページ研究所運営サポートチーム監修のオムスビ(@OMUSUVIcom)です。

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

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

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

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

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

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

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

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

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

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

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

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


プラグインを手に入れる