So-net無料ブログ作成
検索選択

子猫にも貼れるゲスト・アイコン 1.1 [s k i n]

GUEST ICON

 It's Neko!(background-color:#ff99cc)


 It's Neko!(background-color:#999999)


 It's Neko!(background-color:#99ff66)


 It's Neko!(background-color:#99ccff)


 It's Neko!(background-color:#cc99ff)


ソネ風呂に入会していない読者がコメントした時に表示されるゲスト・アイコンは味も素っ気もない。1人でも多くの会員を獲得したいソネ風呂が非加入者を差別化しているようなゲスト・アイコンですね(今後カスタマイズをサポートする可能性は少ないでしょう)。心苦しく思っていたソネ風呂ガーの気持ちに応えて、TANさんがカスタマイズしてくれました。「So-netブログのコメント欄のゲストアイコン変更」は1種類のアイコンですが、複数アイコンのランダム表示を可能にしたのがstuderさんの「コメント欄のゲストアイコンを変更しよう」。ゲスト・アイコンのランダム複数化によって、lapisさんのコメント欄のように誰がソネ風呂会員で、誰がゲストだか分からないという愉快なことになっています。そもそも会員と非会員を区別すること自体が変なわけで、ソネ風呂の思惑をも無効化するランダム・アイコン表示のカスタマイズは快挙と言っても良いくらいです。

                    *

SKNYS ICON

 Sknys Cat!(Chitora 2004)


 Sknys Cat!(Mina 2004)


 Sknys Cat!(Bebe 2005)


 Sknys Cat!(Poe 2005)


 Sknys Cat!(Asuka 2005)


しーちゃんのランダム・ゲスト・アイコンは超可愛い。Maukieさんのモデルにしたかのような4匹の黒ネコ・アイコン。しかも目を瞬いたり、耳を動かしたり。首を振ったり‥‥ウチのNekoさんが不憫に思えて来てリニューアルしました。一回り小さくして背景をパステル色に変更、管理トップページのアイコンのような白枠を付けてみました。通常はパディング(padding)で指定しますが、背景色(bacground-color)が「Skin Swtcher」と連動して変化するようにしてあるので、ボーダー(border)を使っています(ただしアイコンやコメント欄の背景が白いと「白枠」になりません。さらに外枠を付けたい場合はアウトライン(outline)で指定します)。アイコンに白枠を表示する場合は下記のタグのどちらか一方をCSS編集ページか、<style>〜</style>で囲ってカスタムペインの中に入れます。ゲスト・アイコンをランダム表示化したいけれど、ゲスト・コメント数も少ないし、Mac OS Xには画像編集ソフトも付属していないしなぁ‥‥というわけで、発想の転換。自分のプロフィール・アイコンをランダム表示にしてみたら?

コメント欄のアイコンに白枠を付ける

