WEBマスターの手帳 > WEB担当者 > Googleのカスタム検索エンジンで「検索」ボタンが改行される時の解消法。

2015年3月30日

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

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

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



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

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

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

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

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

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

カスタム検索を使う

カスタム検索

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

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

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

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

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

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

デザインを選択

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

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

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

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

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

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

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

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

関連用語: ,

この記事をシェアして頂けると嬉しいです


Webサイトのターゲット像を明確にする【ペルソナ作成シート】

ペルソナ作成シート

あなたのWebマーケティングをよりレベルアップさせよう!

Webサイトや企業ブログ、SNSであなたが相手にするのはどんな人か?それを明確にするための「ペルソナ作成シート」を無料でプレゼントいたします。

WEBマスターの手帳をフォローして最新情報をゲットしよう!

あなたにオススメする記事

この記事と同じカテゴリーの記事

この記事を書いた人

遠藤 聡
中小企業のWEB担当者&ソーシャルメディア担当者としてWEBサイトの管理運用から企業ブログ、Facebookページ、Twitter、YouTubeチャンネルの管理運用(企画&実施)を行なっております。 具体的なサービス内容はサービス詳細ページをご覧ください。

コメント

最新記事一覧

カテゴリー

ピックアップ記事一覧

人気記事ランキング

  • 本日
  • 週間
  • 月間
  • 殿堂

本日の人気記事

週間の人気記事

月間の人気記事

殿堂の人気記事