So-net無料ブログ作成

子猫にも貼れる Google 検索 1.3 [s k i n]

ソネ風呂の記事検索(デフォルト)は冒頭に広告が表示されるなど使い勝手が悪い。広告が目立たない「Google Search」に変更しよう。Googleが無償提供している「フリー検索」は「ウェブ検索」と「ウェブ検索+サイト検索」の2種類。上が「ウェブ検索」で、下が「サイト / ウェブ」のラジオボタンを切り替えるタイプ。kovaioさんの「検索ボックス」を参考にしてアレンジしました。

Google

Google
      s k n y s - s y n k s www

<!-- Google -->
<form method=get action="http://www.google.co.jp/search"> <a href="http://www.google.co.jp/"><img src="http://www.google.com/logos/Logo_25wht.gif" border="0" alt="Google" align="absmiddle"></a><input class="search-tbox" name=q type=text><input class="search-button" value="search" name="btnG" type="submit"><input type=hidden name=ie value=UTF-8><input type=hidden name=oe value=UTF-8><input type=hidden name=hl value="ja"></form>
<!-- Google -->

<!-- SiteSearch Google -->
<form method="get" action="http://www.google.co.jp/search"><a href="http://www.google.co.jp/"><img src="http://www.google.com/logos/Logo_25wht.gif" border="0" alt="Google" align="absmiddle"></a><input class="search-tbox" name="q" type="text"><input name="ie" value="UTF-8" type="hidden"><input name="oe" value="UTF-8" type="hidden"><input name="hl" value="ja" type="hidden"><input class="search-button" value="search" name="search" type="submit"><br>      <font size="-1"><input name="domains" value="http://sknys.blog.so-net.ne.jp/" type="hidden"><input name="sitesearch" value="http://sknys.blog.so-net.ne.jp/" checked="checked" type="radio">s k n y s - s y n k s <input name="sitesearch" value="" type="radio">www </font></form>
<!-- SiteSearch Google -->

                    *

FirefoxやSafariの検索エンジンには「Google Search」が予めインストールされているので、ブログ内(サイト)検索だけにカスタマイズしてみた。参考にしたのはTANさんの「検索ボックス」。"http://sknys.blog.so-net.ne.jp/"を自分のURLに変更します。


<div id="search"> <form action="http://www.google.co.jp/search" method="get">        s k n y s - s y n k s <br><a href="http://www.google.co.jp/"> <img src="http://www.google.com/logos/Logo_25wht.gif" border="0" alt="Google" align="absmiddle"></a><input class="search-tbox" name="q" type="text"><input class="search-button" value="search" name="btnG" type="submit"><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><br>

<style>
#search .sidebar-body{padding-bottom:6px; margin-bottom:-8px}
.search-tbox{border-width:1px; width:70%; background:#ffffff}
.search-button{border-width:1px; width:54px; color:#339900; background:#ffffff}
</style>


このままサイド欄に置くにはGoogleのカラーロゴが大きすぎてバランスが悪い。下記のようにアレンジしてみました。Googleの文字色はCSSで指定します。


<div id="search"> <form action="http://www.google.co.jp/search" method="get">s k n y s - s y n k s by <b><span class="blue">G</span><span class="red">o</span><span class="yellow">o</span><span class="blue">g</span><span class="green">l</span><span class="red">e</span></b><br> <input class="search-tbox" name="q" type="text"><input class="search-button" value="search" name="btnG" type="submit"><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><br>

<style>
#search .sidebar-body{padding-bottom:6px; margin-bottom:-8px}
.search-tbox{border-width:1px; width:70%; background:#ffffff}
.search-button{border-width:1px; width:54px; color:#339900; background:#ffffff}

.red{color:#ea4335}
.green{color:#34a853}
.blue{color:#4285f4}
.yellow{color:#fbbc05}
</style>


検索ボックス&ボタンの外枠を太くするには {border-width:2px} と指定、左右の幅や上下の余白は各自の使用スキンに合わせてCSSの数値を変えて下さい。

                    *

新春お年玉として 読者になる(RSSに登録) を英文字にカスタマイズする方法を紹介します。矢印(→)は公式スキンから好みのタイプを借用。「SEARCH & RSS REGISTER」のように s k n y s - s y n k s by Google(Googleブログ内検索)とセットで並べると良い感じ。"http://sknys.blog.so-net.ne.jp/index.rdf"を自分のURLに変更してね。


<div id="rssRegist"><a href="https://blog.so-net.ne.jp/MyPage/blog/user_rss/list?url=http://sknys.blog.so-net.ne.jp/index.rdf" title="読者になる(RSSに登録)">SKNYNX RSS REGISTER</a></div>

<style>
#rssRegist{margin:0px 1px 6px 0px; padding:4px 4px 4px 20px; background:#339900 url("/_skin/system/12/images/arrowR_large.gif") no-repeat left center; text-align:center; font-weight:bold; line-height:100%}
#rssRegist a{text-decoration:none; color:#ffffff}
</style>


サイト・ポリシーをアピールして、コピーライト(©)を入れました。

© 2008 sknys. All Rights Reserved.


<div id="rssRegist2"> <a href="http://sknys.blog.so-net.ne.jp/2007-05-16" target="_blank">NO AFFILIATE, NO ANALYZE!</a></div>

<address>© 2008 <span class="csknys">sknys</span>. All Rights Reserved.</address></div>

<style>
#rssRegist2{margin:0px 1px 6px 0px; padding:4px 0px 4px 20px; background:#ef5252 url("/_skin/system/12/images/arrowR_large.gif") no-repeat left center; text-align:center; font-weight:bold; line-height:100%}
#rssRegist2 a{text-decoration:none; color:#ffffff}
.csknys{font-size:small}
</style>


                    *
  • 利用停止になったサーヴィス(blogcruiser)など、記事の一部を削除・訂正しました(2014.04.20)

  • 「Google検索」のリニューアルに伴い、記事の一部を修整しました(2017.10.12)

  • 新しいURL("http://sknys.blog.so-net.ne.jp/")に変更しました。旧URLの記事もGoogleが検索してくれます。記事タイトル〈猫にも出来るブログ内検索〉を〈子猫にも貼れる Google 検索〉に改題しました(2008.03.13)

  • 検索ボタンを画像に変更したり、検索ボックス内に文字を入れる〈子猫にも出来るプチ・カスタマイズ〉も参照してね(2014.12.25)
                    *


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

コメント 0

コメントを書く

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

トラックバック 0