プロフィール画像にGIFアニメ [blog向上委員会]
いやいや、今回はこのブログの趣旨とは関係ない話で、プロフィールの画像を
GIFアニメーションにしようという内容です。
一体どういうポリシーがあるのかさっぱりわかりませんが、プロフィール用にと
画像をアップロードすると、全てPNG形式ファイルに変換されます。多くの方は
特に問題ないと思いますが、私にとってはそういう変換は困りもの。
GIFアニメはみなさんご存知のように、パタパタアニメを画像ファイルで実現した
ものですが、PNG形式ではアニメがサポートされていませんので、せっかくの
アニメがアニメでなくなってしまいます。
前フリはこのぐらいにしておいて、プロフィールの画像をGIFアニメにする
具体的な方法を説明しますね。
1. GIFアニメ画像の用意
プロフィールの画像用なので、サイズは 72×72 ピクセル以内のものを
用意します。
2. 画像アップロード
「管理ページ → 設定 → サイドバー」と進みます。ここで、カスタムペインを
編集します。別の用途で使っているもので結構です。
私の場合は、Web Page Link という名でカスタムペインを使用しているので、
それを変更しました。
カスタムペインの編集画面で、GIFアニメをアップロードします。そして、
その画像をクリックして、本文のところにタグを貼り付けます。
<img src="/blog/_images/blog/_af2/nyx/3592060.gif" />
私のGIFアニメは↑でした。で、必要なのは、/_imageから .gif まで。
3. スタイルシートの記述
カスタムペインの編集画面の本文で、先ほど貼り付けたタグ自体は不要
なので、/_imageから .gif までを残してあとは削除します。そして、以下の
スタイルシートを記述します。
<style type="text/css">
#profile img { visibility:hidden; }
</style>
#profile img { visibility:hidden; }
</style>
というふうにした結果が、左のサイドバーのプロフィールのアニメです。簡単に言えば、プロフィールの背景にGIFアニメを設置しただけ。
ポイントは、「 #profile img { visibility:hidden;} 」で、本来表示されるべきプロフィール画像を見えなくすることです。
ほかにもプロフィール画像がPNG形式に変換されることによる問題はあります。
GIFやPNG形式では透過色を指定することが出来るのですが、変換に
おいてその透過色も無視されてしまいます。こればっかりは、どうしようも
ないようですね。
PNG形式のファイルをアップロードしても無意味な変換（PNG→PNG）が行わ
れるらしく、なんでわざわざそんなことをするのだろうかと、ものすごく不思議です。
今回の話は、「みつなり」さんの「～物欲日記～」にアップされていた、
という記事を参考にさせてもらいました。
☆☆☆ 2007年02月04日 補足 ☆☆☆
2006年10月からSo-net blogのスタイルシートが変更になったようで、上記の記述だけではGIFアニメを表示することができなくなっています。詳細は別途アップします。
☆☆☆ 2007年02月04日 補足 ☆☆☆
あたしも
イロイロやりたいんだけど
？？？？？？？？？？？？
ワカラナイ…
by (2006-06-06 21:10)
いらっしゃい♪見栄えに凝ってしまう私は、技術屋の性(サガ)かもしれません。minazukiさんもやりたいことを友達に話して、ひとつひとつ教えてもらいながらやってみるってのは、いかがですか！
by 氷の翡翠 (2006-06-07 01:09)