検索向けアドセンスコードの取得方法
検索向けアドセンスの広告コードはアドセンス管理画面から取得する方法と、「グーグルカスタム検索ボックスの作成」を使って取得する方法の2種類があります。前者は検索ボックスが固定幅だと思われます。後者は検索ボックスがレスポンシブウェブデザイン対応です。現在は広告コードはどちらも非同期です。
検索向けアドセンスコードの問題点
普通にアドセンスホームの管理画面から検索向けアドセンスコードを取得すると、検索ボックスは固定幅で同期読み込みのコードが作成されていました。現在は非同期コードになっているようです。
同期コードを使うと、1つのプログラムで読み込み処理をしたらその読み込み処理が終わるのを待って次のプログラムを実行します。
非同期コードを使うと、1つのプログラムの読み込みを始めた場合、その処理が終わるのを待たずに次のプログラムを実行できるのです。
つまり、同期コードの広告を使うと一般的に非同期コードの広告よりも処理が遅いという問題点があります。
また、検索ボックスは、大きな画面では大きく表示したいし、小さな画面では小さく表示したいものです。しかし、これが固定幅だと、画面の大きさに関係なく幅が固定となってしまいます。
このように検索ボックスが固定幅だと、レスポンシブ・ウェブデザインにはうまく対応できません。検索ボックスもレスポンシブデザインにするべきです。
検索向けアドセンスコードの取得方法
検索向けアドセンスの広告コードは、従来のアドセンスホームの管理画面から取得する方法と、「グーグルカスタム検索ボックスの作成」を使って取得する方法の2種類があります。
アドセンスの管理画面から検索向けアドセンスコードを取得する方法
アドセンスの管理画面から検索向けアドセンスコードを取得するには、アドセンスホーム画面で「広告の設定」「検索」と進んで、「カスタム検索エンジン」を作成して、普通に検索向けアドセンスコードを取得します。
これは特に難しいことはありません。検索ボックスは固定幅で同期読み込みのコードが作成されるようになっていました。
カスタム検索ボックスの作成を使ってアドセンスコードを取得する方法
検索ボックスが レスポンシブWebデザイン楽天 対応で非同期コードの検索向けアドセンスコードを作成するには、グーグルの普通の「カスタム検索ボックス」の作成から行ないます。
アドセンスアカウントでログインしたままカスタム検索ボックスのページにアクセスします。すると、画面内に今までに作成した検索向けアドセンスの検索エンジン名が表示されているはずです。
その中で、使いたい検索エンジン名を選択して、「設定」や「デザイン」などの設定を確認します。たぶん、何も変更しないでもそのまま、「保存してコードを取得」をクリックすると、次のような非同期の検索エンジンのコードを取得できます。テキストボックスの大きさの設定はありません。と、いうことは、レスポンシブにテキストボックスの大きさが変わると思われます。
<script>
(function() {
var cx = 'partner-pub-****************:**********';
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:searchbox-only></gcse:searchbox-only>
HTML5用に変更する
前記の検索コードで、次の記述はHTML5では Markup Validation Serviceでエラーとなります。
<gcse:searchbox-only></gcse:searchbox-only>
これをValidなHTMLにしてエラーを無くすには、次のようにdiv タグで記述します。
<div class="gcse-searchbox-only"></div>
参考ページ Custom Search Element Control API (HTML5)
スマホでは3pxはみ出ているので修正する
グーグルのページスピードインサイトでチェックすると、何故かスマートフォンのユーザーエクスペリエンスの項目で、横幅が3px大きく323pxになっていると表示されます。普通のパソコンでは、横スクロールバーが表示されます。
これを、問題が無くなるように、次のようにして検索コード全体をdivタグで囲んで2%縮小表示させます。
<div style="width:98%"> カスタム検索ボックスのコード </div>
検索向けアドセンスのウェブページへの設置方法
検索ボックスを直接ホームページ内へ設置しても良いのでしょうが、検索ボックスの読み込みには非同期でも時間が掛かります。めったに使わない検索ボックスは次のように別ページにするのも良いかも知れません。
私は、検索ボックスを直接ホームページ内へ設置するのではなく、広告もサイドバーも無い検索専用ページを別に作って、そのページへのリンクをホームページ内に設置しました。検索の必要がある時だけの動作になりますので、ページの表示スピードは最速となります。