アドセンスをTOPページの記事一覧に表示させる方法【STINGER5】

記事一覧ページではアドセンスはサイドバー上部にしか表示されません。
しか~し、せっかく3つまでOKなのですから、1つだけなんてもったいないですよね!
というわけで、記事一覧の間にアドセンスを差し込んでみました。

1.PHPファイルの編集

stinger5_child: itiran.phpを変更する。

<div id=”topnews”>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<dl class=”clearfix”>
<dt> <a href=”<?php the_permalink() ?>” >
<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php the_post_thumbnail( ‘thumb150’ ); ?>
<?php else: // サムネイルを持っていないときの処理 ?>
<img src=”<?php echo get_template_directory_uri(); ?>/images/no-img.png” alt=”no image” title=”no image” width=”100″ height=”100″ />
<?php endif; ?>

ピンクの箇所を下記に書き換えます。

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

↓↓↓↓↓↓↓↓↓↓

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

<?php endwhile; else: ?>
<p>記事がありません</p>
<?php endif; ?>

上のコードの上に下記のコードを書き加えます。

↓↓↓↓↓↓↓↓↓↓

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

ここにアドセンスのコードを挿入」の位置に、取得したアドセンスコードを貼ります。

※このアドセンスコードは「レスポンシブコード」を貼ります。

<?php if ( $loop_count == 3 || $loop_count == 10 ) : ?>

の3、10の数字を変えると、広告の表示位置が変わります。

2.CSSファイルの編集

stinger5_child: スタイルシート (style.css)に追記する。

/* アドセンスをTOPページの記事一覧に表示させる */
.toppagead {
margin-bottom: 20px;
padding-top: 20px;
padding-bottom: 10px;
border-bottom: 1px dotted #999999;
}

アドセンス
赤枠の位置にアドセンスが差し込まれましたね。

下線がない
スマホのTOPページの記事一覧にもアドセンスが表示されましたが、なぜか下のボーダーが表示されていません?
お分かりの方は教えて下さいませ。

※「Stinger5でアドセンスをTOPページの記事一覧に表示させる方法」を参考にさせていただきました。

シェアする

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

フォローする