SEOに強くアフィリエイトに特化したWordPressの無料テンプレート”AFFINGER”の記事下広告を横並びにする方法です。コピペでも変更できます。参考にどうぞ。
AFFINGERはデフォルトでは、記事下広告が縦にならびます。
スマホでは１つだけ表示されるようになっているので問題ありませんが、パソコンで２つ表示されるのにもったいない...というわけで、記事下記事を横並びにして続きを読む下にAdSense780pxの広告も表示されるように設定変更しちゃいました。
ENJIさんごめんなさいｗ
注意事項
テーマファイルを改変しますので、失敗するとサイトが表示されなくなる可能性があります。
失敗してもすぐに戻せるように、必ずファイルのバックアップを取っておきましょう。
▼バックアップに必要なファイル
- style.css
- single.php
環境によってうまくいかない可能性がないとは言い切れませんので、自己責任でお願いします。
▼この記事の環境
- WordPress 4.5.1-ja
- STINGER 5、AFFINGER
- Google Chrom
※追記：AFFINGERは有料になり、無料ダウンロードは終了したようです。
AFFINGER PACK3（WING対応）
サイトの幅を広げる
最初に横に並べれる広告スペースを作るため横幅を広げます。
サイト全体の幅を広げる
WordPressの管理画面で［外観］→［テーマの編集］の順に進みます。
テーマの編集のスタイルシート (style.css)編集画面で、レイアウト スマートフォンの#wrapperのmax-widthの値を変更します。
元のサイズは980pxです。このサイズ+63px（＝1043px）以上にすると横並びのスペースはできます。
今回は、記事の続きを読む（moreタグ）下に、AdSenseの780pxが表示できるようにしたいので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;
}
#wrapperのpaddingも変更しておきましょう。
/*レイアウト スマートフォン
----------------------------------------------------*/
#wrapper {
max-width: 1100px;
padding: 0 15px;
margin: 0 auto;
background-color: #fff;
}
↓変更後
/*レイアウト スマートフォン
----------------------------------------------------*/
#wrapper {
max-width: 1100px;
padding: 0 10px;
margin: 0 auto;
background-color: #fff;
}
記事表示部分の幅を広げる
media Queries PCサイズの#wrapperのpaddingの値を変更します。
#wrapper {
padding: 0 40px;
}
↓変更後
#wrapper {
padding: 0 20px;
}
media Queries PCサイズのmainのmargin-rightの値を変更します。
main {
margin-right: 320px;
margin-left: 0px;
background-color: #fff;
border-radius: 4px;
padding: 20px 40px 20px 20px;
}
↓変更後
main {
margin-right: 300px;
margin-left: 0px;
background-color: #fff;
border-radius: 4px;
padding: 20px 40px 20px 20px;
}
追加後は必ず［ファイルを更新］をクリックして保存します。
これで記事下広告の横並びのスペースができましたが、このままでは横並びに表示されません。
次は、横並びのためのソース変更をしましょう。
広告の横並び設定
CSSの追加
スタイルシート (style.css)に、下記の横並びレイアウト用のCSSを追加します。
/*--------------------------------
記事下AdSense部分
---------------------------------*/
div #ad-kijishita {
padding:5px 0px 5px 0px;
margin-bottom: 30px;
overflow: visible;
}
div #ad-left {
float:left;
padding:0px 10px 0px 0px;
}
div #ad-right {
padding:0px 0px 0px 0px;
}
#ad-kijishitaの「ad-kijishita」は、お好みの名前で問題ありません。
追加する場所は、最下部の「}」の上に改行してペーストするとよいでしょう。
追加後は必ず［ファイルを更新］をクリックして保存します。
表示ソースの変更
テーマ編集画面の右メニューから［単一記事の投稿 (single.php)］をクリック。
下記３種類のコードをAdSense表示ソースの所定の場所に追加します。
<div id="ad-kijishita">〜</div> <div id="ad-left">〜</div> <div id="ad-right">〜</div>
↓変更前
<aside>
<div style="padding:20px 0px;">
<?php get_template_part( 'ad' ); //アドセンス読み込み ?>
</div>
<?php if ( st_is_mobile() ) { //スマホの場合 ?>
<?php } else { //PCの場合 ?>
<div class="smanone" style="padding-top:0px;">
<?php get_template_part( 'ad' ); //アドセンス読み込み ?>
</div>
<?php } ?>
</div>
<?php get_template_part( 'sns' ); //ソーシャルボタン読み込み ?>
↓変更後
<aside>
<div style="padding:20px 0px;">
<div id="ad-kijishita">
<div id="ad-left">
<?php get_template_part( 'ad' ); //アドセンス読み込み ?>
</div>
<div id="ad-right">
<?php if ( st_is_mobile() ) { //スマホの場合 ?>
<?php } else { //PCの場合 ?>
<div class="smanone" style="padding-top:0px;">
<?php get_template_part( 'ad' ); //アドセンス読み込み ?>
</div>
</div>
<?php } ?>
</div>
</div>
<?php get_template_part( 'sns' ); //ソーシャルボタン読み込み ?>
以上で完了です。
各値は、レイアウトを見ながらお好みの値に変更してください。
これで、パソコンのブラウザで見た場合の記事下広告が横並びに表示されるようになりました。
めでたしめでたし。