子猫にも貼れる Google検索 2.1

トラックバック 1

【重要】ブログ検索機能終了（What's new? 2017-09-21 14:43）

いつもご利用いただきありがとうございます。
ブログ検索機能を2017年10月10日（火）に終了とさせていただきます。
ご利用いただいておりました皆様におかれましてはご不便おかけし申し訳ございません。
何卒ご了承くださいますようお願いいたします‥‥〔続く〕

「トラックバック機能」に続いて「ブログ検索機能」も終了した。ブログ・ヘッダの右上に表示されていた「ブログ検索」は ｢Web検索｣ ｢ブログ全体｣ ｢So-net blog検索｣ の３種類。｢Web検索｣ はSafariやFirefoxなどのブラウザに予め「Google Search」が入っているし、ブログ検索機能は利用者が少ないのか、｢Googleブログ検索｣ も既に終了してしまった。｢So-net blog検索｣ も余り利用価値がない。個人的に一番使用しているのはサイドバーにある「ブログ内検索」だが、デフォルトの「記事検索」は使い勝手が悪い。｢Google Site Search｣ にカスタマイズすると、過去に書いた記事を検索するのに役立つ（任意の固有名詞や文章を入力すると、その文章列を含む記事が全て列挙される）。この機会に〈子猫にも貼れる Google 検索 1.3〉と〈子猫にも出来るプチ・カスタマイズ〉の「Google検索カスタマイズ」を１つの記事に纏めてみました。

s k n y s - s y n k s  by  

<div class="customPane-body">
<div id="search">
<form action="http://www.google.co.jp/search" method="get">s k n y s - s y n k s  by <a href="http://www.google.co.jp/" target="_blank"><img src="/_images/blog/_fc3/sknys/google-logo.png" width="45" height="17" border="0" align="" style="margin-bottom:-6px" /></a>
<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-button" value="search" name="btnG" type="image" src="/_images/blog/_fc3/sknys/glass-search-icon.png" width="22" height="22" 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.ss-blog.jp/" type="hidden">
<input name="sitesearch" value="http://sknys.blog.ss-blog.jp/" type="hidden">
</form>
</div>
</div>

