ゆうらり Happy Smile
【失敗談】FC2ブログにローディングアニメーションを設定してみたら…

【失敗談】FC2ブログにローディングアニメーションを設定してみたら…

FC2ブログ日記-カスタマイズの所感など
2019/11/23 0
胃がん_ブログ_ゆうらりHappySmile_管理人M_イラスト_アイコン_画像
M
#FC2ブログ #FC2ブログテンプレート #FC2ブログテンプレートカスタマイズ #ブログ運営 #FC2ブロガー #ローディングアニメーション #ブログカスタマイズ #ブログ日記 #アニメーション #ページ読み込み速度

FC2ブロガーのMです。ご訪問いただき、ありがとうございます(^^)


今回は、ローディングアニメーションの話しを。


FC2ブログを運営していると、自分の使うテンプレートをいろいろといじってみたり、何かとカスタマイズしたくなるものですよね。僕が前々からやってみたいと密かに考えていたのは、この、ローディングアニメーションを実装することでした。


loading


ちなみに、ローディングアニメーションとは、ウェブページの読み込みが遅いときに、ゆらゆらくるくるとアニメーションが表示される例のヤツです。


ところが。いざ実際に設定してみると、まったく意味がないどころか、むしろユーザビリティ(利便性という意味)に悪影響を招いてしまったのです( ̄O ̄;)


そんなわけで今回は、僕の失敗談を備忘録のつもりで書き記しておきます。

スポンサードリンク

ローディングアニメーションを設定するのにおすすめなサイト2選

ウェブ検索でいろいろ調べてみると、ローディングアニメーションを設定する方法は、難しいのから簡単なものまで、何通りもあるようですね。


僕は簡単なのが好きなので、下記のサイト2つで紹介された方法に的を絞りました。

CSSのみでWebページを開くときのローディングアニメーションを表現する方法

ローディングアニメーション


まず1つ目は、CSSのみでローディングアニメーションを設定する方法。いろいろ調べた結果、CSS のみでページを開くときのオープニングシャッターアニメーションを表現してみるという記事が一番簡単そうでした。


ほとんどコピペで設定できてしまうのがありがたいですよね(^^)

CSSとJavaScriptのコピペだけでローディングアニメーションが使えるサイト

PACE — Automatic page load progress bars


2つ目は、PACEというサイトがとても便利な気がしました。


やり方としては、候補の中からアニメーションを決めたら好きな色を選択。あとは、発行されたCSSとJavaScriptをコピペするだけです。


htmlのところは何も触らなくて済むのでお手軽な感じがしました。

CSSのみでFC2ブログにローディングアニメーションを設定してみた

僕が選んだのは、最初の方法でした。とくに理由はないんですけどね。JavaScriptを使うのは何だか抵抗感がありまして( ̄▽ ̄;)


CSSコードについては丸ごとコピペして使えたのですが、htmlのほうは<section>というタグにあるclass名がCSSのどこにも見当たらない。


もしかして、この記事。どこかのサイトからコピペしてきたものを紹介してるのでは?!と疑念が湧きました。


結局、<section>の部分は使わずに、div要素だけをメインコンテンツのdiv要素の所に貼り付ける。それでとくに支障はありませんでした。


やっと僕のFC2ブログにローディングアニメーションを設定!丸1日ほど様子を見ることにしました。

今のFC2ブログテンプレートにはローディングアニメーションが無意味だった

しかし1日様子を見た結果、僕の使用するFC2ブログテンプレートにはローディングアニメーションが無意味なことを悟りました。


なぜなら、ページを開いてアニメーションが動作するのは2秒ちょっと。それからブログのコンテンツが表示されるのだけれど、僕のブログって、ページを開くのに2秒以上もかからないだろ?ということで( ̄▽ ̄;)


ページを開く動作を悪戯に遅くするだけの結果になってしまった(汗)


そもそも、僕の使用するFC2ブログテンプレートは、Akiraさんが製作した高性能タイプ。たくさん Google AdSense を貼り付けていても、ページの表示速度は恐ろしく速いんですよね。


アニメーションの表示時間を短くすることも出来ますが、それだとやる意味がない。というわけで、1日だけ試したあとにすべて取り除いてしまいました。


face_man_shock

嗚呼。もっと昔にやっておくべきだった…。

まとめ/ページ表示が遅い場合はローディングアニメーションがおすすめかも

僕のブログへの採用を断念したローディングアニメーションですが、古くから同じFC2ブログテンプレートを使用していて、ページの読み込み速度が遅いことでお悩みな方にはおすすめかも知れません。


まあ、しかし。いろいろと試してみるのは楽しいものですね(^^)


もうひとつやりたい事があるのだけれど、出来るかな?少し体調が良いときに考えてみたいと思います。


その時はまた、ブログの見づらい現象が起きるかも分かりませんのでお許しくださいませ。


▼関連記事

【追記】FC2ブログ期間限定配布テンプレート「Ample」に変更‼︎カスタマイズに悪戦苦闘したけど素敵で満足♪

FC2ブロガーのMです。とうとうやってしまいました。FC2ブログのテンプレート製作者Akiraさんがブログ記事を更新されたんで気になって覗いてみたんです。すると…。Ample - ブログ内期間限定配布Ampleテンプレートはレスポンシブウェブデザインです。パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。設定ページ...vanillaic...

あわせて読みたい
data-matched-content-ui-type="image_card_stacked" data-matched-content-rows-num="6,2" data-matched-content-columns-num="1,5"
現在の人気記事ランキング

 0

There are no comments yet.
FC2ブログ日記-カスタマイズの所感など