アドセンスを横2つに並べ、モバイルでは1つ表示にする方法



アドセンス




アドセンスを横2つ並べて表示させるのが流行っているようなので、試しに設定してみました。


ブログで使わせて頂いているbloggerのテンプレート

シンプルなblogger日本語テンプレート「Vaster」を作ったので公開していく 

ブログを運営していく上で、ブロガーであれば誰しもが「欲しいな」と思う機能を全て搭載しています。

シンプルなデザインで機能も豊富なテンプレートです。素敵。



幾つかのサイトを参考にしても、そのままでは意図した通りにアドセンス配置が出来なかったため、変則的な対応をとりました。


(スポンサーリンク)

テンプレートにアドセンスのタグを挿入


・記事の途中に表示(PC、スマートフォン閲覧向け設定)


Vasterテンプレートで、

 <!--この真下にアドセンスを挿入  記事中-->

の下にアドセンスを設置します。

なお、bloggerではそのままアドセンスのコードを貼り付けるとエラーとなるので、アドセンス1行目の修正を行います。


元のコード部分
<script async

修正後のコード部分
 <script async='async'


・記事下に2つ並べて表示(PC閲覧向け設定)

Vasterテンプレートで、

<!--この真下にアドセンスを挿入  記事下-->

の下に2つアドセンスを設置します。

※レスポンシブ広告とコードの書き換えを行います。

具体的な書き換えを行う箇所は下記の「bloggerでアドセンスのレスポンシブユニットを貼り付ける方法」を参考にしています。

・左側配置のコード変更箇所


アドセンスの文頭に追加。
&lt;style type=&quot;text/css&quot;&gt;
.my_ad { width: 336px; height: 280px; display:inline-block;}
@media (max-width:780px) { .my_ad{ width: 300px; height: 250px; } }
&lt;/style&gt;



アドセンスの変更箇所
<script async
<script async='async'に変更
 
&lt;ins class="adsbygoogle"
style="display:block"

&lt;ins class="adsbygoogle my_ad"に変更

data-ad-format="auto"を削除。


・右側配置のコード変更箇所


アドセンスの文頭に追加。
&lt;style type=&quot;text/css&quot;&gt;
.my_ad { width: 336px; height: 280px; display:inline-block;}
@media (max-width:780px) { .my_ad{ display:none;} }
&lt;/style&gt;




アドセンスの変更箇所<script async
<script async='async'に変更
 
&lt;ins class="adsbygoogle"
style="display:block"

&lt;ins class="adsbygoogle my_ad"に変更

data-ad-format="auto"を削除。



 
本来であればこれでPCで記事を閲覧時に広告が2つ並んで表示され、スマートフォンで記事を閲覧時には広告1つ表示となるはずなのですが、なぜかスマートフォンでは広告が一切表示されない状態になりました。


そこでスマートフォン向けにガジェットで対応をします。


・スマートフォン閲覧向け設定

レイアウトでガジェット「HTML/Javascript」を追加。
メインブログの投稿の下に配置します。
ガジェットにアドセンスのコードを設定します。


続いてレイアウトに戻り、追加したガジェットのコード内に「mobile='only'」を挿入します。
これによりスマートフォン閲覧でのみ、設定したAdSenseが表示されます。

bloggerガジェット



結果、PCでは記事内に3つアドセンスが表示、スマートフォンでは記事内に2つアドセンスが表示される状態となっています。


アドセンス配置の参考にしたサイトはこちら



bloggerでアドセンスのレスポンシブユニットを貼り付ける方法
「PC・タブレットの時は300×600の広告を表示し、スマホの時は非表示」の方法を紹介していきます。

Blogger:モバイル版のテンプレートをカスタマイズするときに、私がよく使っているもの

ウィジットタグ(b:widget)に、次の属性を付与することで、ウィジットの表示・非表示を制御することができます。

PC版でのみ表示:
mobile='no'

モバイル・PC版の両方で表示:
mobile='yes'

モバイル版でのみ表示:
mobile='only'








■関連記事

0 件のコメント :

コメントを投稿