2014年

3月

12日

Googleのカスタム検索設置

Jimdoには、サイト内検索の機能がありません。

なので、Googleのカスタム検索を導入することにしたのですが、これがなかなか一筋縄ではいかず・・。

多分、今後も利用すると思うので、メモ程度に記します。

 

コードはV1を取得せよ

Googleのカスタム検索コンパネで、一通りの設定(デザイン設定を含む)をしたのち、「コードを取得」。

 

このとき出てくるコードだと、Jimdoに貼り付けても、保存後にスクリプトの一部が欠損してしまい、うまくいきません。

 

なので、V1コードの方を取得します。

コードの画面の下の方に、「高度な機能を使用する場合は、代わりに V1コードを取得します。」とあるので、そこをクリック。

出てきたコードを使います(かなり長いです)。

 

コードは要素ごとに分けて設置

取得したV1コードは、3つの要素から成り立っています。

なので、要素ごとに3箇所に分けて貼り付けていきます。
 

1つ目は、実際の検索ウィンドウ部分。これは最初の1行ですね。

設置したい場所(html内)にペースト。

<div id="cse" >Loading</div>

(お好みで、style='width: 100%;'は消します)

 

 

2つ目は、script部分。

これはヘッダー部にペースト。

 

<script src='//www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
google.load ・・・(中略)
</script>

 

 

3つ目は、スタイルシートの部分。

そのまま貼り付けるなら、同じくヘッダー部でよいでしょう。

ヘッダーがダラダラ長くて見苦しいと思う場合は、少し手を加えて、自分のcssの中に入れてしまうという手もあります(後述)。

 

<style type='text/css'>
  .gsc-control-cse {
・・・(中略)

  }
</style>

 

 

これで、多分、動くはず。

 

最後に、スタイルの微調整を行って見た目を整えるとよいでしょう。

 

スタイルの最終調整は・・

htmlに貼り付けたコードには、id="cse"が付くので、これを利用してスタイルの調整をします。

 

つまり、#cseをあたまにつけて、自分のcssの中に入れちゃう!!

たとえばこんな感じ。
#cse .gsc-control-cse {
    padding:0;
    }

 

 

 



このページのトップへ