Bloggerのブログのヘッダーをドーンと全画面表示のヒーローヘッダーにして、ついでにアニメーションするようにしてみました。-カナリの備忘録。

schedule
2026-07-13 | 02:11h
update
person
www.kanari.page
domain
www.kanari.page
散らばったポラロイド風画像

英語ブログのヘッダーをヒーローヘッダ風にしてみました。

本当はアニメーションPNG(APNG)やAVIFにしたかったんですが、Bloggerとの相性を考えてアニメGIFにしています。

ブログのヘッダーが全面で動いているだけでも、今風な雰囲気が出ますね。

GIFアニメ特有の少し粗い質感も、一周回って新鮮でお気に入りです。

広告


GIFアニメの作成には「Animated GIF editor and GIF maker」を使用しました。コマ送りで複数の画像を組み合わせる手法です。

今回は、背景を透過させた画像を数枚用意し、それらを連結して一つのアニメーションに仕上げています。


GIFアニメ完成。現在の英語ブログでヘッダーとして使用中です。

「Animated GIF Maker」に画像をアップロードし、ディレイ(表示時間)を調整して、クロスフェード効果をかけるだけで簡単に作成できました。

実用例はKANARI`s weblog :-)から確認いただけます。英語のブログですが、わんこの写真もたくさん載せていますので、ぜひ覗いてみてくださいね!


参考サイト

余談ですが、画像素材は「CANVA」を使うとより手軽に作成できます。

ポラロイド風のレイアウトなども簡単に作れるので、デザインツールとして非常に優秀です。

CANVAの「Placeholder Frame Background」という機能を使えば、写真をドラッグ&ドロップするだけでポラロイド風のデザインが完成します。

直感的な操作でクオリティの高い画像が作れるので、素材作成の強力な味方です。

広告

インプリント
内容については責任を負い:
www.kanari.page
プライバシーと利用規約:
amp-cloud.de/datenschutz
モバイルウェブサイト経由:
Google AMPコードクリエーター
最終AMPHTML更新:
13.07.2026 - 02:12:02
データとCookieの使用: