AFFINGER2でトップ記事一覧に広告を入れる方法♪

アフィリエイト

このサイトの収益はまだまだ爆睡中です(笑)

当ブログのwordpressテーマは「お金を稼ぐ」に特化したAFFINGER2です!

先日の記事、AFFINGER(Ver.20151021)でトップの記事一覧に広告を入れる方法にて、AFFINGERver20151021でトップ記事一覧に広告を入れる方法をご説明致しましたが、今回は「2」の方法をご説明致します♪

テーマを編集しなければならないので、実際にカスタマイズされる際はくれぐれも事前にバックアップをお取りになってから、ご自身の責任にて作業を行って下さい!

ヴァージョンは「AFFINGER2ver20151214」です♪

トップ記事一覧で記事と記事の間に広告を入れる方法(アフィンガー2のカスタマイズ)

Affingerトップ記事一覧に広告1広告を挿入する前の状態です

 

Affinger2のトップ記事一覧に広告0.5

「外観」→「テーマの編集」→「itiran.thumbnail-on.php」を開き、先ずは上の図の赤枠内の部分を書き換えます。上はまだ書き換え前です

 

Affinger2のトップ記事一覧に広告0.6

書き換え後の画像です

これに書き換えます↓

<?php if ( have_posts() ) : while ( have_posts() ) : the_post();$loop_count++; ?>

 

Affinger2のトップ記事一覧に広告0.7次は上の図の青矢印の箇所に下記を挿入します

「itiran.thumbnail-on.php」の画面のまま下にスライドし、

青矢印の箇所にこれを挿入します↓

<?php if ( $loop_count == 3 || $loop_count == 7 ) : ?>
<div class="toppagead">
<p style="color:#666;margin-bottom:4px;text-align:center;">スポンサーリンク</p>
ここに広告のコードを挿入
</div>
<?php endif; ?>

 

「ここに広告のコードを挿入」の部分に指定のコードを入れます。レスポンシブをおススメします!

 

Affinger2のトップ記事一覧に広告0.82

挿入後の画像です

 

Affinger2のトップ記事一覧に広告0.91

続けて「style.css」を開き、一番下の青矢印の部分に下記を追加して下さい

これを追加↓

.toppagead { margin-bottom: 20px;
padding-top: 10px;
padding-bottom: 20px;
border-bottom: 1pxdotted#999;

 


以上で作業は完了です!

Affinger2のトップ記事一覧に広告0.93どうでしょう!

これで記事と記事の間に広告が入りました♪

かっこいいですよね♪

このトップ画面だけで「こやつ、できるな!」と思われるかも知れません(笑)

尚、広告の表示位置を変えたい場合については(何番目の記事の下に表示するのか?)cv0629さんのサイトで非常に分かり易くご説明頂いているのでご確認下さい♪

この記事の通りに作業を行うと、3つ目と7つ目の記事の下に広告が表示されますが、7つ目の下については意味があると思います。

多くの方がサイドバーの上に広告を貼るものと思いますが、スマホ画面で観覧した場合、記事の直ぐ下にサイドバー上の広告が表示されるため、記事挿入広告をあまり下に持っていき過ぎると、一画面の中にAdsense広告が2つ入ってしまう可能性があります

よって、cv0629さんはそれを配慮された上で下側の広告の位置をあえて7つ目の下に設定されているものと思量します

位置を変える際はくれぐれもAdsenseのポリシー違反とならないようにお気を付け下さい!

尚、この記事をベースに「なおろぐ」さんが【AFFINGER3】子テーマを使って、トップの記事一覧に広告(Adsense)を入れてみる。設定方法を画像で解説!してくれているので、子テーマで編集したい方につきましては「なおろぐ」さんのブログをご参照下さい♪

皆さまのブログライフが素晴らしい物になるよう祈っております♪

サクセスクエストしていきましょう~♪

にほんブログ村 アフィリエイト
人気ブログランキングへ
FC2 Blog Ranking

コメント

  1. […] AFFINGER2でトップ記事一覧に広告を入れる方法♪ […]

タイトルとURLをコピーしました