プロフィール画像にGIFアニメ（2007年02月版） [blog向上委員会]
オリジナルカクテルのシェラザードの続きをと思っていたのですが、とりあえずそれは明日以降にアップすることにしました。
以前の記事『プロフィール画像にGIFアニメ』で話したTips、覚えてらっしゃいますでしょうか。
So-net Blogのサイドバーに置くプロフィール画像、GIFアニメをアップロードしてもPNGファイルに変換されてしまうため、動いてくれないのでどうにかしましょうという話です。
無事にGIFアニメが表示されて満足していたのですが、2006年10月からSo-net Blogのスタイルシートの仕様が変わったらしく、そのままではGIFアニメを表示することが出来なくなりました。
ずっと気付いては居たのですが、忙しくてほったらかしになっていてすみません。今回、どうすれば良いか、改めて話をいたします。
変わったところだけ話しても意味不明でしょうから、全部最初から話しますね。簡単に言えば、通常のプロフィール画像を見えなくして、その場所にGIFアニメを背景画像として表示させる方法です。
------------------------------------------------------------------
1. GIFアニメ画像の用意
プロフィールの画像用なので、サイズは 72×72 ピクセル以内のものを用意します。
2. 画像アップロード
管理ページ → 設定 → サイドバー」と進みます。ここで、カスタムペインを編集します。別の用途で使っているもので結構です。私の場合は、Mail & Web Page Link という名でカスタムペインを使用しているので、それを変更しました。
カスタムペインの編集画面で、GIFアニメをアップロードします。そして、その画像をクリックして、本文のところにタグを貼り付けます。
<img src="/blog/_images/blog/_af2/nyx/3592060.gif" />
私のGIFアニメは↑でした。で、必要なのは、色を変えてある/_imageから .gif まで。
カスタムペインの編集画面で、GIFアニメをアップロードします。そして、その画像をクリックして、本文のところにタグを貼り付けます。
<img src="/blog/_images/blog/_af2/nyx/3592060.gif" />
私のGIFアニメは↑でした。で、必要なのは、色を変えてある/_imageから .gif まで。
3. スタイルシートの記述
カスタムペインの編集画面の本文で、先ほど貼り付けたタグ自体は不要なので、/_imageから .gif までを残してあとは削除します。そして、以下のスタイルシートを記述します。
<style type="text/css">
#profile .sidebar-body { background:url("/_images/blog/_af2/nyx/3592060.gif") no-repeat 5px 10px; }
#profile img { visibility:hidden; }
</style>
#profile .sidebar-body { background:url("/_images/blog/_af2/nyx/3592060.gif") no-repeat 5px 10px; }
#profile img { visibility:hidden; }
</style>
というふうにした結果が、左のサイドバーのプロフィールのアニメです。プロフィールの背景にGIFアニメを設置しただけ。ポイントは、「 #profile img { visibility:hidden;} 」で、本来表示されるべきプロフィール画像を見えなくすることです。
最後に記述してある 5px 10px は、表示位置の調整です。位置が気に入らない場合は、数値を変えてみてください。
------------------------------------------------------------------
ということをやれば、プロフィールのところにGIFアニメが表示できます。
さて、以前の指定と今回の指定を比べてみましょう。
☆今の記述☆
#profile .sidebar-body { background:url("/_images/blog/_af2/nyx/3592060.gif") no-repeat 5px 10px; }
#profile .sidebar-body { background:url("/_images/blog/_af2/nyx/3592060.gif") no-repeat 5px 10px; }
☆昔の記述☆
#profile { background:url("/_images/blog/_af2/nyx/3592060.gif") no-repeat 5px 10px; }
#profile { background:url("/_images/blog/_af2/nyx/3592060.gif") no-repeat 5px 10px; }
昔は#profileだったところを、今は#profile .sidebar-bodyと指定します。
#profileと.sidebar-bodyの間は、必ず半角の空白を1つ以上入れてください。
ところで、カスタムスキンが使えるようになったので、それでやればいいという意見もあるでしょうけれど、今まで使ってたスキンのままで手軽にプロフィール画像をGIFアニメにできるということで、なかなか使い勝手はあるかと。
そのうち、既存のスキンをカスタムスキンに移行する方法でも話してみましょうか。是非知りたいという人が現れたら・・・ですけど。
初めまして！色々！拝見させていただきました。
凄く！勉強になします。プロフィール画像表示できました。
ありがとうございます。＾＾♪
by chiko (2007-03-01 20:56)
chikoさん、いらっしゃいませ（おじぎ）。よくまぁ、こんな全然めだってないところに、たどりつきましたね。
びっくりするとともに、もっともっと、So-net blogを良くしていこうと頑張ってる方々がいる中、お目にとまっていただけたのが、ものすごく嬉しく思ってます。
ありがとうございます！
by 氷の翡翠 (2007-03-03 01:20)