html – 696graphic[BLOG]

googleカスタム検索のコードがjavascriptで書かれてるので、ちょっとなぁ…と思い検索したらHTMLに書き換える事が出来るようなのでメモメモ。

以下がgoogleから発行されるコード

<script>
  (function() {
    var cx = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; //←カスタム検索のID
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

(function() {

var cx = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; //←カスタム検索のID

var gcse = document.createElement('script');

gcse.type = 'text/javascript';

gcse.async = true;

gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +

'//www.google.com/cse/cse.js?cx=' + cx;

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(gcse, s);

})();

</script>

<gcse:search></gcse:search>

これをHTMLに書き換える。

<form id="cse-search-box" action="http://google.com/cse">
<input type="hidden" name="cx" value="カスタム検索のIDが入ります" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="　検索　" />
</form>
<img src="http://www.google.com/cse/images/google_custom_search_smwide.gif">

</form>

googleロゴの表示を削除することは禁止されているそうです（ですよねー）。
ですが、Googleの表示をjavascriptのコードに変更するのはOK。
ということで、

<form action="http://www.google.com/cse" id="cse-search-box">
<input type="hidden" name="cx" value="カスタム検索のIDが入ります" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" /><input type="submit" name="sa" value="　検索　" />
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=ja"></script>

</form>

参考にしたサイトはこちら。
HTML フォームを使用した検索ボックスの作成
 Google™カスタム検索の利用ガイドライン

タグ: html

DreamweaverにEmmetを入れてみたよ

IE8でfloatした画像が消えるっていう件

googleカスタム検索をHTMLに書き換える

CSSで実装するパンくずリスト

sprinkle.jsでファイルをインクルードする