初心者でも簡単!WPでSEO対策

無料で利用できるWordPressを使って、SEO初心者でも簡単に検索エンジン上位表示できる情報をお届けします。

無料テンプレ【AFFINGER】記事下広告を横並びにする方法

 

SEOに強くアフィリエイトに特化したWordPressの無料テンプレート”AFFINGER”の記事下広告を横並びにする方法です。コピペでも変更できます。参考にどうぞ。

 

スポンサードリンク

AFFINGERはデフォルトでは、記事下広告が縦にならびます。

スマホでは1つだけ表示されるようになっているので問題ありませんが、パソコンで2つ表示されるのにもったいない…というわけで、記事下記事を横並びにして続きを読む下にAdSense780pxの広告も表示されるように設定変更しちゃいました。

AFFINGER記事下広告の横並び
 

ENJIさんごめんなさいw

注意事項

テーマファイルを改変しますので、失敗するとサイトが表示されなくなる可能性があります。

失敗してもすぐに戻せるように、必ずファイルのバックアップを取っておきましょう。

▼バックアップに必要なファイル

  • style.css
  • single.php

環境によってうまくいかない可能性がないとは言い切れませんので、自己責任でお願いします。

▼この記事の環境

  • WordPress 4.5.1-ja
  • STINGER 5、AFFINGER
  • Google Chrom

サイトの幅を広げる

最初に横に並べれる広告スペースを作るため横幅を広げます。

サイト全体の幅を広げる

WordPressの管理画面で[外観]→[テーマの編集]の順に進みます。

外観-テーマの編集(スタイルシート)画面
 
 

テーマの編集のスタイルシート (style.css)編集画面で、レイアウト スマートフォン#wrappermax-widthの値を変更します。

AFFINGER記事下広告横並びCSS編集1
 
 

元のサイズは980pxです。このサイズ+63px=1043px)以上にすると横並びのスペースはできます。

 

今回は、記事の続きを読む(moreタグ)下に、AdSense780pxが表示できるようにしたいので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;
}
 
 

#wrapperpaddingも変更しておきましょう。

/*レイアウト スマートフォン
----------------------------------------------------*/
#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サイズ#wrapperpaddingの値を変更します。

AFFINGER記事下広告横並び設定2
 
 
	#wrapper {
		padding: 0 40px;
	}

↓変更後

	#wrapper {
		padding: 0 20px;
	}
 
 

media Queries PCサイズmainmargin-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)]をクリック。

AFFINGER記事下広告横並び設定/単一記事のソース編集
 
 

下記3種類のコードを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' ); //ソーシャルボタン読み込み ?>
 

以上で完了です。

各値は、レイアウトを見ながらお好みの値に変更してください。

 

これで、パソコンのブラウザで見た場合の記事下広告が横並びに表示されるようになりました。

めでたしめでたし。

   
 

 - SEO カスタムテンプレ, SEO 内部対策, WordPressカスタマイズ, アクセスアップ術 , , , , , , , , , , , , , , , , , , , , , , , , , , , ,