Stinger5で記事下のアドセンスを横並び（ダブルレクタングル）にする方法

今回はStinger5の記事下のアドセンスを横並び（ダブルレクタングル）にする方法を紹介していきます。

Stinger系のテーマ以外の場合はやり方が違ってくるので以前書いたこっちの記事を参考に。
⇒アドセンス広告を横並び（ダブルレクタングル）で設置する方法

それからStinger5の広告の位置を変更する場合にはこちらの記事を参考に。
⇒Stinger5で効果的なアドセンス設置方法と位置

アドセンスの横並び自体は簡単なんですが、複数のファイルを編集するので、事前にバックアップしておいて下さいね。

有料だけど個人的におすすめの商材

⇒初心者のための商標サイト設計図

1 横幅を確認しておこう
2 Stinger5の横幅を変更する
3 単一記事(single.php)を編集する
4 スタイルシートで横並びと位置調整
5 横幅増やしたのでついでにヘッダー画像の調整

横幅を確認しておこう

まず、Stinger5では普通にアドセンスを設置すると記事下に336x280pxのサイズの広告が２つ縦並びに設置されるようになっています（PCの場合ね）。

Stinger5の記事本文の部分（コンテンツ）の横幅はデフォルトで640pxなんですが、左右に40pxずつの余白（padding）が設定してあるので、実際には580pxが記事部分の横幅になっています。

さて、記事下の広告を２つ横に並べようと思うと、１つの広告の横幅が336pxなので、336×2=672px必要になりますよね。ただ、ギリギリだと２つの広告がくっついてしまうので、広告と広告の間の余白も取りたい。

なので、広告間の余白を8px取る事にして記事本文の領域（コンテンツ領域）は最低でも672+8px=680pxあればいいという計算になります。これに前述した左右の余白40pxを含めるとコンテンツ領域の必要幅は「760px」。

Stinger5の横幅を変更する

さて、Stinger5の全体の横幅を変更していきますが、その前に重要なので再度おさらい。

アドセンス広告を横並びにするのに必要な「記事部分の横幅」をもう一度確認。

広告2つ分の横幅：672px
並べる２つの広告の間の余白：8px
初期状態で設定されている左右の余白：40×2=80px

これにサイドバーの横幅300pxがあって、記事部分とサイドバーとの余白が20pxあります。これらを全部足してブログ全体の幅を1080pxとする必要があります。

WordPressの管理画面から「外観」⇒「テーマの編集」と進み、スタイルシートを開きます。

スタイルシートに関しては下に書いたもの（後に書いた物）が優先的に反映されるので、次のコードをスタイルシートの一番下に追加して下さい。下に追加して行った方が、変更した場所が分かりやすいので元に戻すのも簡単です。

/* 全体の横幅を広げる */
#wrapper {
	max-width: 1080px;
}

/* 全体の横幅を広げる */

#wrapper {

max-width: 1080px;

}

サイドバーや余白の部分などは固定されているので、全体の幅を広げる事で、記事領域の横幅が増えます。という訳でスタイルシートはひとまず終了。また後でコードを追加しますよ。

単一記事(single.php)を編集する

サイトの横幅は広げたので今度は広告を横並びにするためのカスタマイズをしていきます。

テーマの編集から「単一記事の投稿 (single.php)」を選択して次の記述を探します。

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

<?php get_template_part('ad'); //アドセンス読み込み ?>

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

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

<?php get_template_part('ad'); //アドセンス読み込み ?>

</div>

<?php } ?>

</div>

この上記の記述を一度全部削除ね。

削除した部分に次のコードを追加します。

<div style="padding:20px 0px;">
<p class="bottom-label">スポンサーリンク</p>
<?php if(is_mobile()) { //モバイルの場合 ?>
<?php get_template_part('ad'); //アドセンス読み込み ?>
<?php } else { //PCの場合 ?>
<div class="ad-box">
<div class="ad-left">
<?php get_template_part('ad'); //アドセンス読み込み ?>             
</div>
<div class="ad-right">
<?php get_template_part('ad'); //アドセンス読み込み ?>
</div>
</div>
<?php } ?>
</div>

<p class="bottom-label">スポンサーリンク</p>

