stinger5の記事下にあるアドセンス広告をレクタングルにして、縦並び
から横並びに変更するカスタマイズを紹介しています。
stinger5の記事下にあるレクタングルのアドセンス広告は、デフォルト
では縦に並んでいます。
これだと、なんか余分なスペースが目立ってもったいないのと、あなた
に余計な手間をかけさせます。
なのでこのレクタングルのアドセンス広告を横に配置して、ダブルレク
タングルにしてみました。
stinger5のデフォルトの横幅
Stinger5をパソコンから見た場合、記事部分の横幅は660px、本文は580
pxになっています。
一般的なブログと比べると、狭い設定になっています。
これはこれでとても見やすいんですが、特にダブルレクタングルの広告
配置をする場合、最低でも本文を600px以上にする必要が出てきます。
今回は記事部分の横幅を自由に変更する方法をご紹介します。
記事部分の「main」でなくて「#wrapper」を変えた。
デフォルトでは
ページ全体の幅 980px
記事部分 660px
本文 580px
サイドバー 300px
となっています。
変えるのは「#wrapper」のみ。
記事部分の横幅を自由に変更する時の注意点
１．「style.css」の記述場所はスマホ～ＰＣ共通領域である
「@media only screen and (max-width: 780px){」と記述してる所
より上の領域に記述する。
２．幅を変更する際は、コードを「width」じゃなくて「max-width」を
使用。「width」で指定すると常に同じ幅になってしまい、これも
レスポンシブが崩れます。
３、記事部分の横幅を変更すると、文字数も変わるので過去に書いた記
事のレイアウトが、崩れる場合もあると思います。
記事部分の横幅を広げる
スタイルシート(style.css)を開いてスクロールしていけば、下記コー
ドがあるので見つけます。
[css]
/*レイアウト スマートフォン
—————————————————-*/
#wrapper {
max-width: 980px;
padding: 0 10px;
margin: 0 auto;
}
[/css]
上記コード内の「max-width: 980px;」を「max-width: 1100px;」に変
更する。
私の場合、子テーマに下記コードをスマホ～ＰＣ共通領域に追記した。
[css]
/*———————————-
記事部分の横幅を変更
———————————–*/
#wrapper {
max-width: 1100px;
padding: 0 10px;
margin: 0 auto;
}
[/css]
アドセンス広告を横並びにする
いよいよレクタングルのアドセンス広告をデフォルトの縦並びから、横
並びに変更する作業に入ります。
作業内容としては
１．Google AdSenseからレクタングルコードを入手する。
２．単一記事の投稿 (single.php)にコードを書き換える。
３．スタイルシート(style.css)にコードの追記
４．カスタマイズ後のレイアウトの確認
Google AdSenseからレクタングルコードを入手する
ここからは、既にアドセンスコードを入手できる状態での解説になって
います。
まだの方は、話せば長くなるので割愛させていただきます。「アドセン
ス コード導入ガイド」等で検索してみてください。
まずは、Google AdSenseからレクタングル（大）のコードを２個と、ス
マホ用にレクタングル（中）のコードを１個入手しておきます。
ＰＣ用にレクタングル（大）幅336px ×高さ280px
コード名を仮に、一つ目は「・・・左」二つ目は「・・・右」に登録。
スマホ用にレクタングル（中）幅300px ×高さ250px
単一記事の投稿 (single.php)にコードを書き換える。
ワードプレスの「テーマの編集」内にある「単一記事の投稿 (single.p
hp)」を開きます。
下記コードをスクロールして探します。
[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]
見つけたら下記コードに書き換えます。（上記コードを削除してから下
記コードをコピペする）
くれぐれもバックアップは忘れないように！！！
私の場合、子テーマの方を書き換えた。
[php]
<div style=”padding:20px 0px;”>
<?php if(is_mobile()) { //モバイルの場合 ?>
<script>document.write(‘<p style=”margin:0; text-align: left;”>スポンサーリンク<p>’);</script>
【 スマホで表示させるアドセンスコードを挿入 】
<?php } else { ?>
<div style=”padding:20px 0px;”>
<div id=”adsense-kijishita”>
<script>document.write(‘<p style=”margin:0; text-align: left;”>スポンサーリンク<p>’);</script>
<div id=”adsense-left”>
【 ＰＣで左側に表示させるアドセンスコードを挿入 】
</div>
<div id=”adsense-right”>
【 ＰＣで右側に表示させるアドセンスコードを挿入 】
</div>
<?php } ?>
</div>
[/php]
① 上記コード内にある「【 スマホで表示させるアドセンスコードを
挿入 】」を削除して、「スマホ用のレクタングル（中）」のコー
ドをコピペします。
② 上記コード内にある「【 ＰＣで左側に表示させるアドセンスコー
ドを挿入 】」を削除して、コード名「・・・左」で作成したコー
ドをコピペします。
③ 上記コード内にある「【 ＰＣで右側に表示させるアドセンスコー
ドを挿入 】」を削除して、コード名「・・・右」で作成したコー
ドをコピペします。
私の場合、子テーマの「単一記事の投稿 (single.php)」を書き換えた。
スタイルシート(style.css)にコードの追記
「単一記事の投稿 (single.php)」に書き換えが終わったら、スタイル
シートで装飾します。
スタイルシート(style.css)を開いたら、下記コードを「スマホ～ＰＣ
共通領域」に追記する。
私の場合子テーマに追記した。
[css]
/*———————————-
アドセンス広告を横並びにする
———————————–*/
div #adsense-kijishita {
padding:5px 0px 5px 0px;
margin-bottom: 30px;
overflow: visible;
}
div #adsense-left {
float:left;
margin-right: 10px;
padding:0px 5px 10px 0px;
}
div #adsense-right {
padding:0px 5px 0px 0px;
}
[/css]
カスタマイズ後のレイアウトの確認
スポンサーリンク標記ですが、他のブログでは「センター」を表示させ
るようにしていますが、私は敢えて左にしました。
理由は、すべての端末に対応するか？未確認なので、レイアウトが崩れ
ないように変更した。
「スポンサーリンク」標記をセンターに表示させたい場合は、「単一記
事の投稿 (single.php)」を書き換えたコード内に、「text-align: lef
t;」があるので、すべて「text-align: center;」に変更してください。
恐らくこのカスタマイズを実施したら、マージン等の変更が必要です。
スタイルシート(style.css)に追記したコード内の「padding」や、「ma
rgin」等を変更する必要があると思います。
あなたのブログにあった調整をしてください。
まとめ
このstinger5 記事下アドセンス広告を横並びにしたカスタマイズは、
下記サイトを参考にしました。
アリガトウございます。
STINGER５でアドセンスの配置を記事下ダブルレクタングルに変更して
みました
STINGER5で記事下にダブルレクタングルを貼る方法
最初記事部分の横幅を変更すか、そのままでレクタングル（中）を使っ
てダブルレクタングルにするか、試行錯誤しながらカスタマイズしてき
ました。
記事部分の横幅を変更する事によるレイアウトが崩れるのではないか？
また、レクタングル（中）でもいいのではないか？など悩みました。
結果、上記のカスタマイズをしてもレイアウトの崩れは今のところ発見
していないし、アドセンスの収益が少しでも上がる可能性があると判断
した。
これでアドセンスの収益が上がるか？変わらないかは、これから検証し
ていきたいと思っています。
レクタングル広告 とは
レクタングル広告とは、インターネット広告のうち、サイズが比較的大
きめで正方形に近い形状のことである。300×250ピクセルをレギュラー
サイズとする場合が多い。画像を主体としたインターネット広告は、サイズによってバナー広告や
バッジ広告、スカイスクレイパー広告などに大別される。レクタングル
広告はバッジ広告とスカイスクレイパーの中間ほどのサイズで、300ピ
クセル前後の長方形（rectangle）となっている。
一般的に、レクタングル広告はサイズが大きくて目立ち、縦横比が既存
のテレビなどに近いことなどから、Flashなどを使用した動的コンテン
ツとの相性が比較的よいと言われている。
参考文献 Weblio辞書
コメント