子猫にも貼れるゲスト・アイコン 1.3

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）

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

　　　　　　　　　　　　　　　　　　　　＊

SKNYS ICON

　Sknys Cat!（Chitora 2004）


　Sknys Cat!（Mina 2004）


　Sknys Cat!（Bebe 2005）


　Sknys Cat!（Poe 2005）


　Sknys Cat!（Asuka 2005）


　Sknys Cat!（Chocola 2010）


　Sknys Cat!（Ron 2015）

しーちゃんのランダム・ゲスト・アイコンは超可愛い。Maukieさんのモデルにしたかのような４匹の黒ネコ・アイコン。しかも目を瞬いたり、耳を動かしたり。首を振ったり‥‥ウチのNekoさんが不憫に思えて来てリニューアルしました。一回り小さくして背景をパステル色に変更、管理トップページのアイコンのような白枠を付けてみました。通常はパディング（padding）で指定しますが、背景色（bacground-color）が「Skin Swtcher」と連動して変化するようにしてあるので、ボーダー（border）を使っています（ただしアイコンやコメント欄の背景が白いと「白枠」になりません。さらに外枠を付けたい場合はアウトライン（outline）ボックス・シャドウ（box-shadow）で指定します）。アイコンに白枠を表示する場合は下記のタグのどちらか一方を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 box-shadow:0px 0px 0px 1px #d5d5d5}　/*ボーダーとアウトラインボックス・シャドウで指定*/


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

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

　　　　　　　　　　　　　　　　　　　　＊

studerさんのJavaScriptをアレンジして、コメント欄の黒ネコ・アイコンを５種類のネコちゃんがランダム表示されるようにカスタマイズしました。変化するのはスニンクスのコメント欄だけで、サイドバーのプロィール・アイコンや、他のソネ風呂のコメント欄に付いているアイコンは従来通り「黒ネコ」のままです。過去記事のトップを飾った写真のネコたちをトリミング（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';
profile_icon[profile_icon.length] = '/_images/blog/_fc3/sknys/4655909.jpg';
profile_icon[profile_icon.length] = '/_images/blog/_fc3/sknys/DSC02288X_sq.jpg'; // アイコンの数に応じて、行を追加削除して下さい

var img = document.getElementsByTagName("img");
for( i = 0; i < img.length; i++ )
if( img[i].src == "https://blog.ss-blog.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（カスタマイズ）

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

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

サンプル・コメント 2（デフォルト）

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

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

　　　　　　　　　　　　　　　　　　　　＊

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


• ボーダー（border）で指定した白枠にアウトライン（outline）で外枠が付けられます（2012-05-06）


• アウトライン（outline）では四隅を丸く出来ないので、ボックス・シャドウ（box-shadow）に変更しました（2017-11-06）


• プロフィール・アイコンのURLを変更しました（2019-10-06）

　　　　　　　　　　　　　　　　　　　　＊

　 youtube / google / tag cloud / drop-down / icon for kittens 1.3 / sknynx / 215

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

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

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

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

s k n y s - c a t s

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

s k n y s - c a t s

• Name: Chocola
• Type: Stray Cat
• Date: 2006/01/01
• Media: Photograph

s k n y s - c a t s

• Name: Ron
• Type: Stray Cat
• Date: 2005/11/15
• Media: Photograph

タグ：kittens original skin icon

サンプル・コメント 2（カスタマイズ）

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

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