[HTML]Googleカスタム検索を設置すると不要な枠線が表示される・検索ボタンの位置がずれる

Google Custom Searchで使用しているタグにCSSの定義を行うと表示が崩れます。

解説

カスタム検索ではテーブル(Table)タグを使用しており、テーブルタグに対してCSSの定義を行うとレイアウトが崩れます。 次の図はレイアウトが崩れている画面と、ページで使用しているCSSの一部です。不要な枠線が表示され、検索ボタンの垂直位置がずれています。

• レイアウトが崩れたカスタム検索
• CSS
  • 「table」に「border」を指定しているため、カスタム検索に枠線が表示されます。
  • 「line-height」の指定を行っているため、検索ボタンの位置がずれます。

  table, table td, table th {
      border: 1px #000000 solid;
  }
  line-height: 1.8;
  

対処方法

Googleカスタム検索で使用しているタグのCSS定義をリセットします。

• CSS

  テーブルタグの「border」と「line-height」の定義をリセットします。 単純にリセットするとカスタム検索以外に影響が出るため、カスタム検索を配置するDIVを作り、そのDIV内のみリセットします。

  .customSearch-area table, .customSearch-area td, .customSearch-area th {
      border: none;
      line-height: 1;
  }
  

• HTML

  サンプル内の「ここにGoogleカスタム検索のスクリプトを記述」と記した部分に、Googleより提示されたスクリプトを記述してください。 スクリプトには固有のIDが埋め込まれるため、サンプルをコピーしても動作しません。

  省略
  
  <!-- Googleカスタム検索用のDIV -->
  <div class="customSearch-area">
      <!-- ここにGoogleカスタム検索のスクリプトを記述 -->
      <script>
        (function() {
          var cx = '注意:ここには固有のIDが入ります。';
          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>
  </div>
  
  省略
  

• 改善後