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;
}
コメントをお書きください