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

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

  関連記事

ワードプレス記事一覧ページの『本文からの抜粋』を表示する関数と、その文字数の調整方法をチェックする

今回は、ワードプレスの文字を出力する関数についてです。 レイアウトをいじったら、ちょっと文字がスカスカするところが出てしまいました。これをPHP関数などをいじっ …

wordpressの仕組み~ヘッダーに入ってくるCSSは、どのように出力されるか(wp_headにcustomize_cssをadd_action)

今回は、自分のフリー曲素材サイトのチューニングをしてて、wordpressの仕組みねたで記事にできそうなポイントがあったのでお伝えします。 アクションフックだっ …

【海外CSSテク・before擬似要素】リストタグのマーカーだけ色・模様を変えて、カラフル・おしゃれにする方法

今回は、CSSをうまく使って、リストタグの見栄えを変えてみます。 よくある『・』『■』『算用数字』といったリストマーカーだけじゃないものを実装してみます(色つき …

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

今回は、ワードプレスサイトでよく使われる更新情報表示プラグイン『What’s New Generator』で、文字数を指定してみます。 phpプログ …

baserCMS(ベーサーシーエムエス)サイト制作2~テーマCSSやパーツPHP編集でデザイン

今回は、前回ちょっとインストールしたbaserCMS(ベーサーシーエムエス)webサイト制作の続きです。 システムやテーマの構成がどうなっているかにもちょっと突 …

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

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

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

今回は、ワードプレスの機能である『リビジョン』を制御したいと思います。 データベースなどが絡んでくるのでちょっとややこしいかもしれませんが、長く運用する上では押 …

ワードプレス・手動インストールってどうやるの?(自動インストールがない、あるいはエラーの場合)

今回は、サーバーの簡単インストールなどで、エラーになって入らない場合の対処として、ワードプレスの手動インストールをやってみます。 管理人は既に30回はワードプレ …

ワードプレスCSSで色が変わらない時『functions.phpやテーマカスタマイザー』もチェック

今回は、ワードプレスのサイト制作をするとき、ひっかかりそうなポイントについてです。 最近ワードプレスサイト制作のお仕事をしていたんですけど、たまに、CSSなどを …

サイト制作お仕事事例~WPで仮想通貨投資情報サイトを(justiceクリプトカレンシーズ・AID LLCさま)

今回は、お仕事で対応したWebサイトの事例があって、お取引先さまより『ぜひ紹介してくれ』といわれたので、ご紹介いたします。 AID LLCさまよりご依頼いただい …