.each-comment img{border:solid 1px #d5d5d5; padding:3px; background-color:#ffffff} /*パディングとボーダーで指定*/

.each-comment img{border:solid 3px #ffffff; outline:solid 1px #d5d5d5} /*ボーダーとアウトラインで指定*/


コメント欄の外枠・背景色・文字色

#comments, #comment-write{border:dotted 1px #xxxxxx; background-color:#xxxxxx; color:#xxxxxx}

                    *

studerさんのJavaScriptをアレンジして、コメント欄の黒ネコ・アイコンを5種類のネコちゃんがランダム表示されるようにカスタマイズしました。変化するのはスニンクスのコメント欄だけで、サイドバーのプロィール・アイコンや、他のソネ風呂のコメント欄に付いているアイコンは従来通り「黒ネコ」のままです。過去記事のトップを飾った写真のネコたちをトリミング(120x120px)してリサイクルしました。アイコン用の画像は表示されるサイズ(36x36px)で作らなくても大丈夫(このサイズだと写真よりもイラストの方が映えますね)。リロードする度にアイコンが変わるのが愉しい。自分のプロフ・アイコンを定期的に変えているソネ風呂ガーも、過去に使っていた旧アイコンを再利用出来るので、嬉しいカスタマイズかもしれません。ゲスト・アイコンとプロフ・アイコンの両方をランダム表示化することも可能だと思いますが‥‥。

プロフィール・アイコンのランダム表示
<script type="text/javascript">
<!--
var profile_icon = new Array();
profile_icon[profile_icon.length] = '/_images/blog/_fc3/sknys/cat-icon00839.jpg'; // ←ここに画像ファイルを設定
profile_icon[profile_icon.length] = '/_images/blog/_fc3/sknys/cat-icon01310.jpg';
profile_icon[profile_icon.length] = '/_images/blog/_fc3/sknys/cat-icon01915.jpg';
profile_icon[profile_icon.length] = '/_images/blog/_fc3/sknys/cat-icon01936.jpg';
profile_icon[profile_icon.length] = '/_images/blog/_fc3/sknys/cat-icon01942.jpg'; // アイコンの数に応じて、行を追加削除して下さい

var img = document.getElementsByTagName("img");
for( i = 0; i < img.length; i++ )
if( img[i].src == "http://blog.so-net.ne.jp/_profile/_fc3/sknys/_s_sknys.png" )
img[i].src = profile_icon[Math.floor(Math.random() * profile_icon.length)];
//-->
</script>

                    *

「サンプル・コメント 2」を作ってみました。ゲスト・アイコンは「Skin Swtcher」を切り替えることで背景色が変化、プロフ・アイコンは読み込む度にランダム表示されます。リロードした時に同じネコちゃんが表示される確率は 1/5。チトラミーナベベポーアスカ(デフォルトの「黒ネコ・アイコン」はランダム表示されません)‥‥お気に入りのネコちゃんが表示されるまでリロードして遊びましょう。コメント数が多い人気ブログには「ランダム・ゲスト・アイコン」、少ない弱小ブログには「ランダム・プロフ・アイコン」を採用すると効果的かもしれません。TANさんのゲスト・アイコンよりも、studerさんのランダム・アイコンの方が少し速く表示されるようです。しーちゃんが素敵な「ゲストアイコン用画像」を公開(お持ち帰り自由!)しています。ゴロニャン。

サンプル・コメント 2(カスタマイズ)

It's Neko!

私をゲスト・アイコンにしてくれたのね。
by It's Neko! (2009-07-07 20:12)

sknys

Nekoさん、気に入ってくれましたか^^;
by sknys (2009-07-07 22:38)


サンプル・コメント 2(デフォルト)

It's Neko!

味も素っ気もないゲスト・アイコンね。
by It's Neko! (2009-07-07 20:12)

sknys

デフォルトの黒ネコ・アイコンです^^
by sknys (2009-07-07 22:38)


                    *
  • 「子猫にも貼れる」シリーズ第5弾はコメント・アイコンのカスタマイズです^^

  • ボーダー(border)で指定した白枠にアウトライン(outline)で外枠が付けられます(2012.05.06)
                    *




s k n y s - c a t s

s k n y s - c a t s

  • Name: Chitora
  • Type: House Cat
  • Date: 2005/12/06
  • Media: Photograph



s k n y s - c a t s

s k n y s - c a t s

  • Name: Mina
  • Type: Homeless Cat
  • Date: 2006/02/01
  • Media: Photograph



s k n y s - c a t s

s k n y s - c a t s

  • Name: Bebe
  • Type: Homeless Cat
  • Date: 2006/01/04
  • Media: Photograph



s k n y s - c a t s

s k n y s - c a t s

  • Name: Poe
  • Type: House Cat
  • Date: 2006/02/21
  • Media: Photograph



s k n y s - c a t s

s k n y s - c a t s

  • Name: Asuka
  • Type: Stray Cat
  • Date: 2005/11/20
  • Media: Photograph

コメント(4)  トラックバック(0) 

コメント 4

しーちゃん

sknysさん、私の記事に過分なお褒めを頂き、ありがとうございます。
すみません、sknysさんの記事、一読したくらいでは内容がよく理解できず(今もスクリプトのところは理解外ですが)コメントが遅くなりました。コメント欄のゲストアイコンだけでなく、自分のプロフィールアイコンもランダム表示できるんですね! 確かに、自分のコメントが一番並びますものねー。色々なことができるんですね、すごいです。
by しーちゃん (2009-07-07 08:32) 

sknys

しーちゃん、コメントありがとう。
CSS(スタイルシート)の説明が不十分だったかもしれませんね。
カスタマイズのポイントは次の2つ。
コメント・アイコンに白枠を付けるCSSと、
自分のアイコンをランダム表示化するJavaScript。

JavaScriptは「guest」を「profile」に変更しただけで、
TANさんやstuderさんのように自由自在に書けるわけではありません^^;
CSSはブログ・カスタマイズが公式サポートされる以前に
見よう見真似で知識を仕入れただけです。
「門前の小僧習わぬ経を読む」の類いでしょうか^^
by sknys (2009-07-07 21:00) 

lapis

sknysさん、こんばんは
お洒落で可愛らしいアイコンですね!
というわけで、早速使わせていただきました。
記事中に僕の名前が出てくるとは思ってもいなかったので、吃驚しました。(笑)
by lapis (2009-07-07 22:45) 

sknys

lapisさん、コメントありがとう。
It's Nekoのオリジナルは日本人のプログラムによるものらしい。
旧ゲスト・アイコンよりも1回り小さなサイズに変更しました。

studerさんのランダム表示スクリプトを2つ(ゲスト&プロフ)入れて、
正常に動くかどうかは未検証です^^;
by sknys (2009-07-08 01:16) 

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 0