comments trackbacks you may also like

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

2019年11月23日
#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...

\Thanks/

【ランキングに挑戦中】

いつも応援クリック↓
ありがとうございます

にほんブログ村

関連記事
M
この記事を書いた人: M
ブロガー/FC2公式おすすめブログ認定/企業家/投資家/Fashion研究家/不動産コンサルタント/会社経営/将棋六段/おうちごはん男子部/料理を悪戦苦闘修行中/ヘッドスパとスイーツをこよなく愛する46歳/人生なんて気持ち次第‼︎きっと何くるないさ〜(´ー`)
FC2ブログオフィシャルおすすめブログ認定バナー日本ブログ村 プロフィール
iconiconiconicon

この記事が気に入ったら
いいねとシェアしよう!

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.
未分類 (0)
シン・胃がん闘病記 (43)
┣  AVANT:癌の余命宣告~共存 (30)
┗  セントラルドグマ:父親の胃癌 (13)
胃がん闘病記録まとめ (85)
┣  ステージ3B-多発性高度リンパ節転移胃癌 (57)
┗  胃がん再発「転移性肝がん」で余命宣告 (27)
胃がん-Stomach_cancer (5949)
┣  胃がんブログ (285)
┣  よりぬき胃がんブログ (16)
┣  胃がん闘病記-日記 (5586)
┣  酒場放浪記 (10)
┣  胃がん手術後の食事記録 (6)
┣  胃切除後の料理など (36)
┗  がん治療のクラウドファンディング (10)
がんのこと-ガン情報全般-cancer (546)
┣  がんブログ (314)
┗  がんニュース (232)
胃がん障害年金ブログ (71)
┣  障害年金-準備編 (23)
┣  障害年金-審査から年金受給まで (12)
┣  障害年金-審査請求-不服申立 (26)
┗  障害年金-再審査請求 (10)
Amazon (144)
┣  Amazonセール (2)
┗  Kindleセール (141)
おもしろグッズ (11)
今日のエッセイ (126)
ニュース-芸能-話題 (811)
┗  転職-キャリアアップ (21)
占い-心理テスト (6)
恋愛-人間関係 (30)
終活ブログ (12)
グルメ (110)
┣  低糖質レシピ (30)
┗  お酒の飲み方 (2)
胃切除後の食事レシピ (672)
┣  ご飯-おかゆ-和食 (174)
┣  おかず (140)
┣  味噌汁-スープ (75)
┣  カレー関係 (66)
┣  パン-洋食 (63)
┣  麺類 (112)
┗  その他-簡単レシピなど (39)
ブログ (247)
┣  FC2ブログ-便利ワザ-アイテム-HTML-SEO対策など (187)
┣  FC2ブログ日記-カスタマイズの所感など (13)
┣  GoogleAdsense-アドセンス (8)
┣  趣味や将棋のこと (31)
┗  ファッション (8)
iPhoneの使い方-アプリなど (33)
司法書士 (26)
┣  仕事-実務や登記のこと (1)
┗  事件ファイル (25)
COLLECTION (28)
┣  家電 (11)
┣  ホーム&キッチン (5)
┣  ビューティー&ヘルスケア (5)
┣  QOL改善&ヘルスケア (2)
┗  お酒 (5)