【wordpress】stinger5でアドセンスの広告を横並びで表示させる方法

なんか最近wordpressの記事が多すぎるので別のネタを考え中なチャットです。

僕のブログでは元々記事の下の部分の表示されてたgoogleアドセンスの広告が縦に並んでたんですけど、
ぱっと見右側に隙間ができてしまっているのが嫌で横並びしてみました。

やることサマリ

  • stingerでもともと設定しているブログの横幅を広げます。（980px→1080px）
  • 横並びになるようsingel.phpを修正します。
  • 位置を調整します。
  • 横幅広げたことでヘッダー画像の大きさがそのままなので合わせて広げてあげる

では行きます。

※この記事の下に参考にしたURLを貼っておきますので詳しくじっくり理解したいという方はそっち見たほうがいいです。

あと編集する前にしっかり、

1
cp -p single.php single.php.`date -I`

こんな具合にバックアップはしっかり取ってくださいね。絶対だぞ！

wordpressの画面から編集する場合も、ctrl + a で全選択してコピーしてメモ帳かなんかにバックアップ取るように。

 

横幅を広げる（style.css）

style.cssの一番下に下記のコードを追記

CSS
1
2
3
4
/*-- アドセンスの広告を横に2つ並べたる --*/
#wrapper {
max-width: 1080px;
}

この後にもう一度 style.cssを編集することになるのですが便宜上分けたほうがわかりやすいので。
※#wrapperはstyle.cssの上の行にも記載されていますが、cssは下に書かれているものが優先されるので大丈夫です。

この状態でページを更新すると横幅が広がっているはずです。

アドセンス広告が横並びにする（single.php）

single.phpのコードをごそっと消してベロっと追記するので注意してください。

1
2
3
4
5
6
7
            <?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 } ?>

を探して消して、

1
2
3
4
5
6
7
8
9
10
11
12
13
            <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の個数とかしっかり確認するように。

 

位置を調整します（style.css）

先ほど編集したstyle.cssをまた編集します。
さっき追記しましたがまた最下行に下記を追加します。

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/* 記事下のラベル（スポンサーリンク表記） */
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; /* ラベルを中央寄せ */
}
}

これで保存してページを開くといい感じに横並びになってるはずです。

 ヘッダー画像を広げる（function.php）

※こいつの編集ミスると画面が真っ白になるなど、重大な障害を発生させますのでくれぐれも慎重に。そしてバックアップ取ってください。

こいつの中に、

PHP
1
2
3
4
5
6
7
8
9
10
11
12
//カスタムヘッダー
$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',
);

という記述があるので★の行を、

PHP
1
2
3
4
5
6
7
8
9
10
11
12
//カスタムヘッダー
$custom_header = array(
'random-default' => false,
'width' => 1080, ★
'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',
);

1080に変えてあげましょう。

これで以上です。

ここ最近の記事に比べるとかなりハードですが、（僕はこの記事残すはとても疲れました笑） こうやって地道にカスタマイズしていくのはなかなか楽しいです。

参考にしたサイト様
http://affiliate150.com/stinger5-side-by-side

※アフィリエイトの為の記事を専門にかかれてますがwordpressのカスタマイズについてすごく参考になる情報ばかりで神サイトとして崇めてます。

今日の一言

なんか前に食べログ的な記事書いたけど1回で終わってしまった1回坊主チャットより。

前書いた食べログ

wordpresswordpress

Posted by chat