興味あるPCゲームの情報を定期的に投稿しています

【WordPress】Stinger8でアドセンスを綺麗にダブルレクタングル表示させる

投稿日:2017年3月18日 更新日:

Stinger8で記事下にアドセンスをダブルレクタングルで配置しようと一日中奮闘し、一応なんとか形になったので備忘録として置いておきます。

Stinger8の記事欄に300x250pxのGoogle Adsense広告を横並びダブルレクタングルで配置します。336pxが良い方はコンテンツの幅を調整すれば可能です。素人なので半ば無理やりですが、参考になれば。

色んなサイトを回遊しましたが、上手くダブルレクタングルが配置されなかったり、横並びにできてもブラウザを小さくするとレスポンシブ設定で縦にズレてしまったりとかなり難航しました。

Chrome, Firefox, Edge, iPhone Safari, iPhone Dolphinでのみ確認しています。

今回の目的

  • PC表示でレクタングル広告が2つ横並びで綺麗に収まるよう配置させる
  • レスポンシブでブラウザが縮小した時にも縦並びにならないようにする
  • スマホ・タブレットデザインに切り替わった時にも崩れないように調整
  • 縦長に狭くブラウザが縮小された時は広告を1つ消す
  • スマホはモバイル用のレスポンシブ広告を表示する

 

事前準備

FTPでサイトにアクセスし、Stinger8の親フォルダから以下のファイルを子テーマにうつしておきます。

  • single.php (個別投稿)
  • st-ad-on.php

今回CSSのどこをいじるのかサッパリわからなかったためとりあえず親ファイルのstyle.cssの中身をそのまま一旦子テーマのstyle.cssにまるっとコピーしました。

@import url('../stinger8/style.css');

を一番上に書き足すことを忘れずに。

子テーマに書き足しても可能だとは思いますが、いかんせん検証していません。

 

Google Adsenseの設置

ウィジェットの設定 PC用広告

ダッシュボードの外観→ウィジェットを選択します。

広告・Googleアドセンス用336pxにテキストをドラッグ&ドロップして追加します。

テキスト内にGoogle Adsenseで作成した広告ユニット300×250のコードを貼り付けし、保存を押します。

 

ウィジェットの設定 モバイル用広告

広告・Googleアドセンスのスマホ用300pxにテキストをドラッグ&ドロップして追加します。

テキスト内に広告ユニットレスポンシブタイプのコードを貼り付けます。

*レスポンシブですが、336の広告を優先的に表示させる処理をCSSで行います。

<div class="mobile-ad">
広告コード
</div>

のように広告コードのスクリプトを囲ってしまいます。CSSの記述は手順3にて。

max-widthを指定することでレクタングルタイプの広告が表示されやすくなる・・らしい。携帯によって表示サイズが異なると思ったのでこのような処理を行いました。336や300の広告コードを貼るのもありだと思います。

ウィジェットの設定はこれで終わりです。

この状態でPCサイトを閲覧すると広告が記事下に縦並びになっているかと思います。

 

各ファイルへの記述

ご自身のサイトの幅によってレスポンシブのブレークポイントは調整していく必要があります。計算できれば一番正確でいいと思いますが私はいちいち見ながら確認しました。

 

CSSの記述その1

@media only screen and (max-width: 690px) {
.adboxpc2 { /* 690px以下で広告1つ非表示 */
display: none;
}
}

/* Adsense Double Rectangle */

.adwrapper { /* 横並びのフロート解除用のいれもの */
margin:0 auto;
}
.adboxpc1 {
float:left; /* 1つめの広告をフロート */
margin-right: 15px; /* 2つ目の広告と幅を開ける */
}

.mobile-ad /* モバイル用の最大広告長を指定 */
max-width: 336px;
margin: auto;
}

.adclear {
clear: both; /*広告2つ目の回り込み解除 */
}

 

st-ad-on.phpの変更

st-ad-on.phpを開き、以下の部分を記述。PC用の広告2種類にそれぞれクラス指定します。

1つめの広告

<?php } else { //PCの時は336pxサイズを ?> <div class="adboxpc1">
<?php if ( is_active_sidebar( 3 ) && !is_404() ) { ?>
<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 3 ) ) : else : ?>
<?php endif; ?>
<?php } ?>
<?php } ?></div>

<div class=”adboxpc1″></div>で囲む

2つめの広告

<?php } else { //PCの時は336pxサイズを ?> <div class="adboxpc2">
<?php if ( is_active_sidebar( 3 ) && !is_404() ) { ?>
<div>
<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 3 ) ) : else : ?>
<?php endif; ?>
</div style="padding-top:10px;">
<?php } ?>
<?php } ?> </div>

<div class=”adboxpc2″></div>で囲む

1つ目はフロートするように指定。これでダブルレクタングル表示できるようになります。ただしコンテンツの幅をちゃんと調整しないと縦並びです。右側にマージンを15pxとっているので、コンテンツ幅は615pxにします。

横並び表示するためのクラス指定が終わりました。しかしこのままだと2つ目の広告の後に回り込みでレイアウトが崩れます。

 

single.phpの変更

single.phpを開き、この一文を探します。

<?php get_template_part( 'st-ad-on' ); //広告 ?>

 

前後にラッパー、後ろにCSSで指定した回り込み解除タグを書きこみます。

<div class="adwrapper">
<?php get_template_part( 'st-ad-on' ); //広告 ?>
<div class="adclear"></div>
</div>

 

これでレイアウトが崩れなくなると思います。

 

CSSの記述その2

PC用レイアウト

@media print, screen and (min-width: 1010px) {

 #headbox {
 padding: 10px;
 margin:0 auto;
 text-align:left;
 max-width:1000px; /* ヘッダー幅を調整 */
 }

#st-header {
max-width:1000px; /* 幅の調整 */
margin:0 auto 10px;
}

#content {
max-width:1000px; /* コンテンツ幅の調整 */
margin:0 auto;
}

#footer-in {
max-width:1000px; /* フッター幅の調整 */
margin:0 auto;
}

#st-menuwide div.menu,
#st-menuwide nav.menu {
max-width:1010px; /* ヘッダー下メニュー幅の調整 */
}

 .st-main {
 max-width: 620px; /* 記事の最大幅を固定 */
 margin-right: 320px;
 margin-left: 0px;
 background-color: #fff;
 border-radius: 4px;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 padding: 30px 10px 30px 40px;
 }

}

 

細かい数字はウェブサイトを確認しながら微調整してください。変更が確認できない場合はブラウザのキャッシュを削除しましょう。

後は以下のような@mediaのブレークポイントをそれぞれ調整してください。ctrl+Fで@mediaと検索すれば該当箇所が見つかります。ここの分岐用数値は親テーマのstyle.cssでも同じように定義しないと途中でレイアウトが崩れました。

@media only screen and (max-width: 1009px) {
...
}

デフォルトのスティンガーだと、ブラウザが960以下になるとスマホ画面に切り替わり、記事幅がいきなり長くなります。これを一定値に保つため、記事幅を620pxで固定しました。スマホでも620pxをmax-widthとして指定し、後はメディアクエリが切り替わる瞬間を微調整していけばOKです。

とりあえず以上。

Ad

Ad

-Wordpress


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

【WordPress】投稿一覧が見づらい場合の調整方法

    あなたの投稿一覧画面、見づらくないですか? WordPressを使用している際に、ダッシュボードの投稿 …

文字化けバグを直したら9日目にしてAmazonアソシエイトに通った話

このサイトを立ち上げた時に、アマゾンアソシエイトと提携しておけば商品の紹介と写真使えるし楽になるなーと思ってたのですが、なんてこと …

Game Geek