Stinger7のトップページ記事一覧にアドセンス(広告)をいれるカスタマイズ

 Stinger7のトップページに広告をのせよう!

以前Stinger5のトップページ記事一覧に広告をのせるカスタマイズを紹介いたしました。

【Stinger5】収益増加!トップページ記事一覧にアドセンスをのせるカスタマイズ
Stinger5でトップページの記事一覧に広告を載せる方法を紹介します。PCとスマートフォンで表示する広告を切り替...

「Stinger7でも同じようにできますか?」という質問を頂いたので、紹介します。

スポンサーリンク

まずはバックアップしましょう

カスタマイズの基本はまずバックアップです。

今回は、itiran-thumbnail-on.phpとStyle.phpをカスタマイズしますのでバックアップを撮とっておきましょう(カスタマイズは自己責任でお願いいたします)。

ダッシュボード→外観→テーマの編集に入ります。

そこで、itiran-thumbnail-on.phpを開きます。

2016y06m16d_234134044

一番の上の段にあるこのコードを見つけます。

stinger7-3

赤い線の部分に

$loop_count++;

を追加します。

stinger7-1

このようになります。

次に、一番下まで下げてこの部分を見つけます。

stinger7-4

</dl>と<?php endwhile;の間に

<!--?php if ( $loop_count == 1 || $loop_count == 3 ) : ?-->
アドセンスコードを入れる
<!--?php endif; ?-->

を入れます。

stinger7-6

デザインを整える

保存してプレビューしてみると、このように「アドセンスコードを入れる」が出現しているはずです。

このままだと、記事タイトルのすぐ上に広告が入ってしまうので、整えます。

stinger7-7

スタイルシート(Style.php)を開きます。

そして、その中の「topnews dl」を探します。

stinger7-8

#topnews dl {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #999;
}

このコードを少し変えます。

#topnews dlを .○○○○に変えます(○○○○は自分で決めてください。最初の「.」を忘れないようにしてください。

ここでは、.itiranadstyle としてみます。

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

このコードをコピーしておきます。

次にスタイルシートを開いて、一番下に移動します。

「/*– ここまで –*/」のすぐ上にコピーしたコードをペーストします。

stinger7-11

このようになります。

次に再び itiran-thumbnail-on.phpを開きます。

先ほど自分で決めた○○○○にdivクラスを指定します。

ここでは、.itiranadstyleにしたので、<div class=”itiranadstyle”>になります。

「アドセンスコードを入れる」の上に<div class=”itiranadstyle”>を入れて、「アドセンスコードを入れる」の下に</div>を入れます。

stinger7-12

このようになります。

保存して、プレビューすると、デザインが他の記事と同じようになったのが確認できます。

2016y06m17d_012242773

後は、itiran-thumbnail-on.phpにある「アドセンスコードを入れる」の部分を自分のアドセンスコードに変更するだけです。

簡単にできますので、ぜひお試しください。

スポンサーリンク

シェアする

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

フォローする

スポンサーリンク