Sponser Link
前回はGoogle AdSenseインフィード広告の貼り方を解説しました。
【コピペOK】図解◇実例◇インフィード広告の貼り方解説◇STINGER8◇第1回今回は前回貼ったインフィード広告の体裁を整えて、
よりページに馴染むように作っていきたいと思います。
スタイルシートで罫線をつけていきます!
Sponser Link
目次
前回のおさらい
プリスクールパークというサイトを実例にして説明しています。
プリスクールパークはSTINGER8を使っているので、
STINGER8で説明しています。
STINGER8の一覧ページはitiran.phpです。
他テーマだとcategory.phpやarchive.phpが
一覧ページではないかと思います。
他のテーマの方も参考にしてくださいね。
前回はここまでできました。
記事が並んでいる一覧の一番上がインフィード広告になっています。
インフィード広告以外は記事と記事の間に
薄いグレーの罫線があります。
今回はこの薄いグレーの罫線をインフィード広告に
つけていく方法をご紹介します。
Sponser Link
前回までの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行までが前回修正した部分です。
Sponser Link
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行を追加します。
Sponser Link
style.cssにスタイルを追加
/*インフィード広告*/ .ads__feed { border-bottom: 1px dotted #d1d1c0;; margin-bottom: 20px; }
style.cssの最下部にでも追加してください。
これでプレビューしてみてください。
よりページに馴染みました〜♫
ほむほむ
phpやcssを修正するときは大元ではなく。
childにしてくださいね。
そして、バックアップもとっていつでも戻せるようにしてください!
ここまでお付き合いありがとうございました!
【コピペOK】図解◇実例◇インフィード広告を下にも追加◇STINGER8◇第3回
Sponser Link