レスポンシブ広告をカスタマイズ！
「広告をダブルレクタングルで表示する」という記事を書きましたが、これは２つ並べるのは好きじゃない、自分のブログのレイアウトに合わないという方向けの記事です。
ただ貼るだけでしたら広告コードを一部のみ変更しHTMLの編集で貼ってしまえば終わりですが、ちょっと複雑な、カスタマイズ性を持ったレスポンシブ広告を貼ってみましょう。
PCとスマホで広告のサイズを変えて表示する
PCでは336×280（レクタングル大サイズ）を表示、スマホでは300×250（レクタングルサイズ）を表示する方法です。
タブレットではPC側の設定サイズ広告が表示されます。
ご自身のお好きなサイズに変更してももちろん大丈夫ですが、広告が表示されなくなってしまうため規定以外のサイズにはしないように注意して下さい。
まずはアドセンスからレスポンシブ広告コードを取得します。
アドセンスの広告コードを取得する方法
取得したものはこんな感じのコードですね。
これを改変します。
・「async」を「async='async'」に
※一行目のコードに関して、すでに同じ行がHTMLにある場合、２つめ以降は無くて構いません。
・「ins class="adsbygoogle"
style="display:block"」を
「ins class="adsbygoogle my_ad"」に
・「data-ad-format="auto"」を削除
ここまでで以下のようになっているはずです。
どうですか？合っていますか？
改変するときに「<」や「>」を消さないように注意です！
ここまで出来たら仕上げです。
<p>スポンサーリンク</p>
<style type="text/css">
.my_ad { width: 336px; height: 280px; display:inline-block;}
@media (max-width:780px) { .my_ad{ width: 300px; height: 250px; } }
</style>
このコードを一番前、頭にくっつけます。
「スポンサーリンク」と広告と分かる記述も忘れずに表記します。
「広告」でも大丈夫です。
ちなみに
「<p style="text-align: center;">スポンサーリンク</p>」
と表記すると「スポンサーリンク」の表記が中央寄りになります。
my_adから始まる分がPCに表示されるサイズ、
@mediaからの文でmy_ad以降がモバイルに表示されるサイズです。
完成するとコードが以下のようになります。
ちなみに、
@media (max-width:780px) { .my_ad{ width: 300px; height: 250px; } }
の行で、サイズ部分の記述を
{ .my_ad{ display:none;} }
とするとモバイルで非表示にすることが出来ます。
PCのサイドバー用で大きい広告を作った際や、広告を２つ並べる際にお使いください。
Vaster2では、「テーマ」→「HTMLの編集」→「Ctrl+Fキー」で検索窓を出し「アドセンス」と検索すればアドセンスを挿入する分かりやすい記述部分が出てきます。
以上で完成です。
貼り付けた後はPCとスマホの両方でイメージ通り貼れているか確認してください。
|
|
|
