Googleアドセンスのレスポンシブ広告は、スマホ・タブレット・PCに自動対応してくれる便利な広告です。
しかし、
- 広告ラベルを中央寄せにしたい
- 「スポンサーリンク」をおしゃれにしたい
- 広告周りのデザインを統一したい
と考えている方も多いのではないでしょうか。
この記事では、Googleアドセンスのレスポンシブ広告に表示する広告ラベルを中央寄せし、スタイリッシュにカスタマイズする方法を解説します。
レスポンシブ広告とは？
レスポンシブ広告とは、Googleアドセンスが自動的に広告サイズを調整してくれる広告形式です。
1つの広告コードで、
- PC
- タブレット
- スマホ
に対応できるため、多くのサイトで利用されています。
広告ラベルを表示する理由
広告ラベルとは、
スポンサーリンクという表記のことです。
ユーザーに広告であることを分かりやすく伝えられるため、多くのブログで採用されています。
完成イメージ
今回紹介する設定では、
スポンサーリンクが
- 中央寄せ
- 小さめサイズ
- グレー系カラー
- シンプルデザイン
で表示されます。
広告ラベルを中央寄せする方法
まずは広告コードの上に以下を追加します。
<div class="ad-label">スポンサーリンク</div>
<!-- Google AdSense -->
広告コードCSSを追加する
WordPress管理画面から
外観
↓
カスタマイズ
↓
追加CSSへ移動します。
以下のコードを追加してください。
.ad-label{
text-align:center;
font-size:11px;
color:#999;
margin-bottom:8px;
letter-spacing:1.5px;
font-weight:600;
}おしゃれにカスタマイズする方法
少し高級感を出したい場合はこちら。
.ad-label{
text-align:center;
font-size:11px;
color:#888;
margin-bottom:8px;
letter-spacing:2px;
font-weight:700;
}枠線を付ける方法
ラベルを目立たせたい場合は以下がおすすめです。
.ad-label{
text-align:center;
font-size:11px;
color:#888;
border-bottom:1px solid #ddd;
padding-bottom:5px;
margin-bottom:10px;
}SWELLで使う場合
SWELL利用者なら、
- アイキャッチ下広告
- 目次下広告
- 記事下広告
- 関連記事下広告
に利用できます。
特に記事下広告との相性が良く、見た目もスッキリします。
WP QUADSで使う方法
WP QUADSの場合は、
<div class="ad-label">スポンサーリンク</div>を広告コードの上へ追加するだけです。
レスポンシブ広告にも問題なく対応できます。
ダンデライオンゲームブログ向けおすすめ設定
現在のSWELL環境なら以下がおすすめです。
.ad-label{
text-align:center;
font-size:11px;
color:#999;
margin-bottom:8px;
letter-spacing:1.5px;
font-weight:600;
}シンプルで記事の邪魔にならず、広告ラベルとしても見やすくなります。
FAQ
スポンサーリンク表記は必須？
Googleアドセンスでは必須ではありませんが、多くのサイトが設置しています。
色を変更しても大丈夫？
問題ありません。
ただし広告と誤認させるデザインは避けましょう。
レスポンシブ広告でも利用できる？
問題なく利用できます。
SWELLでも使える？
利用可能です。
追加CSSにコードを入れるだけです。
まとめ
Googleアドセンスのレスポンシブ広告は、広告ラベルを少しカスタマイズするだけで見た目が大きく改善します。
特に、
- 中央寄せ
- 小さい文字
- グレー系カラー
- シンプルなデザイン
はどんなブログにも合わせやすくおすすめです。
SWELLやWP QUADSを利用している方は、ぜひ導入して広告周りをスタイリッシュに整えてみてください。