stinge5トップページに広告を増やしてアドセンス収益をアップさせるカスタマイズ

新型コロナウイルス北海道の感染場所最新情報!

 

新型コロナ北海道内の感染者数動向の最新情報!

新型コロナの5類移行に伴い、指定した医療機関からの「定点把握」による全国の感染状況を初めて発表。そこで北海道内（特に釧路・札幌）で感染された動向の最新の状況を配信しています。

www.net.y-taka.biz

 

 

stinge5トップページに広告を増やしてアドセンス収益をアップさせるカスタマイズ

stinger 5でアドセンス広告の収益アップさせる為に、トップページ（記事一覧）や固定ページに広告を増やすやり方を解説します。

ブログにアドセンス広告を表示させているブロガーは少しでも収益の事を考えてるはずです。

STINGER5は非常に簡単にGoogleアドセンス広告を配置できるので、そこに魅力を感じてSTINGERを選んだ人もいると思います。

より一層アドセンス広告を宣伝しちゃおう。という事でブログトップページと固定ページにアドセンス広告表示を増やしました。

 
デフォルトのブログトップページでは、サイドバーの一つしか表示されていない。

これは非常にもったいない。アドセンス規約では、1ページに3箇所まで表示して良いので、記事一覧の中にアドセンス広告を２つ増設させるカスタマイズをします。

記事一覧にアドセンス広告を２つ表示させる

サイドバーに一つアドセンス広告があるので、記事一覧に残りの2つをトップと一番下に表示させるようカスタマイズする。

ブログトップページの記事一覧の上に表示させる

まずは、外観⇒テーマ編集⇒「itiran.php」を開く。
わたしの場合子テーマ内の「itiran.php」

開いたら「?<div id=”topnews”>」のコードを探す。

見つけたら「?<div id=”topnews”>」のコードの前に以下のコードを記述する。

[php]
<?php if(is_mobile()) { ?>
<div align=”center”>
SPONSORED LINK<br>
— ここにスマホ用の AdSense等の広告コードを入力 —
— スマホ用なので横幅(width)は320px以下のモバイルバナー用が最適 —
<br><br>
</div>
<?php } else { ?>
<div align=”center”>
SPONSORED LINK<br>
— ここにpc表示用の AdSense等の広告コードを入力 —
— pc用は広告サイズはレスポンシブ用がベスト —
<br><br>
</div>
<?php } ?>
[/php]

記述したら

「– ここにスマホ用の AdSense等の広告コードを入力 —
— スマホ用なので横幅(width)は320px以下のモバイルバナー用が最適 –」

上記コード内の指定箇所（「- 　　-」までを削除してから）にスマホ用の広告コードを追記する。

次に
「– ここにpc表示用の AdSense等の広告コードを入力 —
— pc用は広告サイズはレスポンシブ用がベスト –」
上記コード内の指定箇所（「- 　　-」までを削除してから）にパソコン用の広告コードを追記する。

「ファイルを更新」をクリックする。

これでブログトップページ一覧の上にアドセンス広告が表示されたと思う。

ブログトップページの記事一覧の下に表示させる

同じく「itiran.php」内の下の方にある
[php]
<?php endwhile; else: ?>
<p>記事がありません</p>
<?php endif; ?>
</div>
[/php]

の「<?php endif; ?>」の下に下記コードを追記する。

[php]
<?php if(is_mobile()) { ?>
<div align=”center”>
SPONSORED LINK<br>
— ここにスマホ用の AdSense等の広告コードを入力 —
— スマホ用なので横幅(width)は320px以下のモバイルバナー用が最適 —
<br><br>
</div>
<?php } else { ?>
<div align=”center”>
SPONSORED LINK<br>
— ここにpc表示用の AdSense等の広告コードを入力 —
— pc用は広告サイズはレスポンシブ用がベスト —
<br><br>
</div>
<?php } ?>
[/php]
記述したら

「– ここにスマホ用の AdSense等の広告コードを入力 —
— スマホ用なので横幅(width)は320px以下のモバイルバナー用が最適 –」

上記コード内の指定箇所（「- 　　-」までを削除してから）にスマホ用の広告コードを追記する。
次に
「– ここにpc表示用の AdSense等の広告コードを入力 —
— pc用は広告サイズはレスポンシブ用がベスト –」
上記コード内の指定箇所（「- 　　-」までを削除してから）にパソコン用の広告コードを追記する。

「ファイルを更新」をクリックする。

スタイルシート(style.css)に余白の調整コードを記述

これでブログトップページ一覧の上にアドセンス広告が表示されたと思う。
この後ｃｓｓで上のアドセンス広告と記事一覧の余白の調整が必要な場合

下記コードをcssに追記した。
[css]
/*—————————–
アドセンスの表示で崩れたための修正
——————————*/
#topnews dl:first-child {
margin-top: -50px;
}

/*—————————–
ieの表示が崩れるための修正
——————————*/
@media screen and (min-width:0\0) {
#topnews dl:first-child {
margin-top: -20px;
}
}
[/css]

まとめ

上記余白の調整は崩れた場合のみ必要。

なぜかIE（ver.11）だと崩れるのが多い気がする。

IE表示崩れの修正は、IE用cssハックを使用した。

トップページに広告を増やしたから収益が増える事はありません。

肝心なのはたくさんの人に読まれるよう記事内容を充実させる事が大切だと思います。

その上で広告が３つあった方が、クリック率が上昇すると思います。