Stinger8

【WordPress】Stinger8で記事一覧の間にアドセンスを挿入する方法【Google Adsense】

今回は記事一覧の中にアドセンスを挿入する方法です。

なお、こちらの記事はstinger8に関する記事です。
stinger plus2の場合はこちら

【WordPress】Stinger Plus2で新着記事の間にアドセンスを挿入する方法【Google Adsense】
今回は記事一覧の中にアドセンスを挿入する方法です。なお当記事はstinger plus2に関する記事です。stinger8の場合は、こちらをご覧ください。そこまで難しくはなくコピペでできますが、カスタマイズになるので、子テーマを使用しましょ...

そこまで難しくはなくコピペでできますが、
カスタマイズになるので、子テーマを使用しましょう。

子テーマについてはこちら!

【WordPress】テーマをカスタマイズをするときは、子テーマを使うべし!
WordPressの機能の一つとして、「子テーマ」というものがあります。ブログを書き始めた方の場合や、WordPressを使い始めた方の場合は、「子テーマ?なんだそれ」とか「親テーマにそのままコードを書けばいいじゃん」と思うかもしれません。...
【WordPress】子テーマの導入方法と使い方を覚えてガンガンカスタマイズする!
前回こちらの記事で、子テーマの重要性について説明しました。今回はその子テーマの導入方法と、使い方についてご説明します。子テーマを導入する!子テーマを導入する方法は2通りあります。1つは親テーマと一緒にダウンロードする!もう1つは自分で子テー...
スポンサーリンク
新たにレンタルサーバーを選ぶならこれ!
エックスサーバー
  • 国内シェアNo.1の高速サーバーなのでストレスフリー!
  • 自動バックアップ機能に標準対応で安心運用可能!
気になるポイント! キャンペーン中に契約すれば.com等のドメインを永久無料で使えます!
WordPressでサイトを運用すると重くなりがちですが、使用しているレンタルサーバーのスペックがあまり良くないと、どんなにWordPress側で高速化をしていても、なかなか高速化の成果が反映されません。サイトの表示スピードが上がらない原因がレンタルサーバーの場合は、エックスサーバーにしてみると改善するかもしれません! またサーバー等のバックアップを自動で行っているので、安心してサイトの運用をすることができます! またマルチドメイン、メールアドレスを無制限で使えるというのもうれしいですね。

公式サイトはこちら

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のカスタマイズ記事まとめはこちら!↓

【プログラミング入門最強の味方】STINGER8カスタマイズまとめ
WordPressのテーマStinger8のカスタマイズ記事が増えてきたので、記事を種類別に分類をしてみました。STINGER8は基本的には、最低限の機能しかないまっさらなテーマです。その分非常にカスタマイズがやりやすく、HTMLやCSS、...

コピペも良いですが・・・

カスタマイズ記事はコピペできるものもあり、便利ですが、もし分かりずらかったりする場合は、本などを併せて使用すると、理解度が深まりますよ!

私が使用したおすすめの本はこちらです。

コメント