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

WEB担当者

2015年3月30日

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

2014-11-Life-of-Pix-free-stock-photos-towel-hotel-bath-duck-leeroy
Twitter 1 Facebook Google+ はてブ Pocket チャットワーク Eight Feedly

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

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

スポンサードリンク

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

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

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

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

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

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

カスタム検索を使う

カスタム検索

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

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

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

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

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

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

デザインを選択

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

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

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

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

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

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

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

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

この記事が良いと思ったらシェアしてください

Pocket

御社のターゲット像を明確にする!ペルソナ作成シート

ペルソナ作成シート

WEBマーケティングで重要なのが「相手は誰?」というターゲット像を明確にすることです。

そこでWEBサイトを訪問する人は誰?企業ブログを訪問する人は誰?SNSで繋がりたい人は誰?これらターゲット像を明確にするための「ペルソナ作成シート」を【無料】で配布しています。

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

2014-11-Life-of-Pix-free-stock-photos-towel-hotel-bath-duck-leeroy

この記事に「いいね」と思ったらフォローしてね!


この記事を読んだ方におすすめの記事

この記事を書いた人

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

コメント

  • ソーシャルメディア活用チェックシートのダウンロード
  • ペルソナ作成シートのダウンロード
  • @webmaster_note
  • Instagram

最新記事一覧

あなたにオススメの記事

ピックアップ記事一覧

カテゴリー

人気記事ランキング

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

本日の人気記事

週間の人気記事

月間の人気記事

殿堂の人気記事