子猫にも出来るプチ・カスタマイズ

〈子猫にも貼れるGoogle検索 1.2〉で作成した「Google Site Search」をプチ・カスタマイズ。Googleが無償提供していた「フリー検索」（ベーシック版）は現在リンク切れになっていますが、以前に公開されていたソース（HTML）をコピペするだけで今でも問題なく使えます。この種の一方的なサーヴィス中止、サイン・インしたり金を出さないと使えない仕様には腹が立つ。もちろん、Googleアカウントを作成して登録すれば「フリー検索」（カスタマイズ版）を設置出来るようになるけれど、個人情報を売り渡さないで密かにカスタマイズするのが子猫ちゃんの流儀。今回は「検索ボタン」を画像に変更して、「検索ボックス」内に文字（sknys site search）を入れてみました。

<div class="customPane-body">
<div id="search">
<form action="http://www.google.co.jp/search" method="get">
<input class="search-tbox" name="q" type="text" value="sknys site search" onfocus="if( this.value == 'sknys site search' ) { this.value = ''; } " onblur="if( this.value == '' ) { this.value = 'sknys site search'; } ">
<input class="search-button0" value="search" name="btnG" type="image" src="/_images/blog/_fc3/sknys/Search-Button-Kovaio.jpg" width="24" height="24" align="top">
<input value="sknys" name="userName" type="hidden">
<input name="ie" value="UTF-8" type="hidden">
<input name="oe" value="UTF-8" type="hidden">
<input name="hl" value="ja" type="hidden">
<input name="domains" value="http://sknys.blog.so-net.ne.jp/" type="hidden">
<input name="sitesearch" value="http://sknys.blog.so-net.ne.jp/" type="hidden">
</form>
</div>
</div>

<style>
#search .sidebar-body{margin-top:6px; margin-bottom:-8px}
.search-tbox{border:1px solid #a3a3a3; width:83% !important; height:20px; color:#999999; background-color:#ffffff; padding-left:5px}
.search-button0{border-width:1px; width:24px; height:24px; margin-left:1px}
</style>

「検索ボタン」を画像に変更するだけで見映えが良くなりますね（虫眼鏡アイコンはkovaioさんから借用しました）。「検索ボックス」内の文字は自由に書き換えられます。「Googleカスタム検索」風にしちゃったりして‥‥。フォーカスするとパッと文字が消えるギミックも小気味好い。文字色やボックス内の背景色、外枠の色や形状などはCSSで自由にカスタマイズ可能です。

　　　　　　　　　　　　　　　　　　　　＊

s k n y s - s y n k s

c a t s.　p a l i n d r o m e.　m u s i c.　c o m i c..

CSS3のプロパティを使った子猫のプチ・カスタマイズを２つ紹介します。ただし旧エクソプローラ（IE9、8以下）では対応していないプロパティもあるので、残念なことに素敵な効果が反映されません。マウスオーヴァの時間を遅延する「transition」とテクストに影を付ける「text-shadow」の合わせ技で、ブログ・タイトルの「s k n y s - s y n k s」に触れると文字がふんわりと暈けるようにカスタマイズしました（「SKIN SWITCHER」との兼ね合いで「!important」を多用していますが、代替えCSSなどを使用していないブログの場合は特に必要ないでしょう）。

<div id="banner">
<h1><a href="http://sknys.blog.so-net.ne.jp/">s k n y s - s y n k s</a></h1>
<p id="lead">c a t s.　p a l i n d r o m e.　m u s i c.　c o m i c..</p>
</div>

<style>
#banner{background:url("/_images/blog/_fc3/sknys/DSC01668X_bn.jpg") no-repeat 0px -25px !important; width:768px; height:150px !important}
#banner h1 {font:bold 26pt "Comic Sans MS", Arial ,sans-serif; padding:30px 0px 10px 0px !important; margin-left:24px; width:352px !important}
#banner h1 a{color:#f5b2b2; -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition: 0.5s; -ms-transition:0.5s; transition:0.5s}
#banner h1 a:hover{color:transparent !important; text-shadow:0px 0px 5px #f5b2b2 !important}
#lead{border:solid 0px #ffffff !important; font-family:"Comic Sans MS", Arial; white-space:nowrap; overflow:hidden; padding-left:0px !important; margin-left:24px; width:352px !important; color:#f5b2b2 !important}
</style>

　　　　　　　　　　　　　　　　　　　　＊

「border-radius」は要素の四辺の角度を変える角丸プロパティ。要素に影を付けて立体的に浮き上がらせる「box-shadow」との合せ技で、「プロフィール画像」をプチ・カスタマイズしました。元の画像を編集・加工することなく、CSSだけで四隅を丸くしたり、影を付けたり出来るわけです。

<div class="sidebar">
<div class="customPane-body"><dl><dt class="profile-img"><a href="http://sknys.blog.so-net.ne.jp/_pages/user/profile/index" target="_blank"><img class="sknys-img" src="/_images/blog/_fc3/sknys/4655909.jpg" border="0" width="100" height="100" title="｢sknysのプロフィール｣を見る"></a></dt></dl>
</div>
<div class="customPane-end"></div>
</div>

<style>
.sknys-img{border-radius:10px; box-shadow:3px 3px 10px #999999; margin:3px}
dt.profile-img{border:solid 1px #ffffff !important; width:100px; height:100px; padding:0px !important; margin-bottom:6px; background-color:#ffffff}
</style>

　　　　　　　　　　　　　　　　　　　　＊

「プロフィール・ページ」も本ブログと同じようにカスタマイズ出来ます（〈猫にも出来る新プロフ・カスタマイズ 1.1〉参照）。リンク文字色の変化を遅延（transition）させて、「プロフィール画像」に影（text-shadow）を付けてみました。

カスタマイズした「sknysのプロフィール」

　　　　　　　　　　　　　　　　　　　　＊

• Manaさんの「味気ないデザインを一新！使いやすい検索ボックスを作る6つの方法」「IE8以下を切り捨てれば使える便利なCSSプロパティー＆セレクター」「コピペでできる！CSS3の素敵効果でテキストリンクを装飾する小技あれこれ 」（Webクリエイターボックス）などを参照しました＾＾;


• 「ブログ内検索」が使い難い場合は「Google Site Search」に変えてみましょう。参考までに、使いものにならないので削除したソネ風呂の「ブログ内検索」を貼っておきます。検索ワードが含まれる記事の冒頭部分が一覧表示されるだけでなく、記事によってはレイアウトまで崩れちゃうのだ！


• sknysさんの記事から
  

　　　　　　　　　　　　　　　　　　　　＊

　 petit customize for kittens 1.3 / 2.0 / sknynx / 507

Unity

• Artist: Hassan Hakmoun
• Label: Rice Records
• Date: 2014/03/23
• Media: Audio CD
• Songs: Zidokan / Balili / Hamadiyi / Dima Dima / Baniyi / Ohio / Boudarbalayi / Soutinbi / Amarmousaoi / Moulay / Balili (Soul K Remix) / Ohio (Yossi Fine Remix)

タグ：Google kittens original skin