Saba note

醜悪コード Ugly hacks ITものづくり

Googleカスタム検索エンジン

タグの設定

https://cse.google.co.jp/cse/
自分のホームページなんかにGoogleの検索機能が付けられるというものです。むかしからあるんですが、だいぶ進化したので。
まずは適当なGoogleアカウントでログインして上記URLにアクセスしてみます。

  • 検索するサイト
  • 言語
  • 検索エンジンの名前
  • 検索オプション

を入力して作成ボタンを押します。
コードが作成されるので、それを自分のHPに貼り付けます。

<script>
  (function() {
    var cx = '009503186892029741062:gpqstvi6va8';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:searchbox></gcse:searchbox>

cxが検索エンジンのIDになります。
コードを貼り付けても表示されるのにしばらく時間がかかるので、気長に待つ。デザイン関連のカスタマイズはそこからでOKです。

CSSなどでカスタマイズ

生成されるHTMタグは以下のようになっているようです。

html body header #gsearch #___gcse_0 div.gsc-control-searchbox-only-ja form.gsc-search-box table.gsc-search-box tr td.gsc-input div.gsc-input-box  table#gs_id50 tbody tr td#gs_tti50 input#gsc-i-id1

これを!importantでいろいろやってゆけばいいというわけです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です