ブログを移転しました。
ご迷惑をお掛けしますが、ブックマーク等の変更をお願いします。

URL:http://ikubon.com/wp/
RSS:http://feeds2.feedburner.com/ikubon

タダ(無料)でどこまでできるのか、WindowsのMac化その他もろもろ
<< RK LauncherをVISTAにインストール | main | 11月の月間ランキング >>
ブログ内検索
| WEB2.0的生活 | 2007.12.03 Monday | comments(0) | trackbacks(0) |

Google AJAX Search APIを利用して、このBlog用の検索窓を設置していたのですが、Google Coopで知らぬ間に新機能が提供されていたので、そちらを試してみました。

Codeで「overlay – requires one page, but presents results in a modal overlay」が選択できるようになっています。

設置してみたところ、検索窓のデザインは、特に変わったところはありません。

検索窓のサイズは、Google Coopで表示されるコードにあるサイズで調整。

<!-- Google CSE code begins -->
<form id="searchbox_005359406295742077552:0glzd9jblao" onsubmit="return false;">
<input type="text" name="q" size="40";/>
<input type="submit"
value="Search"/> </form>

検索結果はページに覆い被さるように表示されます

CSSファイルをGoogleのサイトから直接読み込んでくるので、検索結果の表示をカスタマイズするには必要な箇所だけ追加すればOK。
例えば、検索結果の表示幅を変更するときはこんな感じ。

<style type="text/css">
@import url(http://www.google.com/cse/api/overlay.css);
ここにCSSを追加
.cse-overlay {
text-align: left;
position: absolute;
top: 0px;
left: 0px;
padding: 10px;
width: 800px;
background-color: #FFF;
border: 1px solid #333;
font-size: small;
}
</style>

コメント
コメントする









この記事のトラックバックURL
http://blog.ikubon.com/trackback/751842
トラックバック

 RSSリーダーで購読する

CATEGORIES
Recent Comments
LINKS

あわせて読みたい

  • ブログSEO対策:track word

track feed

ARCHIVES
Related Posts with Thumbnails