今回は記事一覧の中にアドセンスを挿入する方法です。
なお、こちらの記事はstinger8に関する記事です。
stinger plus2の場合はこちら
そこまで難しくはなくコピペでできますが、
カスタマイズになるので、子テーマを使用しましょう。
子テーマについてはこちら!
itiran.phpを編集する!
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
まずはitiran.phpの上部にある上記のコードを消し、
以下のコードに書き換えます。
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); $count++; ?> <?php if($count == 3 or $count == 6 or $count == 9) : ?> <div class="itiran-ad"> <p>スポンサーリンク</p> //ここに広告のコード// </div> <?php endif; ?>
上記の
にアドセンスのコードを記載してください。
オススメの広告ユニットは、
『レスポンシブ』です!
こんな感じになります。
補足
<?php if($count == 3 or $count == 6 or $count == 9) : ?>
上記のコードでは【$count == 3、6、9】という数字が入っていますが、
こちらの【3、6、9】という数字は、
記事一覧の3番目、6番目、9番目に、表示させるという意味です。
そのままでも構いませんが、こちらは好きな数字に変更してください。
また上記の説明では3つ表示させていますが、
アドセンスの数を減らして2つの場合は、以下の様にすればできます。
($count == 3 or $count == 9)
以上で、アドセンスが表示されましたが、
このままですと見た目が悪いので、
スタイルシートで調整します。
style.cssに追記する!
アドセンスと記事のバランスが悪いので、
スタイルシートで調整します。
以下のコードを追記します。
/*--トップ一覧広告--*/ .itiran-ad { text-align: center; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #38b48b; } /*--スポンサーリンクの文字--*/ .itiran-ad p { font-size: 14px; line-height: 1em; color: #999; margin-bottom: 10px; } /*--ここまで--*/
なお、borderの色等については、
自分のサイトに合うよう調整してください。
これで以下の通りになります。
これでうまく表示されていれば、
完成です!
広告の貼り過ぎにはご注意!
どんなに良質なコンテンツであっても、
広告だらけで、読みにくいブログは嫌厭されてしまいます。
適度な数の広告にすることをこころがけましょうー
Stinger8のカスタマイズ記事まとめはこちら!↓
コピペも良いですが・・・
カスタマイズ記事はコピペできるものもあり、便利ですが、もし分かりずらかったりする場合は、本などを併せて使用すると、理解度が深まりますよ!
私が使用したおすすめの本はこちらです。
コメント