【無料】めちゃオモロくてためになる『ザ・ブロガー~ブログ収益化の教科書~』詳しくはこちらをクリック!

      2015/10/01

【STINGER5カスタマイズ】記事下のアドセンス広告部分を横並びに設置する方法

 
STINGER5通常のアドセンスの配置横並び

この記事を書いている人 - WRITER -

色んな人にブログ運営の事を教えている。得意なのはブログ集客・SNS活用法・SEOライティング。
※このおっさんの取扱注意点:ブログと漫画を描くのが好きで、書けない日が続くとストレスで爆発する。 ⇒詳しいプロフィールはこちら 

JUNICHI

STINGER5のカスタマイズの備忘録として残します。

すでにアドセンス停止事件によって、アドセンスの設置はしていませんが、STINGER5のカスタマイズの履歴として残せたらと思います。

 

今回は、STINGER5という超有名なWordPressのテーマの記事下のGoogleアドセンス広告を、PCで見た時に横並びにする方法を解説します。

変更前と変更後のイメージはこんな感じです

STINGER5は、336px×280pxのサイズのアドセンス広告を記事下に設置すると、勝手に2個縦に並べてくれます。

Beforeとしてはこんな感じのイメージ

STINGER5通常のアドセンスの配置

別にこれの何が悪いっていうのは、そんなにないんだけど、ちょっとアドセンス広告の横の余白が気になるっていう方は多いんじゃないでしょうか。

それを、以下のように横並びにしたいと思います。

 

Afterのイメージ

STINGER5通常のアドセンスの配置横並び

これで、スッキリいい具合に余白スペースが無くなりますよね。

という事で、STINGER5の記事下にGoogleアドセンス用の広告を横並びに設置する手順を解説します。

 

 

【3STEP】STINGER5の記事下のGoogleアドセンス広告を横並びにする手順

順番でいくと、

  • STEP1. 記事の全体の幅を広げる
  • STEP2. 単一記事の投稿(single.php)をいじる
  • STEP3. CSSをいじる

これでいけます。

初心者でも簡単にできるので落ち着いて作業をしてみて下さい。

 

STEP1. 記事の全体の幅を広げる

これは、別の記事で詳しく解説しています。

【STINGER5】記事の幅を自由に広げるカスタマイズ方法。超簡単3STEPでできます

こちらの記事に書いてあるように、全体の#wrapperの幅を1100pxまでに広げてみて下さい。

※理由としては、記事本文の幅が初期設定では600pxしかないので、横並びに336pxの幅の広告を置いてしまうとはみ出てしまうからです。

 

 

STEP2. 単一記事の投稿(single.php)をいじる

これはコードをいじりますが、簡単なので落ち着いてやってみて下さい。

↓ 外観>テーマの編集
STINGER記事下広告を横並び1

 

↓ 右の方に「テンプレート」っていうのが見えると思うので、そこをザーッと下に行くと…
STINGER記事下広告を横並び2

 

↓ 「単一記事の投稿(single.php)」があるので、そこをクリック!
STINGER記事下広告を横並び3

 

↓ その中に赤枠の部分のコードがあります。
STINGER記事下広告を横並び4

 

↓ このコードです。

 

このコードを以下のコードに置き換えてあげます。

↓ このコードをコピーして、そのままさっきのコードの所に上書きしてあげて下さい。

 

↓ 置き換えが終わったら、「ファイルの更新」をクリック
STINGER記事下広告を横並び5

 

STEP3. CSSをいじる

あとは、スタイルシートに以下のコードをコピペしてあげればOKです。

↓ 外観>テーマの編集
STINGER記事下広告を横並び1

 

↓ 「テンプレート」を下にいくと…
STINGER記事下広告を横並び2

 

↓ スタイルシートっていうのがあります。それを編集します。
STINGER記事下広告を横並び6

 

↓ 以下のコードをコピーしてください。

 

↓ そして、スタイルシートのファイルの一番下のほうの「/*– ここまで –*/」の直前に貼り付けます。そしてファイルの更新をクリック。
STINGER記事下広告を横並び7

 

※注意

/*– ここまで –*/
}

の「}」は大事なので消さないでね!

 

分かりにくかったら動画解説も置いてます

 

完成!

こんな感じで、しっかりと記事下のGoogleアドセンスが横並びになりました。

STINGER記事下広告を横並び9

おめでとうございます。

 

他にもSTINGER5のカスタマイズの備忘録として、色々書いていこうかなと思います。

⇒STINGER5のカスタマイズ方法一覧へ

今までの僕のブログ集客のノウハウを全部つぎ込んで
しかも無料で配布することにしました。

総ページ100ページ以上の
大ボリュームE-bookです。

是非あなたのブログのお役立てください。

今のうちにゲットしてください。

何やらここでは言えない
『超豪華特典』が付いています。

詳しくはE-bookの最後で。

e-book

運営者JUNICHIについて

プロフィール

株式会社ファンファーレ
代表取締役 松原 潤一

ブログマーケッターのJUNICHIです。
ブログを書いて、人に喜んでもらいながら集客までできてしまう「ブログマーケティング」を専門に扱う会社『株式会社ファンファーレ』の人です。

ほんまはふざけるのが大好き。社長になってもおもろいおっさん目指して頑張ります。

漫画を描くのも大好物。一度きりの人生、自分の「夢」を大切にしたいと思います。

⇒詳しいプロフィールはこちら

ブログ集客と収益化がオンラインで学べる!!
ブログマーケティングスクール

『集客』さえできれば、ほぼどんなビジネスも成功させることができます。

そしてブログは、現在のWEBメディアの中でも、最も強力な『集客メディア』として位置づけられています。

ブログマーケティングスクールでは、コンテンツマーケティング・SEOを意識したWEBマーケティングがオンラインで学べるスクールです。

BMSバナー

ブログマーケッターJUNICHI
×
OPEN CAGEコラボWordPressテーマ

STORK

あなたは今自分のサイトがスマートフォンからどれだけの人が見ているか知っていますか?

実は、2016年6月現在、6割~8割の人がスマホからブログを読んでいます。

なので、スマホから見た時に「分かりやすい」「使いやすい」「便利」というWordPressテーマが必要です。

『新しいスマホビュー時代を作ろう!』

がコンセプトの『STORK(ストーク)』を是非お試しください。