- カスタム検索 – 検索エンジンの編集
- 「検索するサイト」はご自分のサイトURL
- 「言語」を選択
- 「検索エンジンの名前」はサイト名で良いと思います
- 作成ボタンをクリック。
「コードを取得」をクリック。
コードが表示されました。
「YOUR SEARCH ENGINE ID goes here」の部分を「検索エンジン ID」に置き換えて、ウィジェットなどに貼りつけて好きな場所に表示させます。
(function() {
var cx = ‘YOUR SEARCH ENGINE ID goes here‘;
var gcse = document.createElement(‘script’);
gcse.type = ‘text/javascript’;
gcse.async = true;
gcse.src = ‘https://cse.google.com/cse.js?cx=’ + cx;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
検索エンジン IDは「設定」に記載されています。
「デザイン」画面からレイアウトやフォントの色などを変えることができます。
変更したら右下の「保存してコードを取得」をクリックします。
ただし、このままですと読み込みに時間がかかりますのでカスタマイズします。
HTMLフォームを使用する
HTMLフォームのコードを使用して検索ボックスを実装します。
<input type=”hidden” name=”cx” value=”YOUR SEARCH ENGINE ID goes here” />
<input type=”hidden” name=”ie” value=”UTF-8″ />
<input type=”text” name=”q” size=”31″ />
<input type=”submit” name=”sa” value=”Search” />
</form>
<img src=”http://www.google.com/cse/images/google_custom_search_smwide.gif”>
こんな風に表示されました（テーマにより多少異なります）。
Javaスクリプトを使用する
フォームの下にあるGoogleのアイコン画像を、Javaスクリプトのコードに変更して、枠内に収めます。
<input type=”hidden” name=”cx” value=”YOUR SEARCH ENGINE ID goes here” />
<input type=”hidden” name=”ie” value=”UTF-8″ />
<input type=”text” name=”q” size=”31″ />
<input type=”submit” name=”sa” value=”Search” />
</form>
<script type=”text/javascript” src=”//www.google.com/cse/brand?form=cse-search-box&lang=ja”></script>
「Googleカスタム検索」の画像は枠内に入りましたが、上下の間隔が狭くなってしまいました。
サイトをSSL可している場合
このままだとエラーになります。
「このサイトへの接続は完全には保護されていません」
httpの後に[s]をつけて[https]に直します。
AMPは未解決
はあ…またエラー…
AMPはいつもいつもなんでこうも複雑なのか。何かを導入すると大概AMPでつまずいて相当な時間を取られます。そろそろ苦痛になってきました。
こういうことらしいです。Search Console
F12キーのデベロッパーツールにはこんな風に書かれてありました。
GoogleのAMPテストだと問題なかったのですが。
モバイルで確認すると画像が伸びていました。なにこれ。
その後も少しいじくったのですが、エラー表示。
血迷って「安全でないスクリプトを読み込む」をクリックしたら、
（サイトが）「保護されていない」などと表示されてしまい、気分が沈没。
一旦AMPのカスタム検索ボックスは中止。
また今度…
