「サイト内リアルタイム検索」の設置方法

リアルタイムにサイト内検索ができるものをサイドバーに設置しました。

テキストボックスに検索するキーワードを入力するとコンテンツエリアにリアルタイムで結果が表示されます。

設置方法は、Hiromitz @ Jimdo ブログさんのコチラのページで教えていただきました。

サイドバーで「ウィジェット」を選択し、下記のコードを貼り付けるだけというのでやってみました。

<script src="http://open-lab.jp/jimdo/instant.js" type="text/javascript">

</script>

仕組みは皆目見当がつきませんが、いとも簡単に出来るものでビックリしました。

但し、一点不満な点が見つかりました。

Hiromitz さんご自身も『多少結果までのレスポンスが遅いかもしれませんが、』と書かれている通り、最新の記事が検索にヒットするには多少の時間がかかります。

でも、これは致し方ないのでしょうね。

追記【2014年4月23日】

関連して、大事なことなので、追記という形で書き加えることにしました。

大事なことというのは、枠の幅指定のことです。

編集画面で右側に出る歯車マーク（設定）をクリックし、その後、開いた「設定」一覧の中、「ウェブサイト」段にある「ヘッダー部分を編集」をクリックし、開いた枠に次の内容を貼り付けます。

※その後、「保存」を押すことを忘れずに。

<style type="text/css">

<!--

#jimdosearch input{

width: 194px;

}

-->

</style>

すると、枠の幅が194になるというわけです。

プレビュー画面にしてみると確認できます。

もう一度開いてみると、あらあらナント不思議なことに、赤色の文字の部分が買ってに書き加えられています。（実際の文字は黒色です。）

<style type="text/css">

/*<![CDATA[*/

<!--

#jimdosearch input{

width: 194px;

}

-->

/*]]>*/

</style>

でもご安心。

こうなることで、きちんと指定した通りになるのです。

枠の幅を変えたい場合には、緑色の数字を変えれば、広くも狭くも出来ます。