【アドセンス広告のカスタマイズ】Googleカスタム検索でサイト内に検索結果をだすようにした

おすすめのオンラインプログラミング学習

アドセンスのカスタマイズ方法の覚書程度にまとめておきます。

【アドセンス広告のカスタマイズ】Googleカスタム検索でサイト内に検索結果をだすようにした

現在、PCのサイドバーに検索フォームを設置しています。

WordPressの検索フォームもありますが、サーバー負荷と考えるとGoogleにお任せした方がいいかもしません。逆にWordPressの検索がいいのは非公開の記事も検索できることです。管理の都合でたまに役立ちますが、基本カスタム検索の方が優れているような気がします。

仕様は以下のとおり。

  • アドセンスもだす。
  • 新しいページを開かずサイト内に検索結果をだす
  • アイキャッチも表示する
  • 色をあわせる
  • ロゴなども表示できます。

Googleカスタム検索の検索結果をだすようにカスタマイズ

個人的には以前に作ったことがあったため、以下で変更を加えました。

まず、Wordpressに検索結果の固定記事を作る必要があります。固定記事にそれっぽいアイキャッチ画像も設定してください。

アドセンスにログイン > 検索向け広告 > 作った広告を選ぶ(作っていなかったら作る必要があります) > 検索結果 > 自社のウェブサイト > 検索結果を表示する URL:に固定記事のアドレスを入れる

色の変更は以下のとおりです

アドセンスにログイン > 検索向け広告 > 作った広告を選ぶ(作っていなかったら作る必要があります) > スタイル > スタイルを設定します > [ カスタマイズ ]のタブ

ロゴや色の設定を決められます。

最後にコードを取得しします。2つコードが表示されるため、サイドバーのウィジェットに検索ボックスのコードを入れ、固定記事に検索結果のコードをいれるとできあがります。

アドセンスの内で完結してしまいましたが、最初にカスタム検索を作成し、後からアドセンスにも関連づける方法もあるようです(未検証)。

Googleカスタム検索は終了?

そんなキーワードがでたので一瞬びっくりしたのですが、そんなことはありません。Google Site Searchという企業向け有料サービスがなくなりましたが、カスタム検索は普通に設置できるようです。有料サービスはGoogleのロゴなしで表示できることとサポートがつくぐらいだったけど、今はカスタム検索でもロゴも表示できますし別に設定するの簡単だし意味がなくなっただけでしょう。

スポンサーリンク

電子書籍のおすすめ比較

アドセンスでレスポンシブ広告ユニット

Adsenseでレスポンシブ広告ユニットを導入しました。 わりと簡単ですし、一度、理解すると5分で導入できるため利用した方がいいなと思いました。

data-ad-format=”auto”が追加されているレスポンシブ広告ユニット

レスポンシブ広告ユニットは、通常のアドセンスのコードと比較すると、 data-ad-format=”auto”が追加されていますね。

Googleさんがもともと用意しているdata-ad-formatに使える値は、次のものです。

  • auto : 自動
  • rectangle : 長方形
  • horizontal : 横長
  • vertical : 縦長

しかし、今回はこちらの値を使うのではなく、より柔軟に対応できるstyleの指定より指定したサイズを表示します。

レスポンシブ広告ユニットのレクタングル大とレクタングル中の切り替え手順

PCやタブレットではレクタングル大(336px*280px)を表示してスマホではレクタングル中(300px*250px)を表示します。

0、まずはアドセンスの管理画面でレスポンシブ広告ユニットを作りましょう。こん時点ではサイズを気にする必要はありません。このコードをそのまま貼り付けても使えますが、値がautoになっているため横長のバナーが表示されてしまい思ったとおりのサイズになりません。

そのコードをメモ帳かなんかに貼り付けたら次にすすみましょう。

1、styleを追加。下記のpost_ad1はアドセンス広告を作成した際の任意の名前に書き換えてください。 min-widthは少しゆとりをもって、min-width:350pxでサイズが切り替わるようにしました。

<style>
.post_ad1 { width: 300px; height: 250px; }
@media (min-width:350px) { .post_ad1 { width: 336px; height: 280px; } }
</style>

下記のようにコードをアドセンスのコードの上に書きましょう。

</style>
<script アドセンスのコード

2、クラス名にpost_ad1(広告作成時の任意の名前)を追加

<ins class="adsbygoogle post_ad1"

3、元からあるdata-ad-format=”auto”の削除すればOKですね。

レスポンシブ広告ユニットの使い方(公式Google Adsenseカスタマイズマニュアル)

詳しくはアドセンスのヘルプに書いてあります。
https://support.google.com/adsense/answer/6307124?hl=ja&ref_topic=1307438#exact
https://support.google.com/adsense/answer/3543893?hl=ja&ref_topic=1307438
「非レスポンシブ型のサイトでも機能する」と書かれていたため、Wordpressのテンプレート・テーマに問わず 導入を進めた方が管理しやすいですね。わかってしまえば5分のカスタマイズですし、PCとタブレット、スマホ・モバイルなどが一元管理できるため便利だと思います。
他にも方法はあるようですが、この手のものは公式のものに沿っておいた方が問題が発生しにくいため、 この方法がよいのではないでしょうか。

レスポンシブ広告ユニットでレクタングルの中央合わせ

ちょっとだけ追記。他にもやり方はあるようですけど、中央あわせはこれでいけるようです。text-align: centerはおそらく効かないです。margin-left: auto; margin-right: auto;を追加しています。

<style>
.post_ad1 { width: 300px; height: 250px; margin-left: auto; margin-right: auto;}
@media (min-width:350px) { .post_ad1 { width: 336px; height: 280px; margin-left: auto; margin-right: auto;} }
</style>

レスポンシブ広告ユニットの収益や効果

レスポンシブ広告ユニットの効果はまあまあいい感じです。中央合わせにして特に見出しの間に表示する方法を利用するとよい効果を発揮します。

【応用編】Wordpressで記事中H2の手前にアドセンス/広告を入れるカスタマイズ全まとめ
Wordpressで記事中H2の手前のウィジェット(広告・アドセンス)をカスタマイズする方法についてまとめます。記事に広告やコンテンツバナーを入れるのですが、特定記事を除外したりカテゴリやモバイルとの切り分けなど個人的に活用しているtips...
人気記事  安いオンラインプログラミングスクールおすすめ比較
  • 無料体験あり、オンライン完結あり
  • プログラミングスクールはオンラインで格安に!
  • 電子書籍並みの価格で買える動画学習サイトも一緒に紹介!初心者から上級者向け英語コンテンツまであり。ソースコードは言語関係なしに世界共通!
スポンサーリンク
おすすめのオンラインプログラミング学習
neruをフォローする
スポンサーリンク
ebookbrain

コメント

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