ブログにGoogleの検索窓を設置する方法 - ゆる~り、ゆるゆると~

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

記事が役にたったら、クリックしてもらうと嬉しいです!
       
人気ブログランキングへ

ブログにGoogleの検索窓を設置する方法

Kisakoです。
私もときには誰かの役に立ちたいっ
と思いたち、こんな記事を(^^;;
堅い記事なので、通常ここに来る皆さまにはあまり関係ないと
思います。スルーしちゃってください。

たぶん、この記事を読んでくださる方は、
検索ヒットしてここに来た人だと思います。

最近、ココログブロガーさんにブログ内検索ができないと不便
だから設定して欲しいと要望したのがきっかけで、ブログにGoogleの
検索窓を設置する方法について調査しました。

ココログには標準のブラグインでブログ内検索がないみたいですね。

【2007.1.3追記ここから】
ココログ限定ですが、Googleを介さずともJavaScript で
検索する方法がありました。参考になると思います。

長所
・google等外部検索エンジンを介さず早い
・全記事対象に検索してくれる。googleは全記事を
 クロールするとは限りません。また、更新時期や頻度は
 不定期です。

短所
・低速回線だと、検索に時間がかかる。
・JavaScriptをOffにしていると、検索できない

自分のココログを全文検索するJavaScript

【2007.1.3追記ここまで】

そのときに、意外と初心者向けの親切な解説記事が少ないなあと
思いました。私がここで記事を載せれば、設定しようとしている
誰かの役にたつかもしれないと思い、この記事を書くことにしました。

自分のブログは、ブログ内検索あるから関係ないと思うでしょ。
でもね、例えば

●FC2
複数の検索キーワードを入れると検索できない。
テンプレートによっては、検索結果に記事そのものが出てくるので
ヒット数が多いと目的とする記事が探しにくい。

●ライブドアブログ
ヒット率が低い。なんでこのキーワードで検索できないのん?って
思ったことありませんか。

なので、Google のサイト内検索窓も併設しても悪くないなと思う
のであります。

この記事は
・ブログにGoogleの検索窓を設置する方法を知りたい。
・ブログにGoogleの検索窓を設置したが文字化けしてしまう。

と悩んでいる人のために書いた初心者向け解説記事です。
更にFC2,ライブドアブログ,ココログは、設定手順も載せています。


これだけ書くの、結構大変でした。
疲れたじょー
本当に誰かの役にたつのだろうか。。。。
無駄な労力だったしてね(^^;;

興味のある方は続きをどうぞ




私は、FC2ブログ、ライブドアブログ、ココログのブログを
持っているので設定手順も載せておきます。
この3つのブログで細かい説明はどうでもいい。
とにかく設置したいという方は、手順だけに進んでもOKです。

gooブログ無料版は2005年10月現在の情報でHTML自由記述欄がない
ようなので、できないかもしれません。

では、解説に入ります。
初心者向けに書いています。
参考になればと書いていますが、私がサポートするわけでは
ありませんので、ご了承ください。

Googleの検索窓の設置方法はGoogle のこのページ
Google フリー検索 (ベーシック版) : ウェブ検索 + サイト検索
に出ています。

これをそのままブログのサイドバーに使うには、
幅が広いですから、サイドバーに置きやすいように
デザインを調整します。

このような表示になります。

Google


WWW を検索
YOURSITE.CO.JP を検索

このデザインのコード

<!-- SiteSearch Google -->
<form method=get action="http://www.google.co.jp/search" target="_blank">
<a href="http://www.google.co.jp/">
<img src="http://www.google.com/logos/Logo_25wht.gif"
border="0" alt="Google" align="absmiddle"></a><br>
<input type=text name=q size=16 maxlength=255 value=""><br>
<input type=hidden name=ie value=Shift_JIS>
<input type=hidden name=oe value=Shift_JIS>
<input type=hidden name=hl value="ja">
<input type=submit name=btnG value="Google検索"><br>
<font size=-1>
<input type=hidden name=domains value="YOURSITE.CO.JP">
<input type=radio name=sitesearch value=""> WWW を検索<br>
<input type=radio name=sitesearch value="YOURSITE.CO.JP" checked>
YOURSITE.CO.JP を検索
</font>
</form>
<!-- SiteSearch Google -->



<!-- SiteSearch Google -->
<form method=get action="http://www.google.co.jp/search"> --- (1)
<a href="http://www.google.co.jp/">                        ----(2)
<img src="
http://www.google.com/logos/Logo_25wht.gif"     
border="0" alt="Google" align="absmiddle"></a><br>        
<input type=text name=q size=16 maxlength=255 value=""><br>  --(3)
<input type=hidden name=ie value=Shift_JIS>                 ---(4)
<input type=hidden name=oe value=Shift_JIS>
<input type=hidden name=hl value="ja">
<input type=submit name=btnG value="Google検索"><br>        --(5)
<font size=-1>
<input type=hidden name=domains value="YOURSITE.CO.JP">     --(6)
<input type=radio name=sitesearch value=""> WWW を検索<br>
<input type=radio name=sitesearch value="YOURSITE.CO.JP" checked>
YOURSITE.CO.JP を検索
</font>
</form>
<!-- SiteSearch Google -->


(1)検索フォーム
<form method=get action="http://www.google.co.jp/search">
検索結果を別ウィンドウで表示させたい場合、後ろに target="_blank"
をつけます。私は、別ウィンドウで表示させる方が好きなのでこちらを
使ってます。

<form method=get action="http://www.google.co.jp/search" target="_blank">

(2)Google のロゴ画像
<a href="http://www.google.co.jp/">
<img src="http://www.google.com/logos/Logo_25wht.gif"
border="0" alt="Google" align="absmiddle"></a><br>
画像を表示の部分です。
表示させたくなければこの部分をカットすればいいです。
ロゴ画像を差し替えることもできます。
公式ページのロゴのページを参照ください。

Google の公式ロゴのページはこちら

(3)検索入力欄
<input type=text name=q size=16 maxlength=255 value=""><br>
入力欄の幅の調整は、size=16 の部分を変更します。
<br>は改行です。ボタンをすぐ右横につけたい場合はカット

(4)文字コード設定部分
<input type=hidden name=ie value=Shift_JIS>
<input type=hidden name=oe value=Shift_JIS>

文字化けするという人は、ここが自分のブログの文字コードとあっているか
確認してみてください。

私が調べた主要ブログのコードです。
Shift_JISSeesaaBlog、ヤブログ、ドリコムブログ、ウェブリブログ
EUC-JPFC2,ライブドアブログ、gooブログ、JUGEM、はてなダイアリー、楽天ブログ、Yahooブログ
UTF-8ココログ、アメーバブログ、エキサイトブログ、Movable Type

文字コードが Shift_JIS でないブログはここを修正します。

文字コードが EUC-JP のブログ
<input type=hidden name=ie value=euc-jp>
<input type=hidden name=oe value=euc-jp>

文字コードが UTF-8 のブログ
<input type=hidden name=ie value=utf-8>
<input type=hidden name=oe value=utf-8>

(5)検索実行ボタン
<input type=submit name=btnG value="Google検索"><br>
ボタンの文言を変更する場合は、ここの文字列を修正してください。

(6)ブログ内検索設定
<input type=hidden name=domains value="YOURSITE.CO.JP">
<input type=radio name=sitesearch value=""> WWW を検索<br>
<input type=radio name=sitesearch value="YOURSITE.CO.JP" checked>
YOURSITE.CO.JP を検索

ここの3箇所を自分のブログのドメインに変更します。3つめは文言なので
適当に設定すればいいです。

<input type=hidden name=domains value="kisako3.blog33.fc2.com">
<input type=radio name=sitesearch value=""> WWW を検索<br>
<input type=radio name=sitesearch value="kisako3.blog33.fc2.com" checked>
このブログを検索

ただし、URL表示形式がFC2のようなサブドメイン形式
http://kisako3.blog33.fc2.com/
http://の次に、ユーザーIDがつくブログの場合に有効です。

ライブドアブログ無料版のようにURL の最後にユーザーIDがつく
場合は、ドメイン指定ができません。
http://blog.livedoor.jp/kisako3/

その場合は、inurl を使います。上記3行を下記の2行に書き換えます。

<input type=radio name=hq value=""> WWW を検索<br>
<input type=radio name=hq value="inurl:blog.livedoor.jp/kisako3" checked>
このブログを検索

ただ、ドメイン指定ができない場合、
Googleで検索すると、同じサイト(同一ドメイン)と判断されれば最大で2ページしか検索結果に
表示されないという仕様が適用されるように思います。
それでも、全くヒットしないよりはいいと思います。

以上、(1)~(6)の手順に従って、自分のブログに合わせて、
必要箇所を変更して、ブログでHTML自由記述欄にコードを
貼り付ければOKです。




●FC2ブログ の設定方法

共有プラグインに入ってます。
作者:pyridoxinさん
(1)ブラグインの設定→プラグインの追加(共有)→プラグインサーチで『google』
(2)Google フリー検索を追加

(3)ロゴの画像が大きいと思います。
変更したい場合は、デザインは、プラグインの設定のHTML編集で修正できます。
私の修正例はこちら。ロゴ画像を下に、検索結果を別ウィンドウにしました。

<form method="get" action="http://www.google.co.jp/search" target="_blank">
<input type="text" name="q" size="18" maxlength="255" value="" accesskey="q" tabindex="1" /><br>
<input type="hidden" name="ie" value="EUC-JP" accesskey="i" tabindex="2" />
<input type="hidden" name="oe" value="EUC-JP" accesskey="o" tabindex="3" />
<input type="hidden" name="hl" value="ja" accesskey="j" tabindex="4" />
<input type="submit" name="btnG" value="Google検索" accesskey="g" tabindex="5" /><br>
<input type="hidden" name="domains" value="<%url>" accesskey="d" tabindex="6" />
<input type="radio" name="sitesearch" value="" accesskey="w" tabindex="7" /> WWW検索<br>
<input type="radio" name="sitesearch" value="<%url>" checked="checked" accesskey="b"  tabindex="8" /> ブログ内検索<br>
<a href="http://www.google.co.jp/">
<img src="http://www.google.co.jp/logos/Logo_25wht.gif"
 alt="Google"  border = "0" longdesc="http://www.google.co.jp/logos.html" /></a>
</form>




●ライブドアブログの設定方法

ライブドア無料版の場合、Googleで検索すると、同じサイトは
最大で2ページしか検索結果に表示されないという仕様が適用
されると思いますので、全てが検索できないと思います。
それでも、全くヒットしないよりはよくて、標準のブログ内検索
よりヒット率はいいと思います。


(1)カスタマイズ/管理→プラグインの新規追加→上級者向けプラグイン→フリーエリアを追加
(2)検索コードをはりつけます。

ライブドアブログ無料版の場合
下記、1箇所、自分のユーザID に変更して貼り付けてください。

<!-- SiteSearch Google -->
<form method=get action="http://www.google.co.jp/search" target="_blank">
<a href="http://www.google.co.jp/">
<img src="http://www.google.com/logos/Logo_25wht.gif"
border="0" alt="Google" align="absmiddle"></a><br>
<input type=text name=q size=16 maxlength=255 value=""><br>
<input type=hidden name=ie value=euc-jp>
<input type=hidden name=oe value=euc-jp>
<input type=hidden name=hl value="ja">
<input type=submit name=btnG value="Google検索"><br>
<font size=-1>
<input type=radio name=hq value="inurl:blog.livedoor.jp/kisako3" checked>このブログを検索 <br>
<input type=radio name=hq value="">ウェブ全体から検索<br>
</font>
</form>
<!-- SiteSearch Google -->


ライブドアブログ有料版の場合

下記、2箇所、自分のユーザID に変更して貼り付けてください。
<!-- SiteSearch Google -->
<form method=get action="http://www.google.co.jp/search" target="_blank">
<a href="http://www.google.co.jp/">
<img src="http://www.google.com/logos/Logo_25wht.gif"
border="0" alt="Google" align="absmiddle"></a><br>
<input type=text name=q size=16 maxlength=255 value=""><br>
<input type=hidden name=ie value=euc-jp>
<input type=hidden name=oe value=euc-jp>
<input type=hidden name=hl value="ja">
<input type=submit name=btnG value="Google検索"><br>
<input type=hidden name=domains value="kisako3.livedoor.biz">
<font size=-1>
<input type=radio name=sitesearch value="kisako3.livedoor.biz" checked>このブログを検索<br>
<input type=radio name=sitesearch value="">ウェブ全体から検索<br>
</font>
</form>
<!-- SiteSearch Google -->


(3)改行設定 変換しないをチェックします。
(4)この内容で設定するをクリック
(5)プラグインの設定で、追加したフリーエリアのタイトルに『Google検索』と入れます。
(6)ブログに設定を反映(再構築)→サイドバー(プラグイン)を選択→ブログを再構築するボタンを
クリックします。



●ココログの設定方法

私はココログベーシックです。
2004年5月に1件テスト投稿しただけなので放置してたので、
ほとんど使い方は知りません。

(1)マイリスト→マイリストの新規作成で、リストのタイプ『メモ』を選択
 リストの名前を『Google検索』と入れて、リストの新規作成ボタンをクリック
(2)このリストをブログまたはプロフィールページで表示する→ブログをチェックして
  変更を保存
(3)項目を追加で
 ラベルは空欄でOK、メモに検索コードをはりつけます。
下記、2箇所、自分のユーザID に変更して貼り付けてください。

<!-- SiteSearch Google -->
<form method=get action="http://www.google.co.jp/search" target="_blank">
<a href="http://www.google.co.jp/">
<img src="http://www.google.com/logos/Logo_25wht.gif"
border="0" alt="Google" align="absmiddle"></a><br>
<input type=text name=q size=16 maxlength=255 value=""><br>
<input type=hidden name=ie value=utf-8>
<input type=hidden name=oe value=utf-8>
<input type=hidden name=hl value="ja">
<input type=submit name=btnG value="Google検索"><br>
<input type=hidden name=domains value="kisako3.cocolog-nifty.com">
<font size=-1>
<input type=radio name=sitesearch value="kisako3.cocolog-nifty.com" checked>このブログを検索<br>
<input type=radio name=sitesearch value="">ウェブ全体から検索<br>
</font>
</form>
<!-- SiteSearch Google -->



記事が役にたったら、クリックしてもらうと嬉しいです!
       
人気ブログランキングへ

コメント
非公開コメント

昨年末、まさにKisako様の恩恵にあずかりましたtsukijigoです。
新年早々、すばらしいお役立ち記事ですね。完全保存版です!
「 target="_blank"」での別窓表示は私も記事内リンクで
以前から多用していましたが、ほかにも便利で簡単なコードは
勉強したいと思います。
 
あつかましくて恐縮ですが、こういった「ブロガー向けの
お役立ちワザ」、これからも時々連載していただけると
たいへん嬉しいです♪

2007-01-02 23:01 from tsukijigo | Edit

大変な力作ですね

あけましておめでとうございます。本年もよろしくお願いします。

新年早々大変な力作ですね。特に主要ブログの文字コードまで付いていて非常に実用的ですね。意外と検索窓は標準装備されていないようで、これで助かるブロガーの方は多いと思います。
ただ、これだけの力作を掲載し続けることは、「ゆるゆると」というわけにはいかないでしょうから、ご無理なされずに。

2007-01-03 07:56 from 西新橋一時勤務

HAPPY NEW YEAR !

正月気分真っ只中、食って飲んで寝るという1年で一番素晴らしい正月を満喫中の酔っ払いです。(笑)

そんな酔っ払いが来てみたら、新年早々すごい力作の記事ではないですか!

今年もよろしくお願いします!!

2007-01-03 11:54 from マイコー

★tsukijigo さま
ココログ限定ですが、JavaScript で検索する方法も
見つけました。
追記しましたので、参考になさってください。

連載ですか(^^;;
本当はこういうテーマぐちゃぐちゃのブログには向いてないですね。
こういう解説ブログは結構あって、私もお世話になっているわけ
ですが、この件についてはあまり載ってなかったんですよ。

検索してもあまり取り上げられていないと思った場合は
また載せるかもしれません。

本年もよろしくお願いします。

★西新橋一時勤務 さま
そうそう、主要ブログの文字コード調べるの面倒でした。

まあ、この記事はお正月で見に来る人もいないだろうから
この時期に書いておこうと思ったもので、普段はやりません。
大変すぎる~。
お気遣いありがとうございます。

本年もよろしくお願いします。

★マイコーさま
マイコーさん、今年はこのブログと偽カレー姉妹のバナー作って
くれるんですよね(^^)
待ってますよ~ん。

本年もよろしくお願いします。


2007-01-03 21:12 from Kisako | Edit

こういう記事は助かりますねぇ、ホント。
また分からないことあったら、聞いちゃうよkisako様。
そんときゃぁヨロシクです(^^)ゝ

2007-01-05 09:17 from ヒロキエ | Edit

★ヒロキエさま
お役にたててよかったです。
友人のココログブロガーが早速設置したと言ってました。
ココログはコードはわかっても、設定方法がわからなくて
悩みました(^^;;
ブログによって、いろいろ違いますね。

私でお役にたてることでしたらお気軽に質問してくださいませ。

2007-01-06 11:58 from Kisako | Edit

窓つけました

こちらの記事を見ながらココログに検索窓をつけました。
丁寧な解説だったので、2分でできました。(^^)
どうもありがとうございました!

2007-01-28 21:54 from ようこ | Edit

★ようこさん
早速、「楽ぴー」「重曹」で検索しちゃいました。
お願いしてきいていただきありがとうございます。
読者として便利です(^^)

2007-01-28 22:58 from Kisako | Edit

google検索窓、設置できました。
こちらのリストのおかげで簡単でした。
ありがとうございます。

2008-09-23 20:48 from oka

★okaさん
こんにちは!
google窓設置されたんですね。
これは、1年以上前に書いた記事ですが、
これだけ書くのに手間もかかりましたので、
お役に立ててとても嬉しいです。

コメントありがとうございました。

2008-09-23 21:45 from Kisako | Edit

はじめまして

参考になりました。どうもありがとうございます。

2011-09-19 19:58 from lic | Edit

★licさん
はじめまして、コメントありがとうございました。
2007年の記事ですが、役に立ったのでしょうか?
参考になったとしたら、嬉しいです。

2011-09-19 21:27 from Kisako | Edit

トラックバック

http://kisako3.blog33.fc2.com/tb.php/605-76adc861

Copyright © ゆる~り、ゆるゆると~ All Rights Reserved.
Material by Chemical Garden+ IMG BOX!~写真素材集~
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。