ヘッダーロゴを動くアニメーションGIF画像に変えてみた！作り方＆簡単な手順を紹介
2016/12/30
GIF画像を作ってみたい！手順は？難しいの？
そんなことないですよ！この方法で簡単に作れますよ！
というわけで、
ヘッダーが文字だけでくっそダサかったのでテキトーに変えてみました！
どうです？上手く表示されてますかね？
まあまだまだ納得はしていませんがとりあえずということで。
よくある文字だけめっちゃオシャレだったりフリー素材を加工して「あー、あそこのやつ使ったのね」みたいになるのは嫌だったので、あまり見かけないgif画像を取り入れました。
なんでみんなやらないんでしょうね？簡単なのに。
(※追記)
この記事の内容を使って下の記事を書きました！
参考：【空想科学】クリスマスなのでサンタクロースを物理科学してみた。【ネタ】
手順１．画像を作成する
画像を作る方法は「photshop」とか「photoscape」とかまあいろいろあるんで正直何でもいいです。
お任せします。
ちなみに僕は大学生らしく「powerpoint（パワポ）」で作りました。
レポートとかで回路図よく書くのでこういうお絵かきは得意分野です(笑)
回路なのでcadでも使おうかと思いましたが、「なんか違うな」って思ったんでやめました。
さて、画像は各自で任せるとして、問題は作る枚数です。
GIF画像は何枚かの画像をループして作られています。
ゆえに基本となる画像を作った後、少し変化を加えた画像を数枚作る必要があるということです。
今回僕は下の二枚を作成してループさせました↓
ーーーーーーーーーーーーー
（サイズはテキトーに900×200くらいになればいいかと思いスピニングツールでテキトーに切り取りました(笑)）
手順２．ループ画像の作成
画像が出来たら下記のサイトに飛んでGIF画像を作成します。
参考サイト：GIFアニメ・アニメーション作成サイト
作った画像を選択してしてください。
このとき表示順を間違えると飛び飛びなアニメーションになるので気をつけてください。
選択ができたら次は諸設定です。
点滅間隔はある画像から次の画像に移動する秒数のこと。
ループ設定は一度のみなら「一度のみループ」を選んでください。
それができたら「GIFアニメを作成する」を押してください。
すぐにページが切り替わるのであとは出来たGIF画像をダウンロードしてやればOKです。
注意点
出来たGIF画像をネットに表示するにはアップロードしないといけません。
直にC:フォルダのアドレスを貼っても自分だけしか見えないので注意です。
またStinger5など自分のブログに表示する際は、キャッシュが残ってるので最初は表示されないことがよくあります。
そんなときは「Ctrl+F5キー」でキャッシュスルーのリロードを行えば解決します。
プレビュー表示してみて微調整したい場合はテーマのCSSを弄りましょう。
「style.css」でmax-widthやpadding、marginを設定してやると上手く表示されると思います。
参考サイト:STINGER5ファビコンやヘッダー画像をカスタマイズする方法
Stinger5のみならず、CSSはあらゆるテーマに共通に有るものなので参考にしてみましょう。
余談
正直まだまだショボさが否めないですが、まあ良しとしましょう。
ヘッダー画像を設定する利点は下のサイトを参考にしてください。
参考サイト：僕がブログのヘッダー画像を変えた３つの理由とその方法
昔（と言っても７年前）GIF画像でバナー広告だとかいろいろ作ってたんで割とサクッと作れました。
っていうか便利なサイト多すぎでしょ(笑)
昔だったらGIF画像一個作るのにいろんなソフトをインストールしなきゃいけなかったのに。
既存のソフトとオンラインツールで簡単に作れるようになるとは…。こりゃ在宅業務が捗るってもんだ。
ちなみに画像の回路はスイッチが入ると「ととと」の部分が光るようにしていて、僕が工学部ってことを表しています。
また「ログ」の「゛」を♫にしたのは僕が元合唱部ってことを表すためです。
まとめ
GIF画像作り
- 画像を複数枚作ろう！
- オンラインツールで簡単にGIF画像を作成
- サイトに載せる際の設定など諸注意
- 余談
GIF画像を導入した理由として、ただつまらないのが嫌っていうのもあるんですが、やはりヘッダ・ロゴ画像は目を引かないと意味ないので「それなら動きをつければイイじゃん」って理由もありました。
まだまだ改良の余地はありそうなので弄っていきたいと思います。
皆さんもどうですか？GIF画像。