Googleカスタム検索-忘備録-

投稿者: | カテゴリ Tips | 2009 年 7 月 18 日

ちょっと旅に出て行ったらカギをなくしてしまい、なかなかキテレツ荘に帰ってこれなかったでやんす、どうも韋駄天です。

仕事の中で他のサイトとかでよく見るものでも実際自分でやったことないことって無限にあると思うのですが、今回のテーマである『Googleカスタム検索の設置』があっしにとってはそうでしたので、次回以降忘れないように恒例の忘備録をつけるでやんす。


はじめに
Goolgeアカウントを持ってない人はこちらで取得してください。
そしてログイン後
http://www.google.co.jp/coop/cse/へアクセス。

step1 | Googleカスタム検索-忘備録-

上記、画面の赤枠『カスタム検索エンジンの作成』をクリック。

step2 | Googleカスタム検索-忘備録-

上記、画面のフォームを入力。今回はサイト内検索のみの設置なので[検索対象]は[選択したサイトのみ]を選択します。
[次へ]を押すと下記画面になりますのでプレビューで一度正しく検索されているかテストしましょう。

step3 | Googleカスタム検索-忘備録-

テストして問題なければ[完了]をクリック。

すると下記管理画面になりますので、検索ボックスを設置したいサイトの[コントロールパネル]をクリック。(今回はごろぐ)
このカスタム検索エンジンの基本情報を入力していきますが、[検索エンジンのエンコード]は各サイトのcharsetを確認して間違えないようにしていきましょう。検索結果で文字化けがおこります。
よければ[変更を保存]をクリック。
これでカスタム検索エンジンの設定は終わりです。

step4 | Googleカスタム検索-忘備録-

次に左カラムの[コードの取得]を押して検索ボックスを取り付けるページと検索結果を返すページを設定していきます。

step5 | Googleカスタム検索-忘備録-

上記画面上部より[検索結果のホスティング オプション]を選択してください。
今回は検索結果を返すページをひとつに固定する内容にしますので[iframe を使用して、自分のウェブサイト上で検索結果をホストする]を選択。
すると上記画面と同じようにフォーム箇所がでてきますので、検索結果を返したいページのURLを[検索結果を表示するサイトの URL を指定してください。]の枠に入力。
最後に[検索ボックス コード]ボックス内のコードを検索ボックスを設置するページすべてに記述し、[検索結果コード]ボックス内のコードを上記の[検索結果を表示するサイトの URL を指定してください。]で入力したページに記述すれば完了です。

すごく簡単です。メモる必要もなかったかなぁ

関連記事

    これに関係する記事はござーせん

Comments (4)

  1. 昨日、ちょうど会社でこの作業してたんだけど、iframeの幅がうまくいかなかった。(デフォルト?の795pxになってたかな)
    直書きのjavascriptのパラメータ変えるだけでよかったよな〜?
    結局、CSSで無理矢理修正したみたいだけどw

  2. 「Googleカスタム検索」って僕も設置したことないです。
    絶対に「Googleカスタム検索」っていう言葉入れるか自動で入りますよね~?
    仮に入れなくよくても、検索結果がグーグルっていう時点でなんかユーザー(僕自身)からすると冷めちゃうんですよね~。

    早急に検索機能をとりあえずつけて置きたいっていう場合は便利だと思います。
    オリジナルの検索作って僕に伝授してくだい(T_T)

  3. しんごちゃん>デフォ600やったと想いますよ◎
    jsいじっても変更しないですよね?ぼくもcssでiframeのwidth指定しましたw

    棟居さん>入るみたいですね、でもなんかサンプルで探したやつはついてなかったような気が。。。
    オリジナルのサイト内検索とか棟居さんやったらphpとjsですぐいけるんじゃないですか?
    ちなみにこのカスタム検索はjsでやってるんでリロードしたら消えちゃうんでぜひそこを直したやつを!

  4. >韋駄天
    検索窓を設置してるinputタグで横幅のミニマムが変わるみたい。
    広告の表示スタイルを規定してて、それで横幅のミニマムが決まるみたいで、
    デフォでvalue=”FORID:10″のところをvalue=”FORID:11″にすると、
    検索結果の上部のみに広告を表示するスタイルになるので、
    それでミニマムの幅を500くらいまで小さくできると思うよ〜

Post a comment

コメントリンクを nofollow free に設定することも出来ます。