Web筋トレも使っているサーバー!ロリポップを使ってみない?

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

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

コメントを残す

メールアドレスが公開されることはありません。