はじめてのWordPress入門講座【基礎知識・基本的な使い方・トラブル対応】

Googleのカスタム検索エンジンで「検索」ボタンが改行される時の解消法。

検索窓を設置しているWEBサイトは多いと思います。個人のブログなどでは「Google AdSense」のカスタム検索エンジンを使っている方も多いでしょう。

このカスタム検索エンジンを設置したら「検索ボタンが改行されてしまう」とお困り方いらっしゃいませんか?

Google AdSenceで作ったソースコードを使わない

検索ボタンが改行されて検索窓の下に落ちてしまう↓の様な状態。
検索ボタンが改行されて検索窓の下に落ちてしまう

これはGoogle AdSence内の「カスタム検索エンジン」で「カスタム検索エンジン」を作って、出来たソースコードをそのまま貼ってしまうとこうなります。

Google AdSence内の「カスタム検索エンジン」

このソ−スコードは使わない

カスタム検索エンジンの表示を整えたい場合にはどうするかというと?

カスタム検索を使う

カスタム検索

Google AdSenceではなく「カスタム検索」というページでソースコードを取得します。

カスタム検索 – 検索エンジンの編集

作成したカスタム検索エンジンから選択

「カスタム検索」のページへ行くと「Google AdSense」で作成した「カスタム検索エンジン」が並んでいるはずです。そこからソースコードを取得したいものを選びます。
カスタム検索エンジンが並ぶ

選択するとカスタム検索の編集へ飛びます。今回は省きますが、カスタム検索の様々な設定ができます。
カスタム検索の設定

一応、広告(AdSense)と関連付けられていることを確認しておきましょう。
カスタム検索と広告の関連付け

デザインを選択

カスタム検索エンジンのデザインを編集します。一番簡単な方法は「テーマ」から好きなものを選びます。テーマを選ぶと右側に表示されているカスタム検索のプレビューも変わります。
カスタム検索のデザイン編集

ちなみに「レイアウト」では、検索結果の表示レイアウトを選べます。

設定が終わったらソースコードを取得

設定が完了したら、画面下の「保存してコードを取得」をクリックします。クリックするとコードが表示されるので、ここで表示されたコードをWEBサイトに貼り付けましょう。
カスタム検索のコード取得

これでカスタム検索がキレイに表示されるはずです。

検索エンジンのデザインの変更 – カスタム検索 ヘルプ

カスタム検索のデザインを変えたい!でもCSSとか分かんないよ!という人でも「カスタム検索の編集」で色を変えたりできるから便利といえば便利。

AdSenseの画面に「その他の検索オプション機能」と「カスタム検索の編集」へのリンク表示があるにはあるけど、分かりづらいよね。