【WordPress】STINGER8で記事下のアドセンスを横並びにする方法

前回はアドセンスを記事下などに設置しましたが、
記事下のアドセンスは、単に設置した場合、
アドセンスは縦に2つ続いて設置されているはずです。
今回はこれを横並びにする方法を説明します。

横並びにする場合もカスタマイズなので、子テーマを使用しましょう。

Stinger Plus2の場合はこちら
【WordPress】STINGER PLUS2で記事エリア下部の広告を横並びにしたり、スポンサーリンクの文字を表示させる！

横並びにするとアドセンスが上手く表示されない場合は、
こちらを参照ください。

【Google Adsense】アドセンスが表示されない場合の対処法

たまーにコメントでいただくことがあります。それは、アドセンスを横並びにすると、アドセンスが消えた！！ということです。ここで言うアドセンスの広告は、投稿した記事の下にある広告を指しています。なお、使用しているテーマは「stinger8」です。...

plu-plu.net

2018.08.29

新たにレンタルサーバーを選ぶならこれ！

エックスサーバー

• 国内シェアNo.1の高速サーバーなのでストレスフリー！
• 自動バックアップ機能に標準対応で安心運用可能！

気になるポイント！	キャンペーン中に契約すれば.com等のドメインを永久無料で使えます！

WordPressでサイトを運用すると重くなりがちですが、使用しているレンタルサーバーのスペックがあまり良くないと、どんなにWordPress側で高速化をしていても、なかなか高速化の成果が反映されません。サイトの表示スピードが上がらない原因がレンタルサーバーの場合は、エックスサーバーにしてみると改善するかもしれません！ またサーバー等のバックアップを自動で行っているので、安心してサイトの運用をすることができます！ またマルチドメイン、メールアドレスを無制限で使えるというのもうれしいですね。

公式サイトはこちら

記事エリアの幅を広げる！

横並びにする場合は、デフォルトの状態ですと、
記事エリアの幅が狭くて、うまく横並びに表示されません。
そのため、記事エリアの幅を広くしてください。

記事エリアの拡大は以下の記事をご参考ください。

【WordPress】STINGER8で記事エリアの横幅を広げる方法【簡単】（STINGER PLUS2対応）

STINGERのデフォルト状態だと記事エリアの幅が少し狭いとは思いませんか？今回は記事エリアを広げる方法です。今まではいろいろなところを調整しながらやらなければならなかった記事エリアの横幅の変更ですが、STINGER8では簡単に変更すること...

plu-plu.net

2019.02.17

ちなみにこの記事を書いた時点では、
全体の横幅を1200pxに設定しております。

この幅が小さいとうまくいかない場合があるので、
ご注意ください。

ウィジェットでコピペしたコードにclass追加する！

何もしていない状態ですとこんな感じです。

これを横並びにしていきます。

コピペをしたコードをdivで囲みclassを追加します。
追加するのは、記事下なので、
「広告Googleアドセンス用336px」です。

以下のようにします。

<div class="underad">
【コピペしたコード】
</div>

これで準備完了です。

style.cssをいじる

style.cssに以下のコードを入力します。

.underad{
   float:left;
   margin-bottom:25px;
}

これで横並びになったはずですが、
おそらく以下の様に、右の広告が少し下がっているはずです。

このままでは不格好なので、直しましょう。

st-ad-on.phpをいじる

少し下がっているのを直すには、
FTPソフトを使って、親テーマのSTINGER8のファイルから、子テーマに「st-ad-on.php」のファイルを追加しましょう。

<?php
/**
 * 投稿に表示する広告
 */
