Google AJAX Search のCSS - Rogi073.Diary 2.0

1.Google AJAX Search API
さてさて、もうリリースされてからかなり経っているので、今更という気がしながらですが、最近こちらのサイトに設置をするに当たって、いろいろと試した結果の覚え書きもかねての、特にCSS関係メモです。

2.一応
これは、何かというと、自分のサイトにGoogleの検索結果を表示させることが出来るというもので、しかも、単純なサイト検索だけじゃなくて、いろいろ工夫すれば、他のGoogle Service群(Map, Web Search, blog Search, Video Search)検索にも展開できるもの。
こちらのサイトで、サンプルやマニュアル関係を見ることが出来ます。

3.サイトを登録して
サイトを登録すれば、IDがもらえるので、簡単にはじめることが可能。ある程度までの使い方なら、マニュアルを眺めているとそれなりのものが出来てくる。ちなみに、サイト検索については、サイトの指定が出来る他に、先日記事で触れたGoogle Co-op との連携も図ることが出来ます（このあたり参照）。

4.CSSが・・・
ただ、マニュアルの中でCSSに関する設定についてあまり書かれていないのが玉に瑕（もしかすると見つけキレてないだけかもしれないのですが・・・）。ただ、表示のさせ方をいろいろといじろうとすると結局、CSSをいじるしか無くなるわけで、そのあたりを少し。
とりあえず、以下のようなCSSへのリンクが基本的には必須。で、このURLの部分を解析していけば、可能な限りはいじり倒すことが出来る。

ただ、あまりに膨大で、どれがどれなのかを探すのが手間（FireFoxのエクステンションを使ったりするとちょっとは楽になりますが）ではあるのですが・・・。

5.基本的には
基本的な構成を決めているのは .gsc-control なので、全体表示サイズを変えたりとか、フォントなどなどをまとめて変えるなどの基本構成はこれで設定できる。例えば、以下のような感じ。

.gsc-control {
width:580px;
font-size:small;
padding:3px;
line-height:110%;
}

あと、検索ウィンドウを表示したくない場合があれば、以下のような感じで表示させないということも出来る。

#google_searchResults form.gsc-search-box { display : none; }

それから、タブの色彩などを変えたければ、以下で設定可能。

.gsc-tabHeader.gsc-tabhActive
.gsc-tabHeader.gsc-tabhInactive

あとは、Googleのブランドマークは、テーブルの中に納められているので、位置に関しては、以下

td.gsc-branding-text //テキスト部
td.gsc-branding-img-noclear //ロゴ部

みたいな感じでいじれそう。
DOM Inspectorでも使って、いじりたいところのidかclassを見つけていけば、かなりカスタマイズが可能な様子。結構好き放題にいけるかも。

6.ついでに
ついでなので、こちらのサイト用に作ったコードの部分を以下につけておきます。
これを"onLoad"で実行しています。

function Google_OnLoad(group) {
GSearch.getBranding(document.getElementById("google_branding"));
　　//googleロゴの表示、表示するid名を設定
var WebSearch = new GwebSearch(); //Web検索の追加
WebSearch.setUserDefinedLabel(".Search.ProgressiveRock"); //タブ名
WebSearch.setSiteRestriction("サイト設定を記載");
//Google Co-opのIDを記載もしくはサイトを限定、全サイト検索はこのコマンドを使用しない
var BlogSearch = new GblogSearch(); //blog検索の追加
BlogSearch.setUserDefinedLabel("Blog"); //タブ名
var VideoSearch = new GvideoSearch(); //Video検索の追加
VideoSearch.setUserDefinedLabel("Video"); //タブ名
var NewsSearch = new GnewsSearch(); //news検索の追加
NewsSearch.setUserDefinedLabel("News"); //タブ名
searchControl=new GSearchControl();
searchControl.addSearcher(WebSearch);
searchControl.addSearcher(BlogSearch);
searchControl.addSearcher(VideoSearch);
searchControl.addSearcher(NewsSearch);
//全ての検索要素を追加し設定
var options = new GdrawOptions();
options.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
//タブ表示を設定"DRAW_MODE_TABBED"を変更すれば、リスト表示となる
searchControl.draw(document.getElementById("google_searchResults"), options);
//検索結果を表示するid名を設定
searchControl.execute(group); //検索キーの設定、実行（ここでは変数にしている）
}