あめみか

「雨はいつもわたしのみかた。」 … 思想・哲学・世迷言からイラストまで、多岐にわたってたいへんくつに綴っています。

ブログであの紙吹雪を舞い散らせたい!

あの素晴らしい紙吹雪を何度でも



 サブブログではメインブログとは違うテーマを使おうかともおもったのですが、やはり使い慣れているもののほうが楽なのでメインとおなじInnocentにしました。

 サブブログをつくると思わぬ特典がついてくるものです。そのひとつが先日も触れましたjQuery本体のこと。

コピペでブログカスタマイズする初心者が犯しがちなjQueryのこと。

 

 「jQuery本体はあちこちに置かなくてもいいんだよ~」ということを知る契機となり、メインブログのコードをすこし整理できました。もっけの幸い。

 

 さらにそちらでは「今日からこちらの方法にしました。」とjQuery本体を変えたことをお伝えしましたが、それからほんの二日ほどしてまたシロマティさんのものへと戻しました。

 

 それにはこんな経緯があったとさ…

なかなか舞い散り始めない紙吹雪

 8月31日のブログ1周年を祝うシロマティさんの記事を見て「あの紙吹雪アクションいいなぁ~」ということでマネっこしようと「紙吹雪css」と検索してすぐ見つかったサイトやシロマティさんの1周年記念記事のところで右クリックしてページソース表示してコードをひっぱってきてプレビューでプログラム走らせてみたところ、とっても重かったから。

 

 パソコンが非力だということもありましたが、それでも読み込み終わるまであまりにも遅かったので、試しにjQuery本体もどしてみたのです。すると劇的に改善…はしませんでしたが、体感でほんのちょっとだけはやいと感じたのと、GTmetrixで比べてみたらやはりシロマティさんのものの方がスコアがよかったので、それで戻すことにしました。

 

 順番逆ですよね?本来ならスコア確認して変えるところを、変えてからスコア確認しているのですからねぇ。

 

 環境によって異なるとおもいますので「なんだよぉ~お前がこっちにしたっていうからつられて変えちまったじゃねぇかよぉ~。」とお戻しになろうかと考えている方は、一度調べてからになされた方がよいかと存じます。

 

スコアを調べる前の心構え

 サイトの読み込みなどのスコアをお調べになる際に一言。

 今までスコアなど気にしたことなどなくGTmetrixなるものも知らなかったという方は今まで通り知らなかったことにされた方がよいかとおもいます。

 またすでに知っていた方には言うまでもないことですが、スコアが低くても気になさらないようにね。

 

 というのもたいてい喜ばしいスコアは頂けないから。

 特にはてなを使っている場合はてな特有のいじくれないところがボトルネックになっていたりするのでじれったくなりますよ~。

 

 これだけ言っておいたのにそれでも調べてしまって打ちのめされてしまわれた方はGoogle PageSpeed Insightsで慰めてもらってはいかがでしょうか。

 わたしはこちらのスコアで60を越えていたらよしとする!と決めて納得するようにしています。

 ということは?GTmetrixやYSlowではどんな悲惨な評価が下されるか察せられるでしょぉ?ヘタするとPageSpeedのスコアの半分ってことも…おぉこわいこわい。

 

 ということで心配性な方にはエゴサーチ並におすすめできません。やめておきましょう。

 

ジャバジャバ紙吹雪

 本題にもどって紙吹雪の件ですが、紙吹雪を降らせるにしてもシロマティさんとまったく同じというのではおもしろくないので、とはいってもそんなにあれこれ変えられるほどの知識はないので、ほんのちょっとだけ変えました。

 

 サブブログの方でゆきひーさんのクリックで開閉するコードを多用させていただきまして、そのアクションと組み合わせてプルダウンメニュー枠内限定で紙吹雪が舞うようにしました。

 

 ただこのコンビネーションジャバジャバしてとっても重いです。なので「あの紙吹雪を舞わせたい!」とお考えの方は素直にシロマティさんのページソースを参考にされた方がいいですよ。

 

ジャバジャバしても構わない方へ

 #canvas{}のposition:でabsolute指定するとボタンより下のbody部分に紙吹雪を降らせることができます。

 ただしabsoluteでは読み込みに異常に長い時間を要しますのでやめておいた方がよさそうです。

 

 またfixedも読み込みが異常に遅く、加えて紙吹雪すら舞いませんでしたので、これはわたしの環境だけのものなのかもしれませんから一応お試しになられてからやめておいた方がよさそうです。

 ただしただし、クリックで開閉するコードを組み合わせず素直に画面全体に紙吹雪を舞わせる場合にはfixedを使いますよ。

 

 positionを指定しないかあるいはrelative指定するとボタンをクリックしてプルダウンで現れる範囲内に紙吹雪を降らせることができます。

 今回はこのposition指定しないものをご覧頂きます。

 

紙吹雪舞い散る



 なにもお祝いすることもないのに紙吹雪というのもあれなので、無理矢理めでたそうなことを並べてお祝いしている風を装ってみました。

 それではお試しあ~れ↓

 

紙吹雪

 


国旗掲揚

 ブログ1周年(8月24日)

 サブブログ開設(9月9日)

 アクセス数累計1万突破(1年がかりで…)

 

 めでたそうなことがもうないです……。

 

 なにはともあれ、おめでとうございました!

 

 もうすでに過ぎ去ったことたち…

 


 と、そういうことなので早々に閉じて紙吹雪かたしてしまいましょう。

スイッチ

 

 

 サブブログのトップに戻るボタンを国旗にしようと画像を用意したのですが、国旗に抵抗感抱かれる方があるかもしれないと思い直して、設置時間わずか10分ほどしか使わなかったものがあります。

 国旗は…と配慮しつつもh3、h4タグは日の丸を思わせる意匠を残しているんですけれどもね。

 

 せっかくつくったのでここに一緒に掲揚しておきました。

 ただ…これ、今気づいたのですが、旗が上がっていくところを表そうとして基本半旗になってしまっていますね…。マウスオンで上げてやってください。…あっ!

 

 あわわわぁぁぁ…スマホ表示のことまったく考えてなかったぁぁぁああ。スマホではずっと半旗のままだぁあ。