はてなダイアリーにGoogleカスタム検索をつける

Etc

ヘッダとサイドバーにAdSenseのでっかいイメージ広告が出ても、自分としてはこんなもんだなということで、なんだか慣れてしまったんですが、どうなんですかね。きっとウザイんだと思いますが、ウザイついでに、Googleカスタム検索をサイドバーに付けることにします。

Googleカスタム検索

Googleカスタム検索というのはこういうやつのことです。これをサイドバーに付けてみます。

AdSenseユニット作成時のポイント

  • 『お客様のサイトのエンコード』：　日本語(EUC-JP)にします。はてなのベースがEUC-JPなので、デフォルトのShift-JISのままだと化け化けになります。

  • 『セーフサーチ』：　デフォルトはONです。ONだと検索キーワード入力欄の下に「Google セーフサーチ・有効」というリンクが出ます。ちょっとウザイのでOFFにしました。

  • 『デザイン』：　一番上のウォーターマークが格好よくていいんですが、はてなに入れる場合、この JavaScriptは入れてもらえないので、選択できません。無難なやつにしておきます。
  • 『検索結果のスタイル』：　これは検索結果が表示されるときのスタイルです。はてなに設置するときのスタイルではないので、一番無難な『Seaside』あたりを選択しておきました。ロゴは検索ボックスの左側で特に指定しないと、上の「Googleカスタム検索 BETA」というのが使われるみたいです。

  • 『検索エンジンの名前』：　ここの名前が検索キーワード入力欄の下にラジオボタンの名前として表示されます。最初は「はてなsatake7」なんていう名前にしていたのですが、そんなエンジン名が出ると、どこを対象に検索しているのか不安になってしまうので(最初、はてなダイアリー内検索じゃないかと思ったくらい)、本家にならって「日本語のページを検索」という無難な(ちょっと騙った感がありますが)名前にしておきました。

以上を設定して「送信してコードを取得」で設置用HTMLが取得できます。エンコードは別として、これらの変更は基本的に設置用HTMLに関係ないので、設置したあと、自由に変更できます。(変更が即反映されます)

はてなダイアリーへの設置

管理＞デザインでフッタのところにAdSenseの設置用HTMLをインサートします。

</div>
<div class="sidebar">
  <hatena name="calendar2" template="hatena-module">
  <hatena name="searchform" template="hatena-module">

日記内検索の下に「Googleカスタム検索」を追加します。一応、＜div＞で括っておきます。

  <div class="search_google">
    <style type="text/css">
      @import url(http://www.google.com/cse/api/branding.css);
    </style>
    <div class="cse-branding-bottom" style="background-color:#244769;color:#FFFFFF">
      <div class="cse-branding-logo" style="font-size:90%">
        <img src="http://www.google.com/images/poweredby_transparent/poweredby_FFFFFF.gif" alt="Google" />&#12459;&#12473;&#12479;&#12512;&#26908;&#32034;
      </div>
      <div class="cse-branding-form">
        <form action="http://www.google.co.jp/cse" id="cse-search-box" target="_blank">
          <div>
            <input type="hidden" name="cx" value="partner-pub-6597681985858450:hc55el-64yo" />
            <input type="hidden" name="ie" value="EUC-JP" />
            <input type="text" name="q" size="31" />
            <input type="submit" name="sa" value="&#x691c;&#x7d22;" />
          </div>
        </form>
      </div>
    </div>
  </div>

Googleが提供するスクリプトに手を加えるのは基本的にNGだと思いますが、デザイン的な親和性の部分だけは許してもらえるんじゃないかなという勝手な解釈(黙認を期待)で一部変更しています。

  • オリジナルのままだと背景が白なので、自分のページのテーマカラー(背景：#244769、文字色：白)に変更しました。
  • オリジナルはロゴと「カスタム検索」が検索窓の下にあったので、これを上にもってきて、あまり場所をとらないように上下ではなく左右に並べました(フォントサイズ：90％指定を追加)。ロゴは背景が白前提での透過なので、ちょっとみっともなくなってますが、これは仕方ないです。
  <hatena name="adsense" format="160x600" color_link="#40688f" color_url="#5df5ff" color_border="#244769" color_bg="#244769" color_text="#ffffff">
  <hatena name="section" template="hatena-module">
  <hatena name="comment" template="hatena-module">
  <hatena name="trackback" template="hatena-module">
  <hatena name="sectioncategory" template="hatena-module">
  <hatena name="counter">
</div>

ま、こんなところでいいんじゃないでしょうか。