<?php if(is_mobile()) { //モバイルの場合 ?>

<?php get_template_part('ad'); //アドセンス読み込み ?>

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

<?php get_template_part('ad'); //アドセンス読み込み ?>

</div>

<?php get_template_part('ad'); //アドセンス読み込み ?>

</div>

<?php } ?>

</div>

アドセンスの広告にはラベル（スポンサーリンクなどの表記）が必要になるので、一応付けておきました。後からスタイルシートで調整できるようにしてあります。また、PCでは２つ。スマートフォンでは１つの広告が表示されるようにしてあります。デフォルトでもそのようになっているけど。

これは前回の記事でも紹介しましたが、スマートフォンではスクロールせずに見える範囲（1ビュー）に貼れるユニット広告は１つだけというルールがあるためです。

コードを差し替えてこのようになるはずです。

ここまでできたら「single.php」の編集は終わり。後は広告を横並びにしてラベルの文字調整をしていきましょう。

スタイルシートで横並びと位置調整

最初に横幅を広げるためにスタイルシートの一番下にコードを追加したよね。それの後にさらにコードを追加していきます。

スタイルシートの一番下に以下を追加して保存。

/* 記事下のラベル（スポンサーリンク表記） */
p.bottom-label {
    color: #000;  /* 文字の色 */
    font-size: 13px; /* 文字の大きさ */
}

/* アドセンス（左） */
.ad-left {
  float:left;  /* 左に回り込み */
  margin-right:8px;  /* 右の広告との間隔 */
}

/* アドセンス（右） */
.ad-right {
  float:left;  /* これも左に寄せる */
}

/* 回り込み（float）解除の記述たち */
.ad-box:after {
  content:"";
  display:block;
  clear:both;
}

/* 記事下のラベル（スポンサーリンク表記） */

p.bottom-label {

color: #000; /* 文字の色 */

font-size: 13px; /* 文字の大きさ */

}

/* アドセンス（左） */

.ad-left {

float:left; /* 左に回り込み */

margin-right:8px; /* 右の広告との間隔 */

}

/* アドセンス（右） */

.ad-right {

float:left; /* これも左に寄せる */

}

/* 回り込み（float）解除の記述たち */

.ad-box:after {

content:"";

display:block;

clear:both;

}

ここまで追加して下さい。さらにラベル（スポンサーリンクなどの表記）は広告が横並びになる場合だけ中央に寄せたいので、次の記述もスタイルシートに追加。後でちょっと説明するよ。

/* 記事下広告のラベル（PCではラベルを中央に） */
@media only screen and (min-width: 780px) {
p.bottom-label {
  text-align:center; /* ラベルを中央寄せ */
}
}

/* 記事下広告のラベル（PCではラベルを中央に） */

@media only screen and (min-width: 780px) {

p.bottom-label {

text-align:center; /* ラベルを中央寄せ */

}

最後に「 } 」が２つあるのでお忘れなく。

この部分をちょっと補足しておくと、通常スマートフォンやタブレットの縦画面では780px以下のブラウザサイズになるので、必然的に広告は「縦並び」に戻るようになっています。横幅が足りないので。

広告が２つ横並びになるのはPCの場合やタブレットを横に回転させた時に２つ横並びになるかな。それ以外は縦並び。

なので、横並びになる場合だけラベルは中央に寄せるというコードを条件分岐して追加したという訳です。ラベルは中央に寄せる必要無い場合は削除してもOK。

以上でスタイルシートの編集は終了。サイトを表示させて「Ctrl」と「F5」を押してリロードしてから確認してみてね！

横幅増やしたのでついでにヘッダー画像の調整

サイト全体の横幅を変更した都合でヘッダー画像のサイズがちょっと足りなくなっていると思うので、これも一応調整しておきましょう。

Stinger5の親テーマの「functions.php」を選択（子テーマではないよ）。functions.phpは記述を間違えるとブログが真っ白になったりするので慎重に。真っ白になってもFTPで再度編集したら元に戻りますが。

テーマのための関数functions.phpから次の記述を探します。

//カスタムヘッダー
$custom_header = array(
 'random-default' => false,
 'width' => 980,
 'height' => 250,
 'flex-height' => true,
 'flex-width' => false,
 'default-text-color' => '',
 'header-text' => false,
 'uploads' => true,
 'default-image' => get_template_directory_uri() . '/images/stinger5.png',
);
add_theme_support( 'custom-header', $custom_header );