【コピペOK】図解◇インフィード広告に罫線をCSSで追加する方法◇STINGER8◇第2回

前回はGoogle AdSenseインフィード広告の貼り方を解説しました。

【コピペOK】図解◇実例◇インフィード広告の貼り方解説◇STINGER8◇第1回

今回は前回貼ったインフィード広告の体裁を整えて、

よりページに馴染むように作っていきたいと思います。

スタイルシートで罫線をつけていきます！

前回のおさらい

プリスクールパークというサイトを実例にして説明しています。

プリスクールパークはSTINGER8を使っているので、

STINGER8で説明しています。

STINGER8の一覧ページはitiran.phpです。

他テーマだとcategory.phpやarchive.phpが

一覧ページではないかと思います。

他のテーマの方も参考にしてくださいね。

前回はここまでできました。

記事が並んでいる一覧の一番上がインフィード広告になっています。

インフィード広告以外は記事と記事の間に

薄いグレーの罫線があります。

今回はこの薄いグレーの罫線をインフィード広告に

つけていく方法をご紹介します。

前回までのitiran.php

<?php if ( have_posts() ) : ?> 　
　<!--インフィード広告 feed_上　ここから--> 　
　<?php the_ad(XXXX); ?>
 　<!--インフィード広告 feed_上　ここまで--> 
<?php while ( have_posts() ) : the_post(); ?>
.
.
(省略)
.
.
<?php endwhile;
	else: ?>
 <p>記事がありません</p>
<?php endif; ?>

1行〜5行までが前回修正した部分です。

itiran.phpにタグを追加

<?php if ( have_posts() ) : ?>
　　　<article class="ads__feed">	
 　 　<!--インフィード広告 feed_上　ここから-->
 　 　<?php the_ad(XXXX); ?>
 　　　<!--インフィード広告 feed_上　ここまで-->
　　　</article>	
<?php while ( have_posts() ) : the_post(); ?>

2行と6行を追加します。

style.cssにスタイルを追加

/*インフィード広告*/
.ads__feed {
border-bottom: 1px dotted #d1d1c0;;
margin-bottom: 20px;
}

style.cssの最下部にでも追加してください。

これでプレビューしてみてください。

よりページに馴染みました〜♫

ここまでお付き合いありがとうございました！

【コピペOK】図解◇実例◇インフィード広告を下にも追加◇STINGER8◇第3回