WordPressの無料テーマ『LION MEDIA』を愛用中のこはるです。
『LION MEDIA』『LION BLOG』では、カスタマイザーやウィジェットを使うことで、簡単に広告が設置できるようなテーマ設計になっています。初心者にとっては、とてもありがたい機能です。
しかし、気になることがひとつ！
それは、広告を設置したときに表示されるストライプの背景！
確かに、これは広告です！ってわかりやすくていいのですが、サイトに溶け込まないですよね。
できることなら、サイトに溶け込ませ、さりげなく広告ですよ～～って表示したいって思いはありませんか？
そこで、今回は『LION MEDIA』『LION BLOG』の広告表示の背景を消す方法をご紹介させていただきます。
『LION MEDIA』の広告表示の背景を消す方法は２つ！
- カスタムHTML（ウィジェット）を利用する
- 追加CSSでカスタマイズする
それでは、詳細を解説していきますね。
注意事項
まず、広告の背景を消すにあたって注意事項があります。
以下に、Googleアドセンスと A8.net（ASPサイト）のポリシーと禁止事項を例として掲載しています。自分が提携しているASP会社の規約を確認した上で、
自己責任で行いましょう。
例）Google Adsenseのポリシー
Google Adsenseのポリシーには、以下のような内容が書かれています。
広告を設置する際は、常にユーザーの視点を持ちましょう。初めてページを訪問したユーザーでも広告とコンテンツを区別できるようになっているかどうかを考える必要があります。ページのデザインに合った適切な広告のサイズや色、背景を選択することが大切です。ページ上に表示される他のコンテンツとの区別が付きにくくなるような方法で広告を設定することは避けてください。意図しないクリックの発生を避けるため、広告とコンテンツを近付けすぎないよう常に注意してください。
Google Adsense ポリシーに関するよくある質問 より （マーカーは当方で引いています）
Googleさんは何よりもユーザー目線を大切にしています。そのため、広告とコンテンツの区別がわかりにくい表示にしてしまうとペナルティーを受ける可能性があります。
例）A8.net （アフィリエイトサービス）
大手アフィリエイトサービスのA8.netの禁止事項には、以下のような内容が書かれています。
ビジターに誤解を与える広告掲載方法
広告素材をサイトコンテンツのように掲載すること、クリックが必要なコンテンツに隣接して広告を掲載する等、ビジターが誤って広告をクリックするように掲載すること。
違反を累積された場合や悪質な活動状況と判断した場合、またアカウントを取り直しての再度の違反等については提携解除や成果没収、強制退会等の措置を取らせていただきますので、予めご了承下さい。
カスタムHTMLを利用する
「カスタムHTML」はWordPressのウィジェット機能のひとつです。
WordPressのダッシュボードから、外観 > ウィジェット を選択します。
広告を設置する場合に［LION］広告 を利用しますが、今回は背景を表示したくないのでカスタム HTMLをウィジェットエリアへドラッグし配置します。
カスタムHTMLの編集画面が開くので、広告コードを貼り付けます。最後に「保存」をクリックします。
広告の背景とAdvertisementの表示がなくなりました。
Advertisement と表示したい場合は、以下のタグを任意の場所（上または下）に追加してください。
<h2 class=”adWidget__title” style=”text-align: center;”>Advertisement</h2>
「 style=”text-align:center;” 」を消すと左寄りに表示できます。
「 style=”text-align:right;” 」にすると右寄りに表示できます。
追加CSSでカスタマイズする
『LION MEDIA』『LION BLOG』の広告表示枠です。これをカスタマイズしていきます。（Advertisement の文字は消せません）
CSSでカスタマイズする項目は３つあります。
- 広告ウィジェット（［LION］広告）
- 記事内広告
- Wレクタングル広告（記事下）
CSSの変更は、WordPressのダッシュボードから、外観 ＞ カスタマイズ を選択し、追加CSSから行います。
［LION］広告
ウィジェットで設置できる広告枠です。
『LION』専用ウィジェット
以下のタグを追加CSSに記述してください。
/* 広告ウィジェット */
.adWidget {
background-color: transparent; /* 背景を透明にする */
background-image:none; /* 背景イメージをなしにする */
}
記事内広告
カスマイザーの広告設定［LION］用でコードの設定を行い、投稿で［adchord］と記述して使用する広告枠です。
以下のタグを追加CSSに記述してください。
/* 記事内広告 */
.content .adPost {
background-color: transparent; /* 背景を透明にする */
background-image:none; /* 背景イメージをなしにする */
}
Wレクタングル広告
カスマイザーの広告設定［LION］用でコードの設定を行う広告枠です。
以下のタグを追加CSSに記述してください。
/* Wレクタングル広告 */
.rectangle{
background-color: transparent; /* 背景を透明にする */
background-image:none; /* 背景イメージをなしにする */
}
おわりに
いかがでしたか？ うまく変更できましたでしょうか？
設定されている背景がなくなるだけで印象がかわり、サイトに馴染みやすくなりますよね。
CSSのカスタマイズでは「Advertisement」が消せないので、表示したくない方はカスタムHTMLを利用してみてください。
くれぐれも、注意事項に反してペナルティが科せられない範囲でカスタマイズしてくださいね。