【デザイン】アドセンスの検索向け広告のスタイルのうち、変更したのはボタンの色ぐらい

その他 インターネット
この記事は約4分で読めます。

ブログを収益化(マネタイズ)するため、Google AdSense(グーグル・アドセンス)の広告の設定をしています。

Googleカスタム検索(検索向け広告)の設置と CSS による調整が済みました。
つぎは、レイアウト、テーマ、ボタンや枠線の色などのスタイルを変更してみます。

スポンサーリンク

カスタム検索エンジンのスタイルの変更

Google AdSense(グーグル・アドセンス)で、次のようにして、すでに作成済みのカスタム検索エンジンのスタイルを変更しました。

既存のカスタム検索エンジンの選択

まずは、すでに作成済みのカスタム検索エンジンを選択して開きました。

既存のカスタム検索エンジン

作業手順:

  1. メニュー > 広告の設定 > 検索 > カスタム検索エンジン へと移動
  2. 一覧の中から、スタイルを変更したいカスタム検索エンジンをクリック

カスタム検索エンジンのスタイルを開く

つぎに、選択したカスタム検索エンジンのスタイルを開きました。

既存のカスタム検索エンジンのスタイル

作業手順:

  1. 「+スタイル」をクリック
  2. 「スタイルを設定します」をクリック

カスタム検索のデザイン

新しくカスタム検索エンジンのデザイン変更用の画面が開きました。
ここでは、「スタイル」のことを「デザイン」と呼んでいます。

カスタム検索エンジンのデザイン変更

上に並んでいるタブ「レイアウト」「テーマ」「カスタマイズ」「サムネイル」の中から、デザインを変更したいタブをクリックして、表示された画面で変更します。

なお、すでに「検索ボックスのコード」の貼り付けが済んでいる場合には、たとえ「デザイン」を変更したとしても、もう一度、コードの貼り付けをする必要はありません。

「保存」ボタンをクリックするだけで、デザインの変更が済みます。

レイアウト(検索結果画面)

カスタム検索エンジンのレイアウトを変更できます。
レイアウトを変更すると、カスタム検索の検索結果の画面配置が変わります。

カスタム検索エンジンのレイアウト

作業手順:

  1. 変えたいレイアウトの画像をクリック

デザインの変更を終える場合には、「保存」ボタンをクリックします。

テーマ(検索結果)

カスタム検索エンジンのテーマを変更できます。
テーマを変更すると、カスタム検索の検索結果の色使いと項目の並び順が変わります。

カスタム検索エンジンのテーマ

作業手順:

  1. 変えたいテーマの画像をクリック

デザインの変更を終わる場合には、「保存」ボタンをクリックします。

カスタマイズ(検索ボックス)

カスタム検索エンジンのデザインをカスタマイズできます。
カスタマイズすると、設置されたカスタム検索の検索ボックス(入力欄)や検索ボタンなどの見た目が変わります。

カスタム検索エンジンのカスタマイズ

デザインをカスタマイズできる項目:

  • 全般 ………………………… 全体のフォント、背景の枠線の色と背景の色の変更
  • ロゴ ………………………… 検索結果の一番上に表示されるロゴ画像とリンク先の指定
  • 検索ボックス ……………… 検索ボックスの枠線の色の変更
  • 検索ボタン ………………… 検索ボタンの枠線の色、背景の色と虫眼鏡の色の変更
  • Google ブランド表示  …… 検索ボックスの中に「Google カスタム検索」と表示するかどうかの選択
  • 検索結果○○ ……………… 検索結果の色の変更
  • プロモーション○○ ……… プロモーションの色の変更

デザインの変更を終わる場合には、「保存」ボタンをクリックします。

デザインをおそろいに

検索ボックスと検索ボタンのデザインを、設置先のサイトのデザインとそろえました。

サムネイル(検索結果)

カスタム検索エンジンのサムネイル画像の表示を変更できます。
サムネイル画像の表示を変更すると、カスタム検索の検索結果にサムネイル画像を表示するかどうかが変わります。

カスタム検索エンジンのサムネイル

作業手順:

  1. トグルボタンをクリックすると、「オン(表示)」と「オフ(非表示)」が切り替わり、自動的に保存もされます。

あとがき

検索窓(赤)

結局、変更したのは、検索ボックスと検索ボタンのデザインぐらいでした。
それだけ、元のデザインがカッコいいということなのでしょうね。

そういえば、スタイル(デザイン)の変更が終わったあと、アドセンス関連のウィンドウ(タブ)が2つになっているのは、どうしたらいいのでしょうか?

スタイル(デザイン)の変更を始めるときに、新しいウィンドウ(タブ)が開くのですが、「保存」ボタンを押しても、自動では閉じてくれないのです。

コメント

タイトルとURLをコピーしました