アドセンスを横2つ並べて表示させるのが流行っているようなので、試しに設定してみました。
ブログで使わせて頂いているbloggerのテンプレート
シンプルなblogger日本語テンプレート「Vaster」を作ったので公開していくブログを運営していく上で、ブロガーであれば誰しもが「欲しいな」と思う機能を全て搭載しています。
シンプルなデザインで機能も豊富なテンプレートです。素敵。
幾つかのサイトを参考にしても、そのままでは意図した通りにアドセンス配置が出来なかったため、変則的な対応をとりました。
(スポンサーリンク)
テンプレートにアドセンスのタグを挿入
・記事の途中に表示（PC、スマートフォン閲覧向け設定）
Vasterテンプレートで、
<!--この真下にアドセンスを挿入 記事中-->
の下にアドセンスを設置します。
なお、bloggerではそのままアドセンスのコードを貼り付けるとエラーとなるので、アドセンス1行目の修正を行います。
元のコード部分
<script async
修正後のコード部分
<script async='async'
・記事下に2つ並べて表示（PC閲覧向け設定）
<!--この真下にアドセンスを挿入 記事下-->
の下に2つアドセンスを設置します。
※レスポンシブ広告とコードの書き換えを行います。
具体的な書き換えを行う箇所は下記の「bloggerでアドセンスのレスポンシブユニットを貼り付ける方法」を参考にしています。
・左側配置のコード変更箇所
アドセンスの文頭に追加。
<style type="text/css">
.my_ad { width: 336px; height: 280px; display:inline-block;}
@media (max-width:780px) { .my_ad{ width: 300px; height: 250px; } }
</style>
アドセンスの変更箇所
<script async
→ <script async='async'に変更
<ins class="adsbygoogle"
style="display:block"
→<ins class="adsbygoogle my_ad"に変更
data-ad-format="auto"を削除。
・右側配置のコード変更箇所
アドセンスの文頭に追加。
<style type="text/css">
.my_ad { width: 336px; height: 280px; display:inline-block;}
@media (max-width:780px) { .my_ad{ display:none;} }
</style>
アドセンスの変更箇所<script async
→ <script async='async'に変更
<ins class="adsbygoogle"
style="display:block"
→<ins class="adsbygoogle my_ad"に変更
data-ad-format="auto"を削除。
本来であればこれでPCで記事を閲覧時に広告が2つ並んで表示され、スマートフォンで記事を閲覧時には広告1つ表示となるはずなのですが、なぜかスマートフォンでは広告が一切表示されない状態になりました。
そこでスマートフォン向けにガジェットで対応をします。
・スマートフォン閲覧向け設定
メインブログの投稿の下に配置します。
続いてレイアウトに戻り、追加したガジェットのコード内に「mobile='only'」を挿入します。
これによりスマートフォン閲覧でのみ、設定したAdSenseが表示されます。
結果、PCでは記事内に3つアドセンスが表示、スマートフォンでは記事内に2つアドセンスが表示される状態となっています。
アドセンス配置の参考にしたサイトはこちら
bloggerでアドセンスのレスポンシブユニットを貼り付ける方法
「PC・タブレットの時は300×600の広告を表示し、スマホの時は非表示」の方法を紹介していきます。
Blogger:モバイル版のテンプレートをカスタマイズするときに、私がよく使っているもの
ウィジットタグ（b:widget）に、次の属性を付与することで、ウィジットの表示・非表示を制御することができます。
PC版でのみ表示：
mobile='no'
モバイル・PC版の両方で表示：
mobile='yes'
モバイル版でのみ表示：
mobile='only'
0 件のコメント:
コメントを投稿