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

stinger 5stinger5, アドセンス広告, トップページ, 広告を増やすstinger 5, アドセンス広告, トップページ, 広告を増やす

stinger5

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

 

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

 

  • ここで紹介するstinger5のカスタマイズは、私の備忘録です。
  • バックアップは忘れずに!!!

以下記事はワードプレス(WP)や、テーマのstinger5をカスタマイズしたやり方等を忘れないために書き留めた備忘録です

これらを参考にカスタマイズする時は、自己責任でお願いいたします。

ソースコードを変更する場合は、FTPソフトを使ってサーバーにアップ。または各サーバーのオプション(ファイルマネージャー)等(例はさくらサーバーです)でカスタマイズを行ってください。

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

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

 

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

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

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

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

サイドバーに一つアドセンス広告があるので、記事一覧に残りの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に追記した。
[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ハックを使用した。

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

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

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