Googleアドセンスを利用していると、「スポンサーリンク」の表示をもう少しおしゃれにしたいと思うことはありませんか？
デフォルトのままでも問題ありませんが、CSSを少し追加するだけで、
- 中央寄せ
- 文字サイズ変更
- 文字色変更
- スタイリッシュなデザイン
にカスタマイズできます。
この記事では、WordPressでGoogleアドセンスのスポンサーリンクラベルを見やすくおしゃれに変更する方法を紹介します。
スポンサーリンクラベルとは？
Googleアドセンスでは広告の上に表示される
スポンサーリンク
という表記のことです。
広告であることをユーザーへ明示する役割があります。
完成イメージ
カスタマイズ後は以下のような表示になります。
スポンサーリンク
- 中央寄せ
- 小さめサイズ
- グレー系カラー
- シンプルデザイン
記事デザインの邪魔をせず自然に表示できます。
CSSで中央寄せにする方法
WordPressの
「外観」→「カスタマイズ」→「追加CSS」
へ以下のコードを追加します。
.ad-label{
text-align:center;
font-size:12px;
color:#999;
margin-bottom:5px;
letter-spacing:1px;
}
HTMLの記述例
広告コードの上にラベルを追加します。
<div class="ad-label">スポンサーリンク</div>
<!-- Google AdSense -->
広告コード
スタイリッシュにカスタマイズする方法
少し高級感のあるデザインにしたい場合はこちら。
.ad-label{
text-align:center;
font-size:11px;
color:#888;
letter-spacing:2px;
margin-bottom:8px;
font-weight:600;
text-transform:uppercase;
}
シンプルなブログデザインとの相性が良いです。
SWELLで使う場合
SWELLユーザーの場合は、
- 広告タグ管理
- 広告ウィジェット
- WP QUADS
などで設置した広告の上にラベルを追加できます。
特に記事内広告やアイキャッチ下広告との相性が良いです。
おすすめカラー
グレー系
color:#999;
自然で目立ちすぎません。
ブルー系
color:#5b8def;
爽やかな印象になります。
ゴールド系
color:#c9a227;
高級感を演出できます。
おすすめサイズ
小さめ
font-size:11px;
標準
font-size:12px;
少し目立たせる
font-size:14px;
個人的には11〜12pxがおすすめです。
ダンデライオンゲームブログ向けおすすめ設定
現在のSWELL環境なら以下がおすすめです。
.ad-label{
text-align:center;
font-size:11px;
color:#999;
letter-spacing:1.5px;
margin-bottom:8px;
font-weight:600;
}
シンプルで見やすく、記事デザインを邪魔しません。
FAQ
スポンサーリンク表記は必須？
Googleアドセンスの規約上必須ではありませんが、広告であることを明示する目的で表示しているサイトが多いです。
色を変えても問題ない？
問題ありません。
ただし広告と誤認されるような表現は避けましょう。
SWELLでも使える？
問題なく利用できます。
WP QUADSでも使える？
広告コードの上にラベルを追加すれば利用できます。
まとめ
スポンサーリンクラベルはCSSを少し調整するだけで、
- 中央寄せ
- 小さい文字
- おしゃれなカラー
- スタイリッシュな見た目
に変更できます。
特にSWELLやWP QUADSを利用している方は、広告周りのデザイン統一にも役立つため、ぜひ試してみてください。