広告

HTMLサイトに設置する検索ボックスのデザイン

WordPressのウィジェットには自サイト内「検索ボックス」が用意されているので、簡単に自サイトに検索ボックスを設置できますが、HTMLサイトに「検索ボックス」を設置する方法をまとめました。
HTMLサイトを作る際には参考にして下さい。

Googleカスタム検索の設定方法

カスタム検索 – 検索エンジンの編集にアクセスします。

検索エンジン作成

新しく検索エンジンを作りますので[Add]をクリックします。

カスタム検索

自サイトのURL情報を入力し、[言語設定]と[検索エンジンの名前]を設定して[作成]を押します。

検索エンジンコード

[コードを取得]ボタンを押してこの状態の設定で先に進んでもいいですし、検索結果ページのデザインを決めてからコードを取得してもかまいません。

コードカスタマイズ

左サイドの[検索エンジンの編集]で設定しますので、いろいろ試して下さい。

さて、コードを取得したところから話を先に進めていきます。
コードは下の画像のような感じです。

カスタム検索コード

このコードをさっそく自サイトのhtmlファイルに入れてみます。
テストサイトを作って貼ってみた結果が下の画像です。

メインカラムと左サイドに貼ったものです。

検索窓

検索窓

枠が付いていたりしておかしいですね。
このようになる理由は、もともとこのサイトに設定されているCSSファイルの「table」タグの指定が反映しているからです。

そこで、「table」タグの命令文を修正します。

修正する方法は、htmlファイル内の検索窓コードの部分に“インライン”で「table」のプロパティを指定します。

ここでは次のようなコードを作りました。
メインカラムがこれです。

<style>
.s-box1{
width: 600px;
}

.s-box1 table{
width: 100%;
margin: 0;
padding: 0;
border-top: none;
border-left: none;
}

.s-box1 th,td{
padding: 0;
border-right: none;
border-bottom: none;
}

.s-box1 th{
background-color: #eee;
font-weight: bold;
text-align: left;
}

</style>

<div class=”s-box1″>
<script>
(function() {
var cx = ‘partner-pub-○○○○○○○○:d1odba-2h3m’;
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>

サイド用は[width]プロパテイの指定はしていません。

<style>
.s-box2 table{
width: 100%;
margin: 0;
padding: 0;
border-top: none;
border-left: none;
}

.s-box2 th,td{
padding: 0;
border-right: none;
border-bottom: none;
}

.s-box2 th{
background-color: #eee;
font-weight: bold;
text-align: left;
}

</style>

<div class=”s-box2″>
<script>
(function() {
var cx = ‘partner-pub-○○○○○○○○:d1odba-2h3m’;
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>

このようにしたコードにすると下の画像のようにいい感じになります。

検索窓

検索窓

Googleカスタム検索を使わないでGoogle検索窓を設置する方法

Googleカスタム検索は無料と有料がありますが、無料は「Googleのロゴ」表示が条件としてあります。
広告も表示されますが、アドセンスを運用している場合はいいでしょうが、そうでない場合には、自サイトの上に他サイトが表示されます。
そこでGoogleカスタム検索を使わないでGoogle検索窓を設置する方法が無いか調べてみました。

あるんですね。
コードは以下です。

<form method=”get” action=”https://www.google.co.jp/search” target=”_blank”>
<input type=”text” name=”q” width=”200″ value=””>
<input type=”submit” name=”btng” value=”検索”>
<input type=”hidden” name=”hl” value=”ja”>
<input type=”hidden” name=”sitesearch” value=”○○○.com“>

value=”○○○.com

の部分は自サイトのドメインを記入します。

これで、サイト内検索をGoogle検索で出来るようになります。

広告

シェアする

  • このエントリーをはてなブックマークに追加

フォローする