訪問系の仕事は雨の日はツラいです。
レインコートが古くなって新しいのがほしいと思っていたときに、テレビで見たワークマンのポンチョ式レインコートが可愛くてほしいなと思いました。
小平でワークマンのお店はいくつかありますが、ガチなワークマンだから女性ものはありません。
ららぽーと立飛店にワークマンプラスがあるので、行って買ってきました。
長靴もほしかったけど、可愛くなかったので買いませんでした。
そんな話を職場でしたら「ワークマンなんだから可愛さ求めてもないよ」と言われてしまいました。
確かにワークマンに可愛さ求めてもしょうがないですね。
近いうちに、小平に「ワークマン女子」ができます。
Kagayaも一応、女子なので可愛さは求めたいです。
ブログにも。。
あるブログで見ていたときに、ページ移動でクルクルと回っているアニメーション画像が流れているのが、なんかかわいいなと思いました。
Kagayaもこの機能がほしいと思い、やり方を調べてみました。
そもそも、このアニメーションは何なのか？
ページ読み込みまでの間に見せるアニメーションを「ローディングアニメーション」というらしいです。
↓クリックすると「ローディングアニメーション」が見られます。
この「ローディングアニメーション」をどうやって実装するのか調べました。
プラグインを使用しない方法もあるみたいですが、ちょっとメンドウなので、カンタンにできる「LoftLoader」で実装することにしました。
「LoftLoader」は無料版と有料版がありますが、無料版で十分な機能です。
LoftLoaderのインストール
「管理画面」→「プラグイン」→「新規プラグインを追加」から「LoftLoader」を検索してインストールします。
インストール後「管理画面」→「インストール済みプラグイン」から有効化します。
LoftLoaderの設定
有効化したら、赤いマル印の処をクリックします。
↑このような画面となり、それぞれ設定していきます。
最後に「Enable LoftLoader」にチェックを入れて「公開」をクリックすれば、設定したローディングアニメーション画面が現れます。
Display on
「ローディングアニメーション」をどのページで表示させるのか設定できます。
- Sitewide・・・サイト全体
- Homepage only・・・トップページのみ
Background
「ローディングアニメーション」の背景色、透明度、アニメーションを設定できます。
- Pick Color（背景色）
- Opacity（透明度）
- Ending Animation（ロード完了時のアニメーション4種類）
※アニメーションはプレビューエリアにカーソルを合わせると確認できます。
Loader
ローディングアニメーション(5種類)とオリジナル画像を設定することができます。
More
「ローディングアニメーション」の表示時間の設定ができます。
- Maximum Load Time ・・・ローディング時間の最大値
- Close Button・・・ローディング画面の閉じるボタン設定
- Plugin Data・・・プラグインを停止したときにプラグインのデータを残すかどうか
よくわからないので、とりあえず10秒に設定してみました。
その他
「Advanced」 と「Upgrade to Pro」についての機能もよくわからないので、設定していないです。
まとめ
「ローディングアニメーション」は無くてもいい機能です。
しかしアニメーションがあった方が、ロード中に読む込んでいることがわかって良いかなと思います。
そして、事業所ロゴを設定することでアピールになるかなと。。
プログラミングがわからなくても、プラグイン「LoftLoader」を使用すれば、自分のオリジナル画像で「ローディングアニメーション」をカンタンに作成することができました。
