wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

【WPプラグイン】ページ読み込み画面(ローディングアニメ)をサクッと実装できるWP Smart Preloader

      2018/04/04

こんにちは、管理人@SS_mshpです。

今回は、wordpressのサイトで、ページ読み込み時の画面(ローディングアニメ)をつけてみます。

実装しやすい、プラグイン形式のものを試してみました。さっそく確認してみましょう。

■(前提)なぜページ読み込み時のローディングアニメがあると良いのか?

すぐにページが表示できる場合はあまり問題はありません。しかし、特にページが重かったり、スマホの回線が混んでたり(MVNOの昼や夜19時ぐらいとかはよくある)する場合は、『ブラウザに何も表示されない時間が長いと、ユーザーが離脱する可能性がある』ということです。

『このページ表示できないんだ』と思われるより、『今読み込み中なんだ』とお知らせしたほうが良いでしょう。そのためのローディング画面です。

■wordpressで読み込み時画面(ローディングアニメ)プラグイン~WP Smart Preloader

■WP Smart Preloaderインストール


インストールは『WP Smart Preloader』とプラグイン新規追加の検索ウィンドウに入れます。インストール&有効化後は、いつものようにメニューの設定部分に、『WP Smart Preloader』と出るので、そこから設定画面に入ります。ちなみにつけたサイトのバージョンは『WordPress 4.9.4』となっていましたが、このバージョンでも動く模様です。

■WP Smart Preloaderの設定方法


基本はSelect Preloaderでアニメーション(6種類から)を選ぶだけ。Show only on Home Pageではトップページだけ使用という使い方もできます。下部の方には、Duration to show Loader(ローダーが出る時間)や、Loader to Fade Out(フェイドアウト時間)も、ミリセコンド単位で設定できます。

また、Customの部分にコードを入れて、アニメーションをカスタマイズすることができます。html5やCSS3で、時間軸で動くものをやったことある方向けです。

■アニメーションの種類


1が『円が回転』、2が『カラフルなタイルが大きさを変えながら回転』、3が『オーディオのミニコンポのディスプレイ』、4が『斜め下からタイルが消える』、5が『タイルが畳まれていく』、6が『濃い丸と薄い丸が拡大/縮小』といった感じ。色を変えたいときはカスタマイズになるでしょう。

■WP Smart Preloaderのしくみ

ファイル内にはCSS3やjavascriptが入っていました。仕組み的にはCSS3のkeyframes spinnerで回転。transform:rotate(0deg)からスタートして、100%のときrotate(360deg)。animation: spinner 700ms infinite linearで、アニメーションを0.7秒でひとまわし・infinite linearで読み込みが終わるまで、等速度で繰り返すという感じでした(回転するものの場合)。

その他には、ボックスを作って色を指定し、 transform: scale(0.5); transform: scale(1);を繰り返して、大きくなったり小さくなったりというものもあります。

■あとがき・まとめ

  • 設定は基本的にアニメーション選ぶだけ
  • 時間やトップページのみ設定も可能
  • 仕組み的にはCSS3のアニメーション
  • 色やサイズ・アニメーション時間などを変えたい場合はCSSカスタマイズ

といった感じでした。CSS3ができると、より好みのカスタマイズ(またはサイトの雰囲気に合ったカスタマイズ)ができると思います。そうでなくても、シンプルで非常に使いやすいので、気になった方は、ぜひチェックしてみてください。

*お問い合わせフォームページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

■LINEできいてみる(アカウントがある方)

(タップ・またはqrでアプリを起動してください。回答できる内容には限りがありますが、なにか課題解決のきっかけができるかもしれません。)


【カテゴリ】 - wordpressプラグイン(拡張)情報 【タグ】 -

Message

メールアドレスが公開されることはありません。

  関連記事

【wpプラグイン】スライドショー実装でwebサイトをリッチにする『Slider by WD』

今回は、ワードプレスでサイトにスライドショーを実装します。 名前は『Sl …

データベース圧迫するワードプレス リビジョンを、安定稼動のため削除・制限する(プラグインとconfig.php)

今回は、ワードプレスの機能である『リビジョン』を制御したいと思います。 …

【ワードプレスサイト製作】俺の最低限なインストールプラグイン晒す 

今回は、ねた準備中につき雑談です。 管理人はワードプレス勢ですが、なるべ …

ワードプレスサイトを、プラグインでサクッとSSL化する方法

今回は、セキュリティの観点からも重要なサイトSSL(暗号化接続)を、ワー …

【wpプラグイン】SiteGuard WP Pluginってどんな風にセキュリティに強くなるの?

今回は、サイト乗っ取りとか不正ログインみたいなリスクを減らせそうなワード …

【wpプラグイン】ワードプレスサイトで、スマホアクセス時だけ軽量テーマに切り替える方法

今回は、スマホでみるとワードプレスサイトがちょっと重い件について対策して …

【WPプラグイン・サイト高速化】EWWW Image Optimizerで、画像をサクッと圧縮して表示を速くしよう

今回は、サイトの高速化で、画像を圧縮してくれるものを試します 画像サイズ …

【phpでWPプラグイン改造】What’s New Generatorで、記事タイトル文字数を設定する

今回は、ワードプレスサイトでよく使われる更新情報表示プラグイン『What …

【wordpressで教室・個別相談・サロン予約受付】プラグインEasy Appointmentsの設定・サイト実装方法を詳しく解説

今回は、特定の形態のビジネスで、『カレンダーつき予約フォームで、お客さん …

【ワードプレスサイト高速化プラグイン】Speed Up-JavaScript To Footerで、表示速度を速くする方法

今回は、ワードプレスサイトの使い勝手(読者から見た)を向上させるプラグイ …