Google AdSenseから検索フォームを作成してみる

アフィリエイト目的でGoogle AdSenseに登録したのですが広告設定の横にサーチ設定のタグを発見。

折角の機能なので自分のサイトにも付けてみました。
その時の流れを覚書序にご紹介。

Google AdSenseで初期コード取得

  1. 先ずはGoogle AdSenseにログインします。
  2. “サーチ設定”のタグをクリックするとカスタマイズ画面に入ります。
  3. “スタイル”を選択します。
  4. 適当なパレット名称を付けて”保存してコードを取得”ボタンを押します。
  5. “サーチ設定”の画面に戻りますので必要な項目に入力します。
  6. 画面最下層に生成コードが出ますのでエディタ等に退避します。

検索結果部分については文字コードと画面出力ウィンドウの設定のみで良いと思います(検索結果画面はここで設定しません)。

エディタでガリガリ修正

作成されたコードについては好みがあると思います。
私の場合はこの様な感じに修正してみました(要はテーブルが嫌いなだけヽ(´ー`)ノ)。

<!-- SiteSearch Google -->
<form method="get" action="http://www.google.com/custom" target="google_window">
<p><a href="http://www.google.com/">
<img src="http://www.google.com/logos/Logo_25wht.gif" alt="Google" width="75" height="32" /></a><br />
<input type="hidden" name="domains" value="cefa.sakura.ne.jp" />
<input tabindex="500" accesskey="4" type="text" name="q" size="15" maxlength="255" value="検索文字列" />
<input tabindex="501" accesskey="f" type="submit" name="sa" value="検索" /><br />
<input tabindex="502" accesskey="g" class="radio" type="radio" name="sitesearch" value="" checked="checked" /> Web 
<input tabindex="503" accesskey="l" class="radio" type="radio" name="sitesearch" value="cefa.sakura.ne.jp" /> CEFA::Blog
<input type="hidden" name="client" value="pub-xxxxxxxxxxxxxxxx" />
<input type="hidden" name="forid" value="1" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="hidden" name="oe" value="UTF-8" />
<input type="hidden" name="cof" value="GALT: #008000; GL:1; DIV:#336699; VLC:663399; AH:center; BGC:FFFFFF; LBGC:336699; ALC:0000FF; LC:0000FF; T:000000; GFNT:0000FF; GIMP:0000FF; FORID:1;"></input>
<input type="hidden" name="hl" value="ja"></input>
<input type="hidden" name="hl" value="ja" />
</p>
</form>
<!-- SiteSearch Google -->

簡単に解説するとtable要素は全て取っ払いWAIに従って属性追加をした感じです。
form要素の中はp要素で纏めてみました。

検索結果画面のカスタマイズ

Google AdSenseから設定される画面で構わない方は必要ない項目です。

折角のオリジナル検索画面ですから格好良くしたいものです。
そこで東京ホットスポット情報館様の記事を参考にCustomizable Google Free Searchから検索結果画面のカスタマイズをしてみます。

指示通りに項目を埋めて行くとコード生成が完了しますのでそのコードの中からname属性値が”cof”の部分を抜粋します。

<INPUT type=hidden name=cof VALUE="GALT:#006400;S:http://cefa.sakura.ne.jp/; VLC:#cd5c5c; AH:left; BGC:#ffffff; LH:31; LC:#4682b4; GFNT:#006400; L:http://cefa.sakura.ne.jp/pixmaps/cefabanner01.png; ALC:#cd5c5c; LW:88; T:#000000; AWFID:cbb35ac199d17afb;">

同じ属性値の部分を置き換えてしまえば完了です。
因みに私の場合は要素と属性が大文字になっていたので小文字に変換しinput要素が開いていたので閉じるような修正をしました。

細工は流々後は仕上げ

最後に作成したコードを仕込みたい部分へ差し込むと完成です。
普段のGoogle検索に自分のバナーが入っていると少し嬉しくなりますよね。

注意

今回の掲載コードについてname属性値cofの一文についてですが、value属性値が長すぎる為画面が崩れてしまいました。
セミコロンの後に便宜上スペースを入れていますが、本来は全て繋げて書く必要があります。

追記 2004年11月18日

マークアップポリシーの自己定義によりコード部分のマークアップを変更しました。

追記 2005年1月28日

The Google AdSense Team殿より規約確認を実施する旨メールを受けておりますので現在修正を行い指示を待っています。このエントリに関しては各自責任を持って参考としてください。