ウェブサイトマスターの為の覚書きウェブサイトマスターの為の覚書きウェブサイトの運営をしていて気のついたこと、発見したことなどの記録です。コピー2017.03.07WordPressのウィジェットには自サイト内「検索ボックス」が用意されているので、簡単に自サイトに検索ボックスを設置できますが、HTMLサイトに「検索ボックス」を設置する方法をまとめました。HTMLサイトを作る際には参考にして下さい。検索エンジンの編集にアクセスします。新しく検索エンジンを作りますので[Add]をクリックします。自サイトのURL情報を入力し、[言語設定]と[検索エンジンの名前]を設定して[作成]を押します。[コードを取得]ボタンを押してこの状態の設定で先に進んでもいいですし、検索結果ページのデザインを決めてからコードを取得してもかまいません。左サイドの[検索エンジンの編集]で設定しますので、いろいろ試して下さい。コードを取得したところから話を先に進めていきます。コードは下の画像のような感じです。このコードをさっそく自サイトのhtmlファイルに入れてみます。テストサイトを作って貼ってみた結果が下の画像です。メインカラムと左サイドに貼ったものです。枠が付いていたりしておかしいですね。このようになる理由は、もともとこのサイトに設定されているCSSファイルの「table」タグの指定が反映しているからです。そこで、「table」タグの命令文を修正します。修正する方法は、htmlファイル内の検索窓コードの部分に“インライン”で「table」のプロパティを指定します。ここでは次のようなコードを作りました。メインカラムがこれです。s);})();</script><gcse:search></gcse:search></div>サイド用は[width]プロパテイの指定はしていません。s);})();</script><gcse:search></gcse:search></div>このようにしたコードにすると下の画像のようにいい感じになります。Googleカスタム検索を使わないでGoogle検索窓を設置する方法Googleカスタム検索は無料と有料がありますが、無料は「Googleのロゴ」表示が条件としてあります。広告も表示されますが、アドセンスを運用している場合はいいでしょうが、そうでない場合には、自サイトの上に他サイトが表示されます。そこでGoogleカスタム検索を使わないでGoogle検索窓を設置する方法が無いか調べてみました。