我輩は非常にGIFが好きである。
とくにシネマグラフ(CinemaGraph、ループ系というか一生見ていられるやつ)が大好きだ。
大好きすぎてヤバい。
大好き過ぎてヤバいのなら、もうやるっきゃ無いだろ！
何をって？
命吹き込み作業さ…。
ようこそ諸君。我輩はボロボロ皇帝。
我輩がどんなGIFを愛しているか早速見て頂こう↓
こんな感じのものである。
これは記事に貼り付けるためにフリー素材の写真をいじくって動かしたモノだ。よくわからん煙がモクモクしていていいだろう。ちょっと服の裾もなびく感じで動かしてみた。画質が悪いのはご愛敬だ(というか画質マシなモノは容量でかすぎて上げられないだけ)。
ちなみに本来のシネマグラフはもっとすごい。本当に動いていてループしているように編集されているgifなのだ。
だがこれは一枚の写真を簡易的に動かしている、つまり簡易シネマグラフである(即席とも言える)。
このような一枚の写真を動かすソフトやアプリはいくつもあるが、我輩は色々使った結果、
・PC上のソフトならソースネクストのPhotoMirage
・モバイル端末のアプリならMotionleap(旧pixaloop)
この2つが最も質がいいのでこれらをよく使っている。
というわけで、このようなGIFが大好きである我輩の、ブログ内アイコンは現在息をしている。
その息するアイコンをプロフィール上に表示するにあたって何をしたか、それをこの記事では説明していこうと思うぞ(雑だが許してくれ)。
このブログははてなブログであるので、ひとまずカスタマイズ画面までの行き方ははてなブログのもので説明する。
【デザイン】→【カスタマイズ】(スパナマークのやつ)→【サイドバー】
この中の【プロフィール】を編集で自己紹介欄の一行目に、
<img class="任意のお名前" width="任意のサイズ" src="GIF画像のURL">
↑これを書けばOKである。
別ブログサービスでも相応のところにこれを記載したら問題ないはずだ。
例えば、我輩の場合はこんな感じ↓
<img class="wagahaiboro" width="100" src="GIF画像のURL">
classはcssでいじくるときの識別子ぐらいの認識なので適当に名前を付けている(ちなみに我輩は目的のことだけ、興味があることだけしか調べない人間なのでその認識が正しいかは知らんしどうでもいいが動いているので多分正しいだろう)。
widthを指定してheightを指定していない理由は縦横比を崩したくなかったからである。どちらか一方だけを指定すれば、縦横比は元画像のままズレることは無い。
srcはその名の通りソースなので、画像のURLを貼ればいい。つまりはてなブログなら、はてなフォトライフのブログ用に用意されているフォルダ(己だけに閲覧権限があるフォルダ)、他ブログサービスでもファイルアップロード用にクラウドストレージはある(LivedoorでもFC2でももちろんある※制限はそれぞれ違う)ので、そこにアイコンにしたいGIF画像をUPし、URLをコピーしてsrc=""の、"と"の間にペだ。
我輩のアイコンは元々、
これである。※説明しよう。ブラウン管の中にいるのは我輩、ボロボロ皇帝だ。
でまあこれを…
こうした。※説明しよう。煙が出ているのはボロボロだからだ。剥き出しの鼓動する心臓をおこうかと思ったが気持ち悪すぎてやめた。
何故画質が悪化したかというのは、やはりご愛敬である(※容量問題)。
とまあ容量を下げるというご愛敬を添えないとアップロード先が受け入れてくれないことが多々ある。
※どうしても下げたくない場合はGoogleドライブだとかにUPして共有にして共有リンクで引っ張るという方法をとればいいが我輩はめんどいしどうせアイコンは表示サイズが小さいのでのでやらない。
その容量を下げるにあたって我輩が使ったサービスが、
Animated GIF editor and GIF maker
ここである。
ここは非常に便利だ。
何が凄いかというと、
●だいたいのGIF圧縮サービスがほぼほぼ圧縮出来ないのに対し、ここはうまいこと容量を減らしてくれる事。
●ファイルサイズが35MBまで対応していること。※重いから減らしたいのにそもそもの対応サイズがちっさくて使えないサービスも多いので、ここは本当に凄い。
このリンク先のOptimizeを使えば良い。Optimizeとは最適化の意味である。
我輩の場合はOptimizeでまずフレーム数を減らした。その後に圧縮率をMAXの200にして圧縮である。
※Optimizeにも種類がある。2枚ごとにフレーム減らすだとか減色方法だとか。順番一つで逆に容量が増えたりもするが、まあやり直しは利くので試行錯誤してみると良いぞ。
それでもどうにもならなかったら画像そのもののサイズを小さくするためにリサイズだな。
もしこれでダメな場合は、そのgifファイルが動画から変換されたものである可能性が考えられる。動画ファイル自体が高解像度で重すぎるともちろんgifでも容量が増えるので、まずは元となる動画から見直したほうが良いだろう(先に動画容量を減らすのだ)。
これでどうにか容量を減らした我輩のアイコン用GIF画像。
早く生かしたい。
生かしたい…
息させたい！！
との思いで貼り付けたは良いが、元の画像が四角いので四角く表示されて、あー丸くせねば、と言うことに気づいたので、
ここを参考にした。
我輩の場合は、srcやwidthは既にimgタグ内で指定しているので、cssでの指定は不要であり、この上記のサイトから、
border-radius: 50%;
background-position: left top;
これだけを使うことにしてcssに記載した。※left topは我輩の画像を切り抜く位置。真ん中であればcenter centerらしい。
つまり我輩の場合は、
.wagahaiboro {
border-radius: 50%;
background-position: left top;
}
こう書いたのである。
wagahaiboroの部分は、先に任意で決めたimgタグ内のclass名であるので、それぞれclass名を記載してくれ。
border-radius: 50%;が円形にするための表記だとのことだ。
と、こんな感じで無事アイコンを丸く息させることに成功した我輩。
満足である。
ちなみにタイトルでも言っているが、
とんでもないGIFアーティスト、A. L. Crego氏が意味わからんくらい凄い作品をつくっているので、ぜひ見てみてほしい。
一番好きなのはこれだが、これ以外も全部凄い。気になったらぜひ。
A. L. Crego - Tumblr↓
