楽ブログ

楽に楽しくやるブログ

スポンサーリンク(レスポンシブ)横長

スポンサーリンク

STINGER PLUS+のウィジェットエリア「広告・Googleアドセンス用336px」の広告をCSSで横並びにする簡単な方法

2016/09/12

広告を横並びに

このブログはWordPressで作ってて、テーマとして「STINGER PLUS+」というのを利用させて頂いてるんですが。

その「STINGER PLUS+」のウィジェットエリアに、「広告・Googleアドセンス用336px」というのがありまして。

そこに336pxのアドセンス広告のウィジェットを入れると、記事の下に縦に2つ並んで表示されるようになっています。

そうすると、その広告の右にスペースが空いて、何かもったいないなーとか思ったりして。

というわけで今回は、そのアドセンス広告をCSSを使って2つ横並びにする方法を記事にしてみます。

「広告・Googleアドセンス用336px」にアドセンスのウィジェットを作る

まずは、ウィジェットの作成のほうから。

管理画面の「外観」の「ウィジェット」で、テキストのウィジェットを「広告・Googleアドセンス用336px」のエリアに放り込みます。

そうして“タイトル”は実際には表示されないので、適当に分かりやすいものを付けまして。

“内容”のほうにアドセンスのコードを記述するんですが、ここでそのスクリプトを<div>のタグで囲ってやって、“ggl-ad”というクラスを付けておくんですね。

これによって、CSSの記述のときに該当部分が特定しやすいようにしてやるわけです。

さらにその下に同様にして、“ggl-ad-title”のクラスで「スポンサーリンク」という表示用のタイトルを付けてやります。

すると、以下のようになります。

<div class="ggl-ad">
<div class="ggl-ad-tilte">スポンサーリンク</div>
ここにアドセンスのスクリプトコード
</div>

これで“保存”ボタンをクリックして保存できたら、ウィジェットの作成は完了です。

ただし、タイトルは要らないという場合は、上から2行目の部分は付けなくてオッケーです。

CSSを記述する

次は、上記で作ったウィジェットが横並びになるようにCSSを記述しますが、変更の対象とするのは「style.css」というファイルです。

このファイルの一番下に、まずは以下のようなコードを追加してやります。

.adbox {
    width: 672px;
    padding: 0;
    overflow: hidden;
}

.ggl-ad {
    width: 336px;
    float: left;
}
.ggl-ad .ggl-ad-tilte {
    font-size: 12px;
    margin-bottom: 4px;
}

ここで最初の黄字の部分は、広告を表示するエリアの横幅を調整しています。

というのも元々このエリアは640pxしか無いので、336pxの広告を横並びにすると入りきらないんですね。

それで無理やり、336×2=672pxまで幅を広げてやるわけです。

無理やりなんで、その分右側のスペースが狭くなって全体のバランスがやや悪くなってしまいますが、その辺を調整するのは少し面倒なんで、今回は目をつぶることとします。

さてその下で、ウィジェット作成のときに追加したクラスの“ggl-ad”の幅を336pxにして“float”を指定していますが、これによって広告が横並びになるんですね。

さらにその下の青字の部分では、同じくウィジェット作成のときに追加したタイトルの文字サイズなどを指定しています。

タイトルを表示しない場合は、もちろんこの青字部分は不要です。

次に、上記で追加したCSSの下に、さらに以下の記述を追加します。

.adbox>.textwidget .ggl-ad {
    padding-top:10px;
}

.adbox div .textwidget .ggl-ad .ggl-ad-tilte {
    visibility: hidden;
}

ここで、前半の黄字の部分は、横並びにした2つの広告の縦位置を調整しています。

というのも、そのままだと右側の広告が10px下に表示されてしまうので、左側の広告を10px下げることによって2つの縦位置を合わせているわけです。

そして後半の青字の部分は、右側の広告のタイトルの表示を消しています。

タイトルが2つ並んでいてもかまわないんですが、同じタイトルが2つあるのもおかしい気がするので、表示されないようにしました。

もとよりタイトルを表示させない場合は、この青字の部分も不要ですね。

以上のコードを追加して、“style.css”を保存したら完了なので、実際に広告が横並びになっているか確認してみましょう。

スポンサーリンク

まとめ

該当の広告を横並びにする方法はいろいろありますが、今回はPHPのファイルを変更しないで、簡単にCSSだけで対応してみました。

左右のバランスが悪くなるのが気になる場合は、記事を表示している部分の全体の幅を広げてやると良いでしょう。

もしくは使用する広告を336pxではなく、300pxにしてやるのも良いかも知れませんね。

それでは、素敵なSTINGERライフを!

記事下アフィリウィジェット


こちらは、WordPressの基礎を勉強したい人におすすめの書籍です。

WordPressレッスンブック HTML5&CSS準拠

著者:エビスコム

amazon

楽天で探す

いちばんやさしいWordPressの教本

人気講師が教える本格Webサイトの作り方 第2版 WordPress 4.x対応

amazon

楽天で探す

楽天モーションウィジェット(600×200)スマホ非表示

-ブログの話
-, ,