今日の人気記事

  1. 管理画面にログイン・ログアウト
  2. WordPressページナビゲーションを作成するプラグインWP-PageNavi
  3. 1ページに表示する最大投稿数を変更 - posts_per_page
  4. 投稿IDとカテゴリーIDの確認
  5. ブラウザのキャッシュを活用する - PageSpeed Insights

HTMLフォームを使用したGoogleカスタム検索のデザイン変更方法

スポンサーリンク

HTMLフォームを使用したGoogleカスタム検索のデザインカスタム方法を紹介します。

WordPressサイトにGoogleカスタム検索を設置する方法はこちらを参考にしてください。
» Googleカスタム検索の設置方法

デザインがくずれる問題

Googleカスタム検索は、作成した時に取得できるJavascriptコードを設置したい場所に貼り付けるだけで、簡単に利用できます。

google-design-0
しかも、シンプルでかっこいい!

google-design-1
しかし、このようにWordPressのテーマ(CSSの設定)によっては、Googleカスタム検索ボックスのデザインがくずれる場合があります。

スポンサーリンク

HTMLフォームを使用

HTMLフォームを使用すれば、検索ボックスのデザインがくずれる心配はありません。また、サイトのテーマに合わせて自由にカスタマイズすることができます。

Googleカスタム検索のヘルプによると、以下のコードで記述すれば、HTMLフォームを使用したカスタム検索ボックスを作成できます。

<form id="cse-search-box" action="http://google.com/cse">
<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">

YOUR SEARCH ENGINE ID goes here」の部分には、カスタム検索のIDを記述すればOKです。IDは、Googleカスタム検索のJavascriptコード内に記述されています。

<script>
  (function() {
    var cx = 'YOUR SEARCH ENGINE 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:searchbox-only></gcse:searchbox-only>

Googleカスタム検索のJavascriptコードの取得については「Googleカスタム検索の設置方法」を参照してください。

google-design-2
HTMLフォームを使用した「カスタム検索ボックス」はこのようなデザインになります。検索ボックスの下にあるGoogleブランドの画像が表示されており、削除することは禁止されています。しかし、Googleブランド表示をJavascriptのコードに変更するのはOKです。コード例。

<form action="http://www.google.com/cse" id="cse-search-box">
<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-design-4
Googleブランド表示をJavascriptのコードに変更すると、このように検索ボックス内にGoogleブランドが表示されます。

以上で、HTMLフォームを使用したGoogleカスタム検索のデザイン変更の準備が整いました。あとはテーマやサイトに合わせてCSSを変更すれば、こんなデザインにも変更できます。

google-design-5
https://webkaru.net/より。

スポンサーリンク

関連記事(一部広告含む)