オミクロン株ワクチン副反応のため、お休み中

【収益化】アドセンスの検索向け広告をHTML&CSSで設定しました

ホームページ
2018.05.25
この記事は約6分で読めます。

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

今回は、事務所のホームページに Googleカスタム検索（検索向け広告）を設置してみることにしました。

まずは、CSSファイルを修正

Google（グーグル）のカスタム検索（JavaScript版）の中では、スタイルを整えるために、次のような HTMLのタグを使用しています。

  • 大量の tableタグ、trタグ、tdタグ
  • 大量の divタグ
  • formタグ、inputタグ、buttonタグと spanタグ
ゲーム画面の表示が崩れる

これらのタグに直接、スタイルを設定していると、カスタム検索（JavaScript版）の表示が崩れることがあります。

スタイルの設定を確認

CSSファイルの中で、関係しそうなところを見てみると、次のようになっていました。

table {
  border-spacing: 0;
  border-collapse: collapse;
}

button, input, select, textarea {
  /* 一部のブラウザで継承させるため */
  font-size: 100%;
  font-family: inherit;
}

この場合、問題ありそうなのは、tableタグのスタイル設定です。

スタイルの設定をクラスに割り当てる

ということで、そのスタイルを次のようにクラスに割り当てました（クラス名は任意です）。

.theme-table {
  border-spacing: 0;
  border-collapse: collapse;
}

なお、もし inputタグや buttonタグにスタイルが設定してあった場合は、同じようにしてクラス経由でスタイルを割り当てる必要があります 。

スタイルが設定されたクラスをtableタグに追加

そして、HTMLファイルの中のすべての tableタグに、theme-tableクラスを追加しました。

<table class="theme-table">
  <tr>
    <th>見出し1</th><td>内容1</td>
  </tr>
  <tr>
    <th>見出し2</th><td>内容2</td>
  </tr>
</table>

なお、もし inputタグや buttonタグにスタイルが設定してあった場合は、同じようにしてクラス経由でスタイルを割り当てる必要があります 。

これで、カスタム検索（JavaScript版）のスタイルに影響を与える設定がなくなりました。

つぎに、カスタム検索エンジンを作成

Google AdSense（グーグル・アドセンス）で、次のようにして、カスタム検索エンジンを作成しました。

検索向け広告は、すでにはじめているものとします。

サイトに検索エンジンを追加する - Google AdSense ヘルプ
Google の検索エンジンをサイトに追加すると、検索結果に広告を掲載することができます。検索エンジンを追加するには、まず AdSense アカウントで検
support.google.com

新しいカスタム検索エンジンの作成

まずは、新しいカスタム検索エンジンの作成を始めました。

新しいカスタム検索エンジン

作業手順：

  1. メニュー > 広告の設定 > 検索 > カスタム検索エンジン へと移動
  2. 「＋新しいカスタム検索エンジン」をクリック

名前と検索の対象を指定

つぎに、カスタム検索エンジンの必要最低限の設定をしました。

新しいカスタム検索エンジンの名前と検索対象の指定

作業手順：

  1. 名前には、あとで見て分かるような名前を指定
  2. 検索の対象には、「選択するサイトのみ」を選択
  3. 新しく表示された領域に、検索するウェブサイトを指定
  4. 国または地域には、「日本」を選択
  5. サイトの言語には、「日本語」を指定
  6. 「＋検索結果」をクリック

保存してコードを生成

つづけて、カスタム検索エンジンの設定を保存してコードを生成しました。

新しいカスタム検索エンジンの検索結果の指定

作業手順：

  1. 検索結果として、結果を表示に「新しいウィンドウの Google ページに表示」を選択
  2. 「保存してコードを取得」ボタンをクリック

生成されたコードをコピー

生成された検索ボックスのコード（JavaScript版）をコピーしました。

検索ボックスのコード

作業手順：

  1. 表示された「検索ボックスのコード」ウィンドウで、検索ボックスのコードをすべて選択してコピー

結果として、検索ボックスのコード（JavaScript版）が、コピーされました。

最後に、検索ボックスのコードを貼り付け

HTMLファイルの中で、カスタム検索を設置したい場所に、検索ボックスのコード（JavaScript版）を貼り付けました。

<div class="search">
  <script>
    (function() {
      var cx = 'partner-pub-XXXXXXXXXXXXXXXX:XXXXXXXXXX';
      var gcse = document.createElement('script');
      gcse.type = 'text/javascript';
      gcse.async = true;
      gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(gcse, s);
    })();
  </script>
  <gcse:searchbox-only></gcse:searchbox-only>
</div>

しかし最後のコード（<gcse:searchbox-only></gcse:searchbox-only>）は、HTMLの通常の記述ではありません。

この記述に対して、ボクが使っているエディタ（Brackets）が警告を出してきました。

<div class="search">
  <script>
  ～
  </script>
  <div class="gcse-searchbox-only"></div>
</div>

ということで、最後のコードを上のように置き換えて、警告を回避しました。

Programmable Search Element Control API  |  Programmable Search Engine  |  Google Developers
developers.google.com

スタイルの変更

最後に、事務所のホームページに馴染むように、カスタム検索のスタイルを変更しました。

カスタム検索エンジンのスタイルの変更は、検索ボックスのコード（JavaScript版）に、影響を与えませんので、再度コードを貼り付ける必要はありません。

事務所サイトにカスタム検索を設置
事務所サイトにカスタム検索を設置

とりあえず、これで様子見です。

【デザイン】アドセンスの検索向け広告のスタイルのうち、変更したのはボタンの色ぐらい
ブログを収益化（マネタイズ）するため、Google AdSense（グーグル・アドセンス）の広告の設定をしています。Googleカスタム検索（検索向け広告）の設置と CSS による調整が済み...
blog.yanokou.com
2018.05.16

あとがき

福助人形

自分のサイトに、比較的簡単に検索機能を付けられるのは、ありがたいことです。
Google に感謝です。

ただ、うまく CSS を定義しないと、簡単に Google カスタム検索の表示が崩れてしまうのは、考えものです。

将来的に何かうまい解決策が見つからないでしょうかね。

コメント

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