wordpressでのスマホ対応webサイト制作・wpプラグイン・SNS活用・ 動画・bgmやテーマ曲アレンジまで考えるコラム!

   

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

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

   

こんにちは、管理人@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サイト制作 【タグ】 -

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

ワードプレスじゃない通常サイトをSSL(暗号化通信)化するときの、htmlソース編集方法

今回はプラグインで一発SSL化ができるワードプレスではなく、通常のwebサイトをSSL(暗号化通信)してみた話題です。 正しく表示させ、かつ保護された接続を保持 …

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

今回は、ワードプレスでサイトにスライドショーを実装します。 名前は『Slider by WD』。『Responsive Slider for WordPress …

自社サイト(wpホームページ制作請負)のプチリニューアルしました(ヒーローヘッダー風&重なるメニュー)

今回は、ちょっと時間があったので、管理人のお仕事用サイト(wpホームページ制作請負)を少しリニューアルしてみた件についてお話します。 しばらくほったらかしだった …

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

今回は、セキュリティの観点からも重要なサイトSSL(暗号化接続)を、ワードプレスを使って、サクッと導入します。 twitterでも話題になったhttpページ(S …

ワードプレスwebサイトの、記事カテゴリー調整方法~設定しかた、親・子カテゴリ使い分け

今回は、このサイトにも使われているweb制作ツール・ワードプレスでの、カテゴリーの調整方法についてです。 最初のうちは気にしなくてよいかもしれないけれど、記事が …

【ワードプレスサイトで更新情報表示】phpで取得と、プラグインで表示どちらが良い?

今回は、ワードプレス系のサイトで、トップページとか任意の部分に『ブログ部分の更新情報を表示』する方法について考えてみます。 方法は『phpで更新情報取得して表示 …

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

今回は、サイト乗っ取りとか不正ログインみたいなリスクを減らせそうなワードプレスのプラグインを使ってみます。 利用するのは『SiteGuard WP Plugin …

CSSの『Expected RBRACE 』エラーって何なの?(ワードプレス4.9で判明)

今回は、ワードプレスを新バージョンにしたら判明した、変なCSSエラーがでていた件についてお話します。 エラーがわかる便利な機能がついてるんで、今まで(致命的では …

ワードプレス・ブログメディアで、ヘッダー画像を変える2通りの方法【phpモバイル非表示有】

今回は、ワードプレス・ブログメディアのサイトを作ったときに、ヘッダー(上についている画像)を変更する方法をお話します。 このサイトでも、時期に応じてヘッダーを変 …

ワードプレスサイトを独自ドメインで公開するまでの流れや注意点

今回は、最近何件か対応させていただいている、ワードプレスサイト制作についての話題です。 サーバー借りてインストールしたまでは良いけど、ではドメインどうするの?と …