?>
<div class="adbox">

	<?php if ( st_is_mobile() ) { //スマートフォンの時は300pxサイズを ?>
		<?php if ( is_active_sidebar( 4 ) && !is_404() ) { ?>
			<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 4 ) ) : else : ?>
			<?php endif; ?>
		<?php } ?>
	<?php } else {  //PCの時は336pxサイズを	?>
		<?php if ( is_active_sidebar( 3 ) && !is_404() ) { ?>
			<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 3 ) ) : else : ?>
			<?php endif; ?>
		<?php } ?>
	<?php } ?>

	<?php if ( st_is_mobile() ) { //スマホの場合 ?>

			<?php if ( is_active_sidebar( 9 ) ) { ?>
				<div class="adsbygoogle" style="padding-top:10px;">
					<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 9 ) ) : else : //スマホのみに表示する広告 ?>
					<?php endif; ?>
				</div>
			<?php } ?>

	<?php } else { //PCの場合 ?>

		<?php if ( st_is_mobile() ) { //スマートフォンの時は300pxサイズを ?>
			<?php if ( is_active_sidebar( 4 ) && !is_404() ) { ?>
				<div style="padding-top:10px;">
					<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 4 ) ) : else : ?>
					<?php endif; ?>
				</div>
			<?php } ?>
		<?php } else {  //PCの時は336pxサイズを	?>
			<?php if ( is_active_sidebar( 3 ) && !is_404() ) { ?>
				<div style="padding-top:10px;">
					<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 3 ) ) : else : ?>
					<?php endif; ?>
				</div>
			<?php } ?>
		<?php } ?>

	<?php } ?>
</div>

st-ad-on.phpの下のほうに「PCの時は336pxサイズを」というコメントがあると思います。
その２つ下にある以下の記述を見つけてください。

<div style="padding-top:10px;">

このpadding-topを0pxにするか、styleを消してしまってもよいと思います。

これで、このような感じに、ちゃんと横並びになったはずです。

細かいところは自分の好みになるよう、
カスタマイズをしてください！

「スポンサーリンク」の文字を表示させる方法

2017/7/1追記
コメントをいただいたので、
「スポンサーリンク」の文字を表示させる方法を説明いたします。

文字を表示させる場合は、
子テーマにある「st-ad-on.php」のファイルを編集します。

【<div class=”adbox”>】の下あたりに、
【<p>スポンサーリンク</p>】というコードを追記します。

完成したコードが以下の様になります。

<?php
/**
 * 投稿に表示する広告
 */
?>
<div class="adbox">

<p>スポンサーリンク</p>//こちらを追記します
	<?php if ( st_is_mobile() ) { //スマートフォンの時は300pxサイズを ?>
		<?php if ( is_active_sidebar( 4 ) && !is_404() ) { ?>
			<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 4 ) ) : else : ?>
			<?php endif; ?>
		<?php } ?>
	<?php } else {  //PCの時は336pxサイズを	?>
		<?php if ( is_active_sidebar( 3 ) && !is_404() ) { ?>
			<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 3 ) ) : else : ?>
			<?php endif; ?>
		<?php } ?>
	<?php } ?>

ちなみにスポンサーリンクという文字に関しては、
違う言葉でもいいと思うので、
自分の表示させたい文字に変更してください。

「スポンサーリンク」の文字を中央にする方法

2017/1/21追記
お問い合わせがあったので、中央にする方法を追記します。
「スポンサーリンク」文字を中央にする場合は、
下記のコードをスタイルシートに入力します。

.adbox p{
      text-align: center;
      color:#666;
      margin-bottom:1px;
}

これで中央になったはずです。

何かわからないことなどがありましたら、
お気軽にコメントくださーい！

Stinger8のカスタマイズ記事まとめはこちら！↓

【プログラミング入門最強の味方】STINGER8カスタマイズまとめ

WordPressのテーマStinger8のカスタマイズ記事が増えてきたので、記事を種類別に分類をしてみました。STINGER8は基本的には、最低限の機能しかないまっさらなテーマです。その分非常にカスタマイズがやりやすく、HTMLやCSS、...

plu-plu.net

2018.12.04

コピペも良いですが・・・

テーマによってはカスタマイズなんて必要ないかもしれませんが、HTMLやCSSの知識あるとないとでは、トラブルがあった時に大きく違ってきます。
コピペも便利ですが、専門の本などを併せて使用すると、理解度がぐっと深まりますよ！

私が使用したおすすめの本はこちらです。

HTML5&CSS3デザインブック

ソシム

Amazonの商品レビュー・口コミを見る

Amazon

楽天

Yahoo!ショッピング

HTML&CSSとWebデザインが 1冊できちんと身につく本

技術評論社

Amazonの商品レビュー・口コミを見る

Amazon

楽天

Yahoo!ショッピング