マウスで画像切替え [blog向上委員会]
今日は2本立てです。前回に引き続き、今回もblog向上委員会ネタになります。
ほんとは、ちょいとポエムなんぞやってみよかなと思っててんけど、久々のblog向上委員会ネタをやり始めると、どうも止まらなくなってしもてね(笑)。
■マウスで画像を切り替えましょう
あちこちのWebページで、画像にマウスカーソルをポイントすると「絵が変わったっ！」っての、見たことありますよね。ってか、先日うちのblogでもやりましたが(笑)。
これ、意外と簡単なんですよ。
まずは、画像を用意します。
<img src="/blog/_images/blog/_af2/nyx/9944210.png" />
<img src="/blog/_images/blog/_af2/nyx/9944220.png" />
マウスのポイントで画像を切り替えるためのタグは、こう指定します。
記事に背景画像を付けましょう [blog向上委員会]
さて、今回は久々の『blog向上委員会』カテゴリの話です。
2007-10-20 優しくない方が気にかかる
2007-10-08 【歌詞】うつろい
この２つの記事で、背景画像を付けたり、２つの画像の切り替えをやっていたら、いつも来てくれるnicoちゃん、ゆうこちゃんが興味をちょっぴり持ってくれたので、それならばと書き始めた訳です。
このblog向上委員会カテゴリの記事って、実は書くのがめっちゃめんどくさいんで(笑)、なかなか書く気になれませんでした。なので、ちょうどいいきっかけをくれたお二人に感謝です。（おじぎ）
今回は、背景画像の話。次回は、画像の切り替えの話をします。
■背景色の付け方
まずは、画像うんぬんの前に、背景色の付け方を。
<div style="background-color:#663300; color:#ffffff;">
この茶色い背景の部分、これをblogの記事本文やと思ってください。で、今こうやって書いてる部分を、<div>～</div>タグで囲みます。
</div>
緑色の文字の部分をコピペして、その間に文字を書けばあら不思議。背景色がぁっ♪
style="～"で指定しているものは、Cascading Style Sheets (CSS)というもので、まぁ、見映えを定義するようなものやと思っててください。
| 特性名 | 指定内容 |
|---|---|
| background-color | 背景色の指定 |
| color | 文字色の指定 |
色の話って、結構ポイントなんです。背景色が茶色で文字も茶色だったらどうなると思います？ 聞くまでもありませんよね。背景画像を付けたら、文字が読めませ～ん・・・ってWebページ、たまに見かけるでしょ？
なので、背景画像を語る前に、この背景色と文字色の話が必要不可欠なんです。
CSSの特性の後に指定している #663300 とか #ffffff は意味不明やと思いますが、色のサンプルを置いた記事の方を参照してみてね！
2007-03-11 文字サイズと色の変更
※注意
同記事に、改行についての注意点を記載してます。So-net blogでは、普通にやると
改行が無視されます(なんでやねん!?)ので、<br />を埋め込んでね。
全然関係ない話ですが、例のところの「<div>～</div>」って、意味不明ですよね。これを打ち込んでブラウザで見ると、
「<div>～</div>」
となるんです。要は、「実際に打ち込んだのはこうだよ」というのを示したかったので、入力ミスではありません。あしからず。
■背景画像の付け方
さて、ここからが本番です。みなさん、画像をアップロードしたりして、張り付けてますよね。
So-net InfoChecker [blog向上委員会]
毎度どうも～♪ おにーさまと呼ばれたいおじさま、氷の翡翠です～♪
今回の記事のマイカテゴリーは、『blog向上委員会』。
『あれこれに』しようかとも思ったんですが、blogで遊ぶ時のツールなので、こっちのカテゴリに入れてみました。
So-net blogのユーザのかたが大半なので恐らくご存知だと思いますが、簡単に紹介しておきましょう。
blogが更新されたら、リアルタイムに通知されるツールです。
・・・ほんとに簡単やな。ま、詳細については、上に張ったリンクからジャンプしてみてください。
So-net blogだけでなく、Blog Cruiser、So-net Calendarも通知してくれるようです。その他、メッセンジャー機能もついてるようですね。
メッセンジャーは、その元祖とも言われているICQが世に出た頃、つまり、まだβ版の頃に使ってました。Webチャットって、30秒毎にリロードしたりだとか、いまいちリアルタイム性が無いので、その昔あったパソコン通信と比べて楽しめなくてね。んで、ICQを使ってた訳です。
やっぱリアルタイムに話が出来るのは、楽しいですからね。難を言えば、1対1の会話しか出来なかったってことぐらいかな。
メッセンジャーって、最近は何が人気あるんでしょうかね。ちょっと調べてみただけでも、
ICQ
AIM(AOL Instant Messenger)
Windows Live Messenger/MSN Messenger
Yahoo!メッセンジャー
Google Talk
ウェブリメッセンジャー
楽天メッセンジャー
と、ぼろぼろ出てきます。
という訳で、もしメッセンジャーをお使いのかたがいらっしゃいましたら、
・使用感（高機能だとか、重い、軽いだとか。）
・安定感（バグが多いとか、よく落ちるとか。）
このあたりについて情報をお願いします。
そういや、前述のメッセンジャーのサービスを、同時に複数扱えるソフトなんかもあるようですね。それについても、もし情報をお持ちでしたら教えてください。
☆決して、ID教えてくれだとかそんなことは言いませんので、ご安心を。
・・・かといって、事前に信用できるだけの根拠を出せと言われたところで、出せないというか、出しようがありませんけど(笑)。
ところで、今回の話は、メッセンジャーがメインではありません。So-net InfoCheckerの話です。
要は、InfoCheckerを入れてもコメントやトラックバックがつかなければ通知されないので、何か記事を書いてみたかったという。。。
・・・子供か、俺は。
なので今は、InfoCheckerのメッセンジャー機能のユーザ検索で、男・大阪・A型で自分を検索して「おぉっ!!(歓)」と、ひとりで喜んでる最中です。
・・・アホか、俺は。
あっ!!(驚) 今、あることに気付きました!!! （ほんとに今気付いた）
うちに来てくれてる方々って、夜型の人がほとんどですよね。夜は呑みに出てることが多いので、通知されてもリアルタイムに知ることが出来ない!!!(驚)
一体、なんのためにSo-net InfoCheckerをインストールしたんだか・・・(困惑)。
文字サイズと色の変更 [blog向上委員会]
どどぉ~ん！ 毎度♪
はい。こんだけです。今日の話題は。
とやってるだけ。32pxを48pxとすればもっと大きな文字になり、#ff0000を#ffff00とすれば黄色い文字になります。
はい？ #ff0000の意味がよくわからない？
ま、そやろね。そう思って、
簡単に説明すると、これは光の三原色であるRed/Green/Blueを16進数の値で指定したものです。って、これだけではイメージも沸きにくいでしょうから、この記事の後半にあるカラーチャートを見てくださいね。ブログ教室よりも、色数は多いですからね！
ブログ教室では<font>タグを使用すると説明されてますが、HTMLの規約を検討しているW3Cってとこでは、<font>タグは非推奨となっています。
なので、ここでは<span style="・・・">って書き方を説明してるんですけどね。でも、どっちでも使いやすい方でいいですよ。
ちなみに、<span>~</span>で囲むと、何故か改行がきかなくなります。私が使っているFireFoxのバグかな？と思ったのですが、IEでもOperaでも同じ現象になります。
別のところでやってるWebページ
ではOKやのに、so-net blogやとなんでやねん？？？
なので、<span>~</span>で囲んだ途中で改行を入れたい場合は、<br />を入れます。
無効！</span>
<span style="font-size: 12px; color: #ff0000;">改行<br />入り！</span>
とやれば、
改行
入り！
ってな感じになります。比較すると、一目瞭然ですね。
ではでは、お待たせしました。カラーチャートをご覧ください。
プロフィール画像にGIFアニメ（2007年02月版） [blog向上委員会]
オリジナルカクテルのシェラザードの続きをと思っていたのですが、とりあえずそれは明日以降にアップすることにしました。
以前の記事『プロフィール画像にGIFアニメ』で話したTips、覚えてらっしゃいますでしょうか。
So-net Blogのサイドバーに置くプロフィール画像、GIFアニメをアップロードしてもPNGファイルに変換されてしまうため、動いてくれないのでどうにかしましょうという話です。
無事にGIFアニメが表示されて満足していたのですが、2006年10月からSo-net Blogのスタイルシートの仕様が変わったらしく、そのままではGIFアニメを表示することが出来なくなりました。
ずっと気付いては居たのですが、忙しくてほったらかしになっていてすみません。今回、どうすれば良いか、改めて話をいたします。
変わったところだけ話しても意味不明でしょうから、全部最初から話しますね。簡単に言えば、通常のプロフィール画像を見えなくして、その場所にGIFアニメを背景画像として表示させる方法です。
プロフィール画像にGIFアニメ（後日談） [blog向上委員会]
前回、「プロフィール画像にGIFアニメ」ということで、
GIFアニメをプロフィール画像に設定する方法について、長々と語ってしまいました。
・・・が、
あれからよく考えてみて、こんなことに気付きました。
もし、NICE!の数や記事数が不要だとしたら、、、
・・・なんだったんだ、あの苦労は。。。
プロフィール画像にGIFアニメ [blog向上委員会]
いやいや、今回はこのブログの趣旨とは関係ない話で、プロフィールの画像を
GIFアニメーションにしようという内容です。
一体どういうポリシーがあるのかさっぱりわかりませんが、プロフィール用にと
画像をアップロードすると、全てPNG形式ファイルに変換されます。多くの方は
特に問題ないと思いますが、私にとってはそういう変換は困りもの。
GIFアニメはみなさんご存知のように、パタパタアニメを画像ファイルで実現した
ものですが、PNG形式ではアニメがサポートされていませんので、せっかくの
アニメがアニメでなくなってしまいます。
前フリはこのぐらいにしておいて、プロフィールの画像をGIFアニメにする
具体的な方法を説明しますね。
