アドセンスの自動広告は非常に便利ですが、記事の中でいろいろな個所に表示されると、読み手から見て分かりづらくない？ということで、広告ラベル（「スポンサーリンク」や「広告」といったラベル）を貼って本文とは明らかに区別したい、と思う場合があります。
広告コードを取得してプラグインなどを使って広告を挿入する、という場合には、自分で広告ラベルを付けられるんですが、自動広告の場合は、まさに自動で配信されるため、広告ラベルを自分でつける、ということができません。
ということで、ここではCSSを使って広告ラベルを付ける方法をご紹介です。
Contents
広告ラベルの基礎知識
まずGoogle広告（アドセンスの広告）について、広告ラベルとはどういった位置づけかはしっかり押さえておきましょう。その上で、広告ラベルを表示するしないを決めればよいですね。
アドセンスの広告に対する広告ラベルは以下のようになってます。
- アドセンスポリシーの関連情報
- 広告のラベル表示
- 「広告」と「スポンサーリンク」のいずれかのラベルを表示できる
- 広告のプレースメントに関するポリシー
- Google広告のラベルは「広告」または「スポンサーリンク」のみを使用する
- 広告の配置に関するヒント
- 広告ユニットは、「広告」または「スポンサーリンク」としてのみラベルを付けることができる
- AdSense ポリシーに関するよくある質問
- 広告上部のラベルとして許可されるのは、「スポンサーリンク」または「広告」のみ
- 広告のラベル表示
若干分かりづらいですが、つまりグーグル広告につけるラベルは以下になりますね。
- 広告のラベルは付けても付けなくても良い
- 広告のラベルを付ける場合、「広告」と「スポンサーリンク」のみ許可されている
自動広告にはそもそも広告ラベルが表示されてないので、広告のラベルはグーグル広告に必須ではない、ということが言えると思いますが、付けるとしたら「広告」または「スポンサーリンク」のいずれか、ということになるでしょうか。
- 補足）「スポンサードリンク」というラベルについて
- よく「スポンサードリンク」といったラベルを付けてるサイトやブログがありますが、アドセンスのポリシー的に見ればこれは間違い、ということになりますね。
- アドセンスのポリシーは、間際らしいラベルを付けるな、というのがその本質になると思いますので、これだけでポリシー違反としてペナルティを受けるか、というと、それは微妙ですが。
- ちなみに「スポンサードリンク」は「スポンサー・ドリンク」ではないですよ（笑）（「Sponsored Link」のカタカナ表記（スポンサード・リンク））
自動広告に広告ラベルを付ける！
では実際にCSSで自動広告に広告ラベルを付けてみましょう。
HTMLのソースを確認すると、アドセンスの自動広告には「.google-auto-placed」というクラスが設定されてることから、それに対して「スポンサーリンク」を表示させてみます。
|
1 2 3 4 5 |
.google-auto-placed:before { content: "スポンサーリンク"; display: block; margin-bottom: .5em; } |
- content: "スポンサーリンク";
- 広告の上に表示するラベルを設定。
- 「広告」と表示したい場合には「スポンサーリンク」を「広告」に変更すればOK
- display: block;
- 広告ラベルにマージン（余白）を設定するために block 指定
- margin-bottom: .5em;
- 広告ラベルと広告の間の余白を設定。
- ここでは0.5文字分の余白を設定している。
- 余白を調整したい場合には、「.5」の数値を変えればOK
実際にこのCSSを設定する方法や、このCSSに加えて自動広告の上下の余白を調整したい（上下の余白の幅を広げたい）という場合には以下を見てみてください。
アドセンス自動広告が文章や画像とくっついている！広告の上下に余白を設定する方法
記事内だけ広告ラベルを設定する場合
上で紹介したCSSを設定すると、ヘッダーや記事内、サイドバー、フッターなどに表示される全ての自動広告に広告ラベルが表示されます。
それでOK！、という場合には良いですが、
- ヘッダーやサイドバー、フッターまでは広告ラベルは表示しなくても良い
- つまり、広告ラベルは記事内の自動広告だけにしたい
という場合もありますね。
記事内の自動広告だけ広告ラベルを付ける、という場合には、記事内を指定するクラスやidを調べて、上で見たCSSを利用すればよいです。
以下いくつか例を挙げますが、これはテーマによって変わるので、例にないテーマをお使いの場合には自分で調べてみてくださいね。
参考）
ブログのデザインカスタマイズ！CSSの適用範囲を確認する技
賢威8の場合
|
1 2 3 4 5 |
.keni-section_wrap.article_wrap .google-auto-placed:before { content: "スポンサーリンク"; display: block; margin-bottom: .5em; } |
賢威7の場合
|
1 2 3 4 5 |
.article-body .google-auto-placed:before { content: "スポンサーリンク"; display: block; margin-bottom: .5em; } |
JINの場合
|
1 2 3 4 5 |
article .google-auto-placed:before { content: "スポンサーリンク"; display: block; margin-bottom: .5em; } |
Affinger5の場合
|
1 2 3 4 5 |
.mainbox .google-auto-placed:before { content: "スポンサーリンク"; display: block; margin-bottom: .5em; } |
Cocoonの場合
|
1 2 3 4 5 |
article .google-auto-placed:before { content: "スポンサーリンク"; display: block; margin-bottom: .5em; } |
Simplicity2の場合
|
1 2 3 4 5 |
#the-content .google-auto-placed:before { content: "スポンサーリンク"; display: block; margin-bottom: .5em; } |
ルクセリタスの場合
|
1 2 3 4 5 |
div#mainEntity .google-auto-placed:before { content: "スポンサーリンク"; display: block; margin-bottom: .5em; } |
今回のポイント
アドセンスの自動広告はとても便利で、今ではアドセンスの審査に合格した後、自動広告の設定をONするだけで広告が表示されて、「どこに広告を配置しようかな」という手間も省けて大助かり。
ただ、記事の中の色々なところに表示される分、訪れた人が記事を読むときに、広告の見分けがしずらい、少なくとも広告と分かるようにしたい、という場合もありますね。
現状、自動広告にラベルを設定する機能はないようですが（今後こうした機能も付くかもしれませんが）CSSのちょっとした工夫で付けることもできますので、試してみても良いかもしれません。
また、アドセンスで収入を上げたいがどうすれば良いか分からない、ブログやサイト、ネットビジネスで収益を上げる方法を順を追って学びたい、という場合には、以下のメルマガにも登録してみてくださいね。
