2018/04/04こんにちは、管理人@SS_mshpです。今回は、wordpressのサイトで、ページ読み込み時の画面(ローディングアニメ)をつけてみます。実装しやすい、プラグイン形式のものを試してみました。■(前提)なぜページ読み込み時のローディングアニメがあると良いのか?すぐにページが表示できる場合はあまり問題はありません。ページが重かったり、スマホの回線が混んでたり(MVNOの昼や夜19時ぐらいとかはよくある)する場合は、『ブラウザに何も表示されない時間が長いと、ユーザーが離脱する可能性がある』ということです。『このページ表示できないんだ』と思われるより、『今読み込み中なんだ』とお知らせしたほうが良いでしょう。そのためのローディング画面です。Preloader』とプラグイン新規追加の検索ウィンドウに入れます。Preloader』と出るので、そこから設定画面に入ります。4.9.4』となっていましたが、このバージョンでも動く模様です。Preloaderでアニメーション(6種類から)を選ぶだけ。Pageではトップページだけ使用という使い方もできます。Out(フェイドアウト時間)も、ミリセコンド単位で設定できます。Customの部分にコードを入れて、アニメーションをカスタマイズすることができます。html5やCSS3で、時間軸で動くものをやったことある方向けです。■アニメーションの種類1が『円が回転』、2が『カラフルなタイルが大きさを変えながら回転』、3が『オーディオのミニコンポのディスプレイ』、4が『斜め下からタイルが消える』、5が『タイルが畳まれていく』、6が『濃い丸と薄い丸が拡大/縮小』といった感じ。色を変えたいときはカスタマイズになるでしょう。Preloaderのしくみファイル内にはCSS3やjavascriptが入っていました。spinnerで回転。transform:rotate(0deg)からスタートして、100%のときrotate(360deg)。linearで読み込みが終わるまで、等速度で繰り返すという感じでした(回転するものの場合)。scale(1);を繰り返して、大きくなったり小さくなったりというものもあります。仕組み的にはCSS3のアニメーション色やサイズ・アニメーション時間などを変えたい場合はCSSカスタマイズといった感じでした。CSS3ができると、より好みのカスタマイズ(またはサイトの雰囲気に合ったカスタマイズ)ができると思います。なくても、シンプルで非常に使いやすいので、気になった方は、ぜひチェックしてみてください。wpサイト制作受付サイトへ*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。検索:このサイト管理人についてこのコラムと『アトリエss』サイトを運営しております、管理人の五十嵐と申します。活動地域は東北の仙台市です。