ズボラ応援ブログ始めました

STINGER8の記事一覧にAdsenseのインフィード広告を馴染ませる方法

今日はSTINGER8のトップページやカテゴリーページなどの記事一覧に、GoogleAdsenseのインフィード広告を馴染ませる方法の紹介です。

cssやPHPが多少わかるよって人はSTINGER8でなくても応用できます。

上記の画像のような感じで表示されます。

インフィード広告を馴染ませる方法

cssの設定

STINGER8の一覧画面は「kanren」という要素の中にdlタグ(定義リスト)で記事を並べています。

cssは下記のように定義されています。

.kanren dl {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #ccc;
}

このスタイルと同じように表示したいので、違う名前で同じスタイルの要素を定義します。

例:

.infeed {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #ccc;
}

GoogleAdsenseの設定

Adsenseで新しいインフィード広告を追加し、スタイルを選択します。STINGER8なら「横の画像」というスタイルです。

Paddingはcssで設定していくのですべて0にします。

イメージの縦横比は1:1にします。イメージサイズは%かpxで指定できるので、pxを選択して100を入力します。イメージのPaddingは右だけ15pxにしておきます。

STINGER8は解像度によってフォントサイズが変わる設定になっているので完全に一緒にはできませんが、16pxくらいがいいかと思います。

その他の設定は好みで選択してください。

PHPの修正

最後に広告を記事の中に挿入していきます。

STINGER8ではitiran.phpでトップページやカテゴリーページなどの一覧表示をしています。itiran.phpは簡略化すると下記のような構造になっています。

<div class="kanren">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();  ?>
<dl class="clearfix">
※省略※
</dl>
<?php endwhile;
else: ?>
<p>記事がありません</p>
<?php endif; ?>
</div>

if ( have_posts() )は表示する記事があるかどうかを確認していて、なければ下の方にあるelseに飛んで「記事がありません」を表示して終了。

表示する記事がある場合はwhile ( have_posts() ) : the_post(); ~ endwhile;が実行されます。whileは条件を満たす間は繰り返すという命令で、この場合はhave_posts()を満たす場合は繰り返すという意味です。

the_post()は次の記事の情報を取得するための構文で、ここで取得した情報を<dl>~</dl>で表示させています。

この後例えば1番目と5番目の記事の後に広告を表示したいという場合、今が何番目の記事なのかをカウントする変数が必要です。そこで下記のようにif文の前に$i=1;を書き加えてください。

<?php $i=1; if ( have_posts() ) : while ( have_posts() ) : the_post();  ?>

iという変数を定義し、初期値1を代入しています。

次に<dl>~</dl>の後、<?php endwhile; の前に次のコードを追加します。

<?php if( $i == 1 or $i == 5){ ?>
<div class="infeed">
※ここに広告コード※
</div>
<?php } $i++; ?>

Adsenseで取得したコードを※ここに広告コード※の部分に張り付けてください。

広告を表示する位置を変えたい場合は$i == 1や$i == 5の数字を変えてください。

別のやり方

下記のように書くと、4の倍数番目の記事の後に広告が挿入されます。

%は余りを計算するための演算子で、4で割って余りが0のときという意味になります。

<?php if( $i%4==0){ ?>
<div class="infeed">
※ここに広告コード※
</div>
<?php } $i++; ?>

Adsenseのインフィード広告はサイドバーへの挿入は禁止されています。

私はこれを知らずに一生懸命サイドバーのデザインに合わせてカスタマイズしたのに無駄に……悲しかったので当初予定していなかった記事一覧へ応用したのでした。

タイトルとURLをコピーしました