【Stinger5】収益増加!トップページ記事一覧にアドセンスをのせるカスタマイズ

Stinger5でトップページの記事一覧に広告を載せる方法を紹介します。PCとスマートフォンで表示する広告を切り替えることもできます。悩みがちなトップページの広告配置もこれで解決です。収益増加のためにもぜひお試しください

トップページの記事一覧に広告を載せるカスタマイズ

2913018697_ccbb33e993_zphoto by Armando Torrealba

スポンサーリンク

記事一覧の中の好きな場所に広告を入れる

まずはバックアップをしておきます。今回は、itiran.phpとstyle.phpを修正しますのでそちらのバックアップをとっておいてください。(作業はあくまで自己責任でお願いします。)

まずは、ダッシュボード → 外観 → テーマ編集に入ります。
Itiran.phpを開きます。
上から2行目の
2014y12m01d_091813237-2
に、

$loop_count++;

を追加します。
このようになります。
2014y12m01d_091906679-2のコピー

次に24行目以降にあるこの部分を探します。
2014y12m01d_093614578

の後に

 <?php if ( $loop_count == 1 || $loop_count == 3 ) : ?>
アドセンスコードを入れる
<?php endif; ?>

を追加します。この設定では、トップページの一覧の上から2個目と4個目に広告が入ります。

Count == 〇の部分の数字を変えると一覧の何記事目を広告にするかを指定できます。〇+1個目の欄に広告が入ります。さらに|| $loop_count == 〇を足せば広告を増やせます。アドセンスの場合は1ページに3個までですので注意してください。

このようになります。
2014y12m01d_101655063
一度保存して確認するとこのようになっています。
2014y12m01d_101725806-2のコピー
「アドセンスコードを入れる」が表示されています。これを、投稿記事と同じような外観にしていきます。

スタイルを整える

スタイルシート(Style.php)を開きます。「topnews dl」が一覧画面のスタイルを決めています。コードをコピーしておいてください。
2014y12m01d_115634971

スタイルシートの中の

----------------------------------------------------*/
/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (max-width: 780px) {

を探します。min-width: 780pxと間違えないようにしてください。maxの方です。

それより上にコードをいれていきます。
最初に名前を決めます。(例).toppageitiran{
「 .〇〇〇〇 { 」〇〇〇の部分は自分で決めてください。最初の「.」を忘れないようにしてください。その下に先ほどコピーした一覧のスタイルのコードを貼り付けます。
最後に } で閉じて終わりです。
例)

.toppageitiran{
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom: #FF8F15 1px dashed;
}

この様になります。
2014y12m01d_154300741

保存したらitiran.phpにもどります。

アドセンスコードの部分に先ほど設定したスタイルを適応します。
「アドセンスコードを入れる」の上に

<div class="toppageitiran">

を入れます。

の〇〇〇の部分は先ほど自分で設定した名前をいれてください。※最初の「.」は不要です。

次に「アドセンスコードを入れる」の下に

</div>

をいれます。

2014y12m01d_104626505のコピー

保存して見てみると
2014y12m01d_111339511
投稿記事と同じようなスタイルで設定されました。

アドセンス広告を貼る準備をする

アドセンス広告を載せる人は念のためラベルを貼ることをおすすめします。
「アドセンスコードを入れる」の上に

<p style=”color:#666;margin-bottom:4px;”>スポンサーリンク</p>

といれます。
2014y12m01d_111645581

保存してみてみると
2014y12m01d_111715649
となります。

アドセンス広告を作成して貼る

最後に「アドセンスコードを入れる」の部分にアドセンスタグを貼り付けます。貼り付ける広告サイズは自由です。algorithmでは、600×150のカスタムサイズにしています(今後変更の可能性もあります)。

ad1

これで完成です!・・・・・が。Stinger5はレスポンシブデザインです。このままだとスマホ表示で広告がはみ出ることがあります。

特に広告が横長で300Pixel以上のものを使うとアウトです。
ad2

PCとスマートフォンで表示する広告を切り替える

PCは横長、スマートフォンは正方形といったようにPCとスマホで表示される広告を切り替えるカスタマイズをします。

これにはif構文を使います。「スポンサーリンク」の次の行に以下を加えます。

<?php if ( wp_is_mobile() ) : ?>
  // モバイル用コンテンツ
<?php else: ?>
  // PC用コンテンツ
<?php endif; ?>

このようになります。分かりやすいように広告をいったん外しています。
2014y12m01d_122717636

// モバイル用コンテンツ、// PC用コンテンツの所にそれぞれ広告を配置します。今回は、モバイル用コンテンツに300×250、PC用コンテンツに600×150のカスタム広告を配置しました。
2014y12m01d_150550996

PC広告

ad3

スマートフォン広告

ad4

まとめ

いかがでしたでしょうか?1ページ3個まで貼れるアドセンスを有効的に使って収益アップを目指しましょう。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク

コメント

  1. みき より:

    始めて投稿させていただきます。
    今スティンガー7をつかっています。

    スティンガー7でトップページにアドセンスをのせる関する記事がないんですけど、こちらのやりかたでスティンガー7でも表示出来ますでしょうか?

    よろしくお願いします。

    • goma より:

      みきさま

      コメントありがとうございます。お返事が遅くなりまして申し訳ありません。少しだけ違いますが、大体同じ方法で大丈夫ですよ。

  2. みき より:

    goma さま

    連絡が遅れてしまい申し訳ありません。
    出来ました。
    ありがとうございます。

  3. ゆうみ より:

    gomaさま

    はじめまして!この記事を参考にスティンガー7にて記事一覧にアドセンスを表示できるよう作成させて頂きました。
    他の方の記事と比べてとてもわかりやすかったので参考にさせて頂きました!

    ただ・・・教えて頂いたようにやったのですが、
    ・記事一覧にアドセンスが2つしか表示されない
    ・style.phpを編集してもgomaさまのように表示が区切られない
    となり、悩んでいます・・・。

    私は全くの初心者で見様見真似でテーマの編集を行ったんですが・・・。
    何度見てもコードはgomaさまと同じようになっているようです。

    何かお心当たりがあったら教えていただけないでしょうか?

  4. ゆうみ より:

    追記:こちらの記事「Stinger7のトップページ記事一覧にアドセンス(広告)をいれるカスタマイズ」を発見したので、参考にさせて頂いてもう一度やり直し致しました。

    ・・・が、同じ状態です。

    何か原因があるのでしょうか・・・。

  5. ゆうみ より:

    後日談:
    gomaさまが私のブログの状態を見ながら不都合を順番に解決してくださいました!息詰まることのないgomaさまの対応力にはとても驚かされました!
    そのまま無事にアドセンスを表示しております。
    その節はどうもありがとうございました☆