+ Tumblelog内検索をGoogleカスタム検索に移行してみた

chips-tips:

Tumblrのブログ内検索を＜Google カスタム検索＞にしてみました。
色々テストしてみて経験から持ってたイメージよりも良かったのがちょっと驚き。

     

で、これの設置に存外手間取ってしまったので自分用兼ねて備忘録。
実際にTumblrにGoogle カスタム検索を設置した手順と、検索欄のカスタマイズについてです。

【目次】

1. Google カスタム検索の作成
2. 検索結果ページのデザイン設定
3. TumblrにGoogle カスタム検索を設置＆検索欄のカスタマイズ

1．Google カスタム検索の作成

1.) Googleアカウントを持っていればすぐに利用が可能です。
＜Google カスタム検索＞へアクセス、「カスタム検索エンジンの作成」から新規作成に入ります。

     


2.) ページ移動したら「1.検索エンジンの設定」の各項目を埋めていきます。

     

• 名前：適当になんでもどうぞ
• 説明：空白でも可
• 言語：日本語を選択
• 検索するサイト：Googleカスタム検索を設置するTumblelogのURLを入れます。
• エディション：問答無用で無料を選択

3.) 「利用規約に同意」へチェックを入れたら次へ。検索結果の表示スタイルを選択します。

     



4.) スタイルを決定して次へ進むと、コードが発行されると同時に検索エンジンの作成が完了。
コントロールパネルで検索エンジンの細かい設定やカスタマイズなどをするので、コードの取得はせずに次へいきます。

     

2．検索結果ページのデザイン設定

項目１ではコードの取得をしなかったわけですが、コントロールパネル⇒コードの取得からいつでもゲットできるので
その辺頭に入れつつ設定と調整。

     


ここではこのブログで設定した手順をそのまま追っていきます。


1.) マイ検索エンジンのコントロールパネル⇒デザインを開き、レイアウトの選択で「Google がホスト」を選択。
結果を表示する場所は「現在のウィンドウ」にしました。

     


2.) 続いて「スタイルの選択/カスタマイズ」で検索結果のデザインを選択。
いくつかデザイン設定用のタブが表示されるので、右端の「ロゴ」のタブを開きます。
この「ロゴのURL」へ表示させたい画像のURLを記入。

• 参考：Upload a static file | Tumblr

     

ロゴの高さは「100」ピクセルに設定。この高さを基準に画像がリサイズされます。

• ※デフォルトでは100、となってましたが設定しないとうまく表示できなかったので…

3.) 「ロゴのリンク」にはブログのURLを入れて、ロゴクリックで検索結果ページからブログトップへ戻れるようにします。
そんな感じで設定し終えたら「保存」。
ここまでで大体以下のような検索結果ページができました。

     

3．TumblrにGoogle カスタム検索を設置＆検索欄のカスタマイズ

検索結果ページのデザインを決めたら、「コードの取得」から発行されたコードをTumblrのテーマHTMLへ貼り付け。
サイドバーに設置するために付け足ししてますが、大体初期状態は↓のような感じだと思います。
3～16行目が管理ページで取得したコードです。

<div class="side last">
<h3>Search</h3>
<div id="cse-search-form" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript"> 
  google.load('search', '1', {language : 'ja'});
  google.setOnLoadCallback(function() {
    var customSearchOptions = {};  var customSearchControl = new google.search.CustomSearchControl(
      '***************:******', customSearchOptions);
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var options = new google.search.DrawOptions();
    options.enableSearchboxOnly("http://www.google.com/cse?cx=***************:******");
    customSearchControl.draw('cse-search-form', options);
  }, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />
</div>

スタイルによると思いますが16行目～のCSSを取っ払って、検索欄のデザインをいじります。


このカスタマイズにあたって、＜LIQUID DESIGN BLOG＞さんの
Google カスタム検索の検索ボックスを、CSSだけでデザイン変更する方法という記事から、CSSを参考＆お借りしました。

そんなわけで以下が現在設置中の検索欄のCSSです。

     

/*--------------------------------------
GOOGLE CUSTOM SEARCH
---------------------------------------*/
#cse-search-form {
    width: 200px !important
}
#cse-search-form table.gsc-search-box td.gsc-input {
    padding: 0 !important
}
#cse-search-form input.gsc-input[type="text"] {
    width: 150px;
    font-size: 13px;
    border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    -webkit-border-radius: 5px 0 0 5px;
    -webkit-appearance: none;
}
#cse-search-form input.gsc-search-button[type="submit"] {
    margin-left: 0 !important;
    background-color: #333333;
    border: 1px solid #333333;
    color: #FFFFFF;
    font-family: 'Century Gothic', Verdana, sans-serif;
    height: 26px;
    width: 30px;
    min-width: 40px;
    border-radius: 0 5px 5px 0;
    -moz-border-radius: 0 5px 5px 0;
    -webkit-border-radius: 0 5px 5px 0;
    -webkit-appearance: none;
}

この検索欄に限ったことじゃない上に個人的なやり方なんですが、
px単位の細かい調整はFirebugで照らし合わせながらじわじわとやってます。

最後に設置した検索欄の簡単な分解図。水色(と紫)でハイライトされてるところが画像下のCSS該当部分です。

【検索ボックス】

     

#cse-search-form table.gsc-search-box td.gsc-input {
    padding: 0 !important
}

     

#cse-search-form input.gsc-input[type="text"] {
    width: 150px;
    font-size: 13px;
    border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    -webkit-border-radius: 5px 0 0 5px;
    -webkit-appearance: none;
}

【検索ボタン部分】

     
     

#cse-search-form input.gsc-search-button[type="submit"] {
    margin-left: 0 !important;
    background-color: #333333;
    border: 1px solid #333333;
    color: #FFFFFF;
    font-family: 'Century Gothic', Verdana, sans-serif;
    height: 26px;
    width: 30px;
    min-width: 40px;
    border-radius: 0 5px 5px 0;
    -moz-border-radius: 0 5px 5px 0;
    -webkit-border-radius: 0 5px 5px 0;
    -webkit-appearance: none;
}

【クリアボタン部分】

     




あと「Google カスタム検索」のロゴは公式の規約（第 2.3 条 帰属）により表示必須なので、ひとまずここまで。
その内検索ボタン部分をアイコンに変えてみたいので、実装したらまたメモしようと思います。


自分用まとめと復習兼ねて、Google カスタム検索についての備忘録でした。



参考サイトさん

• WordPressのサイト内検索にGoogleのカスタム検索を使う方法 | SEOテンプレート比較
• Google カスタム検索の検索ボックスの見た目を独自デザインに変更する « kwLog

(via syoichi)