affingerで記事下のアドセンス広告を横並びにする手順

affinger-customize1_sam

stingerで有名なENJIさんのテンプレート『affinger』をアフィリエイトサイトに導入しました。

ネットで検索してみるとSEOも調子いいみたいなので楽しみなのですが、デフォルトのデフォルトのままだと記事下の広告が一つしか並びません。

レクタングル広告を2つ横並びにするカスタマイズ手順を忘れないうちに書いておきます。

アドセンス広告を設定する

まずアドセンス広告の設定をしていない場合は設定しておきましょう。

「外観」の「ウィジェット」からアドセンスコードを貼付けます。

affingerはアフィリエイトに特化したテンプレートなのでとっても簡単です。
「Googleアドセンス用336px」とある部分に「テキスト」ウィジェットをドラッグしてコードを貼付けるだけです。

affinger-customize1-3

これだけで簡単にレクタングルのアドセンスコードが貼付けられます。

本来はなる筈ですが、縦になってしまいますので、横並びにするにはカスタマイズする必要です。

affinger-customize1-4

 

affingerをカスタマイズして記事幅を広げる

style.cssで幅を1100pxに変更

本来レクタングルになる筈なのですが、affingerは記事幅がデフォルトでは980になっています。
最近の流行の横幅広めのテンプレートなのですが、これだと幅が足りないので縦長の2つになってしまいます。

これをいじります。

まずは「外観」の「テンプレート編集」からスタイルシート『style.css』を変更します。

affinger-customize1-1

「max-width: 980px;」を「max-width: 1100px;」にしましょう。

「レイアウト スマートフォン」をコピペして任意の位置を探してください。

【変更前】

/*レイアウト スマートフォン
----------------------------------------------------*/
#wrapper {
    max-width: 980px;
    padding: 0 15px;
    margin: 0 auto;
    background-color: #fff;
}

【変更後】

/*レイアウト スマートフォン
----------------------------------------------------*/
#wrapper {
    max-width: 1100px;
    padding: 0 15px;
    margin: 0 auto;
    background-color: #fff;
}

 

single.phpで幅を1100pxに変更

これだけだと上手く変更してくれませんので、single.php(単一記事の投稿)を変更します。

affinger-customize1-2

目印は『アドセンス読み込み』です。

【変更前】

<div style="padding:20px 0px;">
<?php get_template_part( 'ad' ); //アドセンス読み込み ?>
<?php if ( st_is_mobile() ) { //スマホの場合 ?>
<?php } else { //PCの場合 ?>
<div class="smanone" style="padding-top:10px;">
<?php get_template_part( 'ad' ); //アドセンス読み込み ?>
</div>
<?php } ?>

【変更後】

<div class="clearfix" style="margin-bottom:20px;">
<center><script>document.write('スポンサードリンク');</script></center>
<?php if(st_is_mobile()) { //モバイルの場合 ?>
<?php } else { //PCの場合 ?>
<div id="adsense-bottom">
<div id="adsense-left">
<?php get_template_part( 'ad' ); //アドセンス読み込み ?>
</div>
<div id="adsense-right">
<?php get_template_part( 'ad' ); //アドセンス読み込み ?>
</div>
</div>
<?php } ?>
</div>

<script>document.write(‘スポンサードリンク’);</script>
はつけましたがウィジェットに追記してあげてもOKです。

 

変更点をstyle.cssに書き込む

横並びに変更させるには、今までの変更をスタイルシート「style.css」に戻って加筆する必要が有ります。

「 /*– ここまで –*/」と書かれている部分の上に、以下の文章を入れてあげます。

以下の文章を追記

/*—————————————————-
アドセンス横並び
—————————————————-*/
#adsense-bottom { padding: 5px 0px; }
#adsense-left { float:left;margin-right:26px;margin-top:8px; }
#adsense-right { margin-top:8px; } 

【変更前】

.pagination .current {
padding: 6px 9px 5px 9px;
color: #fff;
background-color: #CCCCCC;
}

    /*-- ここまで --*/
}

【変更後】

.pagination .current {
padding: 6px 9px 5px 9px;
color: #fff;
background-color: #CCCCCC;
}
 
/*----------------------------------------------------
アドセンス横並び
----------------------------------------------------*/
#adsense-bottom { padding: 5px 0px; }
#adsense-left { float:left;margin-right:26px;margin-top:8px; }
#adsense-right { margin-top:8px; }
 
    /*-- ここまで --*/
}

 

以上で終了です。

このようになりますので確認してみて下さいね。

affinger-customize1-5

 

まとめ

いかがでしたでしょうか?

アドセンス広告は記事下が一番クリック率が高く、affingerを利用するなら最初にカスタマイズしてほしい部分です。

簡単なカスタマイズですので是非どうぞ!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です