<style>
#search .sidebar-body{margin-top:6px; margin-bottom:-8px}
.search-tbox{border:1px solid #999999; width:83%; height:20px; color:#999999; background-color:#ffffff; padding-left:5px; border-radius:5px 0px 0px 5px}
.search-button{border:1px solid #999999; border-left:0px; margin-left:0px; width:22px; height:22px; border-radius:0px 5px 5px 0px; background-color:#ffffff}
.search-button:hover{background-color:#cccccc}
</style>

　　　　　　　　　　　　　　　　　　　　＊

〈子猫にも貼れるGoogle検索 1.3〉で作成した「Google Site Search」をプチ・カスタマイズ。Googleが無償提供していた ｢フリー検索｣（ベーシック版）は現在リンク切れになっていますが、以前に公開されていたソース（HTML）をコピペするだけで問題なく使えます。〈子猫にも出来るプチ・カスタマイズ〉では「検索ボタン」を画像（虫眼鏡アイコン）に変更して、「検索ボックス」内に文字（sknys site search）を入れてみましたが、今回は「検索ボックスと検索ボタン」を一体化して、四隅を丸くラウンドさせました。今までカラー文字で表示していた「Googleロゴ」も画像（googlelogo_color_120x44dp.png）に変更。虫眼鏡アイコンも背景色を変えられる透過画像（VisualEditor-Icon-Search.svg） にリニューアルしました。検索ボックス内の文字や文字色、背景色、外枠の色や形状なども自由にカスタマイズ出来ます。｢Googleカスタム検索｣ 風に装うことも可能。たとえば検索ボックスに「Bjork」と入力すると、下記のような検索結果が表示されます。

s k n y s - s y n k s  by  

<div class="customPane-body">
<div id="search">
<form action="http://www.google.co.jp/search" method="get">s k n y s - s y n k s  by  <a href="http://www.google.co.jp/" target="_blank"><img src="/_images/blog/_fc3/sknys/google-logo.png" width="45" height="17" border="0" align="" style=" margin-bottom:-6px" alt="google-logo.png" /></a><br>
<input class="search-tbox3" name="q" type="text" value="Google カスタム検索にゃん" onfocus="if( this.value == 'Google カスタム検索にゃん' ) { this.value = ''; } " onblur="if( this.value == '' ) { this.value = 'Google カスタム検索にゃん'; } "><input class="search-button2" value="search" name="btnG" type="image" src="/_images/blog/_fc3/sknys/glass-search-icon.png" width="22" height="22" 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.ss-blog.jp/" type="hidden">
<input name="sitesearch" value="http://sknys.blog.ss-blog.jp/" type="hidden">
</form>
</div>
</div>

<style>
#search .sidebar-body{margin-top:6px; margin-bottom:-8px}
.search-tbox3{border:1px solid #999999; width:83%; height:20px; color:#ff6600; background-color:#f6e5cc; padding-left:5px; border-radius:5px 0px 0px 5px}
.search-button2{border:1px solid #999999; border-left:0px; width:22px; height:22px; margin-left:0px; border-radius:0px 5px 5px 0px; background-color:#f6e5cc}
.search-button2:hover{background-color:#ffbf7f}
</style>

「Bjork」の検索結果

　　　　　　　　　　　　　　　　　　　　＊

「検索ボックス」（Search Box）と入力して画像検索すると、色々な種類のボックスが表示される。「味気ないデザインを一新！使いやすい検索ボックスを作る6つの方法」にも洒落たデザインが紹介されていた。本家Googleは白いシンプルなボックスに青色の虫眼鏡アイコン。AppleやPitchforkなど、スタイリッシュなサイトでは虫眼鏡アイコンをクリックしないと「検索ボックス」が表示されないようになっている。ユーザの利便性よりもデザインを優先させているわけで、十年一日の 　　　　　　検索 が古臭く見えて来る。「なぜ日本のWEBデザインは2003年で止まってしまったのか？」（Japanese Web Design: Why You So 2003?）という記事が話題になったこともある。本ブログは「検索ボックス」を隠す必然性がないので、虫眼鏡アイコンにカーソルで触れると色が変わるようにカスタマイズしてみた。SKIN SWITCHER と連動して５色に変化します。

s k n y s - s y n k s  by  

SKIN SWITCHER

^{choose a color}  　 　 　 　 　

So-net blog

　　　　　　　　　　　　　　　　　　　　＊

• ｢Wikimedia Commons｣ の「虫眼鏡アイコン」を使わせてもらいました


• 次に終了するのは「TAG CLOUD」、それとも「nice!」でしょうか＾＾;
• 記事の一部を修整しました（2022･5･18）
• 「Sonet ブログ」の「タグ検索」をカスタマイズしてみました（2017･10･18）
• 「Google Site Search」の提供は2018年4月1日に終了するというけれど‥‥

　　　　　　　　　　　　　　　　　　　　＊

　 original skin 1.2 / 2.2 / 3.2 / 4.1 / skin switcher / renewal repair / header helper 1.1 / 2.1 / petit customize for kittens 1.3 / 2.0 / free customize 1.2 / new profile customize 1.2 / 2.0 / farewell trackback 0 / amazon affiliate costomize / google site search costomize 2.1 / sknynx / 732

Googleサービスがぜんぶわかる本 決定版

• 編集：林 美穂子
• 出版社：洋泉社
• 発売日：2017/03/16
• メディア：ムック
• 目次：Googleサービスの基本中の基本! 検索機能をマスターする / これでもう迷わない! Googleマップを使いこなす / 大量のメールを効率的に管理! Gmailをスマートに使いこなす / 文書作成の革命児ツールGoogleドライブでファイル管理の達人に! / 紙の手帳はもう不要? カレンダーでスケジュールを管理する / 便利機能が満載! Chromeでウェブ閲覧を...

タグ：kittens original skin Google

コメント 2

子猫にもはれる。。しかし、ぶーけには貼れない。。＾＾；
ま、いいか、なくても。
なんて思ってしまう私です。

sknysさん、すごい。＾＾
by ぶーけ (2017-10-18 15:29) 

点線の中をコピーして、サイドバーに貼り、
緑色の部分（http://sknys.blog.so-net.ne.jp/）を
ぶーけさんのURLに書き換えるだけです。
検索ボックス内の「sknys site search」は任意の文字に変更して下さい＾＾;
by sknys (2017-10-18 20:51)