ブログにGIFアニメーションを載せるならスタートボタン( Gifffer )を装備する方が良いでしょう



弊ブログでは、記事説明でGIFアニメーション( 以降はGIFアニメと略します )を載せることがよくあります。
例えば


[ 画像クリックで GO & STOP ]


[ 画像クリックで GO & STOP ]



こんな具合です。
でもGIFアニメといえば、普通はブログやサイトのページを開いた瞬間からピコピコなんて動いて表示されますよね(笑)
弊ブログでは、ブログ表示負荷を考慮して、最初からGIFアニメの動きを表現する必要がない場合には上図のように「スタートボタン」を押さなければ動かないようにしてあるんです。

記事を読んでる最中に絶えずピコピコって動いてるものが視界にあるとウザく感じるんです (^_^; アハハ…
更に複数のGIFアニメが同時にピコピコなんて動いてたらウザ過ぎるんです(爆)
きっと皆さんもそう思うでしょ(笑)
ですから、弊ブログでは必要な時にだけにスタートボタンを押して見て戴けるようにしてあります。
もう一度クリックしたらストップする仕組みです。

GIFアニメって皆さんもご存知かと思いますが、要はパラパラ漫画的に複数の静止画像を重ね合わせた構造になっていて、それを順番にパラパラとめくるようにして動きを表してるのです。
ですから、必然的にGIFアニメってそのファイル容量が大きくなるものなんです。

ファイル容量が大きくなる = 表示が遅くなる(重たくなる) と言う意味です。

最近のインターネット速度やパソコンやスマホは一昔前に比べたら格段に性能がよくなってますから、ブログやサイトに載せる画像の「ファイル容量」と言う知識にはまったく関心がなく、スマホで撮ったままの3~4MBもの巨大なファイル容量の画像などを平気でペタペタって貼り付けてるブログも散見することがあります (^_^; アハハ…
まあ、そういうのは殆どはブログ初心者さんの場合が多いんですけど、、、。
そういうブログをたまたま見つけると

『 おぃおぃ、冗談でしょ~ (^_^; アハハ… 』

って、他人事ながら私なんか脂汗が出ちゃいます(笑)

記事の主題から脱線しちゃいそうですからこの辺りで止めておきます (^^ゞポリポリ

いいですか? もう一度言います(笑)

ファイル容量が大きくなる = ブログ表示全体まで遅くなる(重たくなる)



弊ブログでは、静止画像であれGIFアニメであれ、極力それらのファイル容量は小さく加工して記事に載せて、ブログ表示に余分な負荷(ストレス)が掛からないように工夫しております。

ですから、今回の記事のタイトルのような話になるんですけどね。

GIFアニメが最初からピコピコと動いてるということは、そのファイル容量全体がブログのそのページ表示に負荷を与えてると言う意味です。
冒頭に載せましたウイルスバスタークラウドがPC内スキャンしているGIFアニメのファイル容量は364 KBですから、これなら負荷を与える程のファイル容量ではないんですけど、それでももし同一ページ内に複数のGIFアニメや画像を載せていたら、それらが合計されて「ブログ表示に負荷を与える」ことになります。

その為に、弊ブログでは基本的にはGIFアニメは「動きをストップさせておいて表示」させるようにしている訳です。

スタートボタンを押す前のこのGIFアニメのトップ画像(アニメーションが動き出す最初の1枚目の静止画像)は


2016-11-05-2-virus-b-anitop.png


これになりますが、このトップ画像のファイル容量はたったの33.1 KBしかありません。

GIFアニメ全体のファイル容量: 364 KB
GIFアニメのトップ画像のファイル容量: 33.1 KB

どうです? この記事のページが開く時に、GIFアニメにスタートボタンを配置してある時と、ない時のその負荷の掛かり方がなんとなくこの数値の差から『 ああ、分かる気がする~♪ 』って思いませんか?(笑)

1記事に画像が1個2個程度ならあまり気にすることもないとは思うんですけど、それでもブログ表示になるべく無用な負荷は掛けない方が良いのは当然ですよね。


さぁ、それではGIFアニメには「スタート・ストップボタン」を付けましょう。


簡単ですから ヽ(^^ ) ヨシヨシ
それにはGitHubサイトの

https://github.com/krasimir/gifffer

のページの /lib/ ディレクトリ(フォルダ)内にある「 gifffer.js 」と言うJavaScriptファイルを使います。
このファイル1つで実現しますので、右クリックしてあなたのPC内に「名前を付けて保存」して下さい(保存場所はデスクトップでいいです)

そしたら、FC2ブログを例にしますと、管理ページの「ファイルアップロード」から「 gifffer.js 」ファイルをアップロードして、そのURLを


2016-11-09-3-giffferurl.png


メモ帳にコピペしておいて下さい。

そして、下記の黒背景欄にマウスを載せると右の方にコピー用アイコンが現れますから、それをクリックしてコピーしてまたメモ帳にコピペしてください。
PCからでしたら簡単ですが、スマホ画面では大変かもしれません。

枠内をクリックすると「全選択」されますからそれをコピーすると簡単です

<script type="text/javascript" src="あなたのURL"></script>
<script>
window.onload = function() {
Gifffer();
}
</script>


コピペした中の「あなたのURL」部分を、事前にコピーしてあった gifffer.js ファイルのURLに書き換えてください。

さて、正しく整った設定部分を、あなたのFC2ブログのいま利用中のテンプレートに組み込みます。
その前に、必ずそのテンプレートを「複製」して、複製した方に組み込みます。
ブログ管理メニューの「テンプレートの設定」→「テンプレート管理 (PC用)」の [ あなたが編集するテンプレート名 ] のHTML編集欄内の一番最下行の

</body>
</html>

と言う文字列の直上に貼り付けます。

■ [ このURL部分はサンプルで実存しないURLですのでコピーしても動作しません ]
<script type="text/javascript" src="http://blog-imgs-85.fc2.com/a/f/oops0011/gifffer.js"></script>
<script>
window.onload = function() {
Gifffer();
}
</script>
</body>
</html>


このように設定出来ましたら、そのテンプレートのHTML編集欄の下にあります「 更新 」ボタンをクリックします。
これでブログテンプレートへの設定は終わりです。
そして、その設定をしたテンプレートを「適用」設定すれば、Giffferが使えるようになる訳です。

後は、ブログ記事にGIFアニメを貼り付けるだけです。
その方法は

 <img data-gifffer="GIFアニメのURL">


このタグの「GIFアニメのURL」部分に貼り付けたいGIFアニメのURLを入れてから、記事中にコピペしてあげれば終了です。
これであなたの記事のGIFアニメにも「スタート・ストップボタン」が表示されるようになります。

そうそう、「Google評価」 の件なんですけど、、、(笑)
要は、諸条件でブログページの全部の表示がなかなか終わらなくて( 重たくて )

→  loading02_r2_c10.gif  ←

こんな具合にずっと読み込み中のままになったり、読み込みに時間が掛かるブログはGoogle評価が悪くなって検索結果でも上位表示されなくなってしまう要因の1つになるんです。


Google評価 に関心がありましたら検索してみて下さい。

但しこのGiffferは、画像拡大用jQuery(多種ありますが)との相性は非常に悪く、両方同時にブログテンプレートに装備すると、コンクリフト(衝突)を起こしてどちらかが機能しないという現象が起きることがありますので、頭の片隅に記憶しておくことも必要でしょう (^_^; アハハ…
まぁ、それを避ける為の工夫もいろいろとありますが、ケースバイケースなのでここでは割愛します。




トップページへどうぞ

関連記事

Comments 2

There are no comments yet.

メグ  

う~~~~~

オヒサシブリブリッ♪(/ω\*)

わかりやすく噛み砕いて書いていただきありがとん!

しかしながら~~~
アニメを貼る予定がございません~~~
(▼∀▼)ニヤリッ

メグんとこ、肌色画像ペタペタたくさん貼ってありますが、モチロン全て容量小さくしてあります~~♪

しかし、ブログなどやっておりますとヤル事だらけになってしまいますねぇ。。。

気力体力追いつきません~~。

2016/11/11 (Fri) 23:51 | EDIT | REPLY |   

ぼっちん  

メグたんへ

メグたん♪ おはよ~o(⌒0⌒)o~♪

わかりやすく噛み砕いて書いていただきありがとん!
うんうん(^-^) 分かり易く書くのが私の趣味だから (≧ω≦。)プププ

アニメを貼る予定がございません~~~
(▼∀▼)ニヤリッ

え゛~~~?(笑)
メグたんところは、静止画よりもピクピクムニュムニュって動いてるGIFアニメの方がよりインパクトあると思うんだけどねぇ(笑)
動画の原画を送ってくれたら、シーンをチョイスしてGIFアニメに加工してあげまっせ(笑)
もちろん私好みなシーンで、、、ああ、隠すべきところはしっかり隠して イヒッイヒッ♪

メグんとこ、肌色画像ペタペタたくさん貼ってありますが、モチロン全て容量小さくしてあります~~♪
うんうん(^-^) さすがだね~ ヽ(^^ ) ヨシヨシ

しかし、ブログなどやっておりますとヤル事だらけになってしまいますねぇ。。。
気力体力追いつきません~~。

(笑)メグたん♪ 日常的に忙しすぎるからいろいろと時間配分も大変だろうに、よく頑張ってるから感心しちゃうよ ヽ(^^ ) ヨシヨシ

2016/11/12 (Sat) 09:17 | EDIT | REPLY |   

Leave a reply