【STINGER5】記事下にダブルレクタングルを貼る方法

2022 3/06

2015年6月6日 2022年3月6日

こんにちは。今話題の？ダブルレクタングルに挑戦してみました。

当サイトは開始して間もないので、広告の設置はある程度アクセスが上がってからでもいいとは思いますがブログのレイアウトや形からカタチ作っていくというのは大事な事なのでとりあえずやってみます。

ダブルレクタングルとは？

Googleアドセンスの広告を記事下にﾀﾞﾌﾞﾙで横並びに貼るという方法があります。これをダブルレクタングルと呼びます。

今回WordPressの人気テーマSTINGER5でこのダブルレクタングルを記事下に実際貼ったので公開したいと思います。

▼コチラが完成イメージ

ダブルレクタングルの設置方法

STINGER5の場合まずはページ全体の横幅を広げる必要があります。ということで、早速横幅から変えていきましょう。

デフォルトではページ全体の横幅が「980px」になっているのを「1100px」に変えるという作業になります。

▼WordPressのダッシュボード (管理画面) から「外観」→「テーマの編集」→「style.css」を選択。

改変前

改変後

下までスクロールしレイアウトスマートフォン下、wrapperのmax-widthの部分の「980px」を「1100px」に変えるだけ。「ファイルを更新」をクリックしこちらは完了です。

ちなみにコード位置を探す時にキーボードの「ctrl」+「F」でページ内のコード検索が早くできるのでこれを活用するとだいぶ楽です。

ダブルレタングルのアドセンスコードを入れる

続いて単一記事の投稿(single.php)をクリックし移動コチラを改変する。ちなみに記事下へダブルレクタングルを入れる場合規約違反に該当しないためには「スポンサーリンク」もしくは「広告」のテキストを忘れずに入れましょう。

ちなみにアドセンスコードは閲覧時に読み込みが早いというので「非同期」がおすすめです。

改変前

改変後

▼コピペ用コード

<div class=”=clearfix” style=”margin-bottom:20px;”>
<script>document.write(‘<p style=”margin:0; text-align: center;”>スポンサーリンク<p>’);</script>
<?php if(is_mobile()) { //モバイルの場合　?>
<?php } else { //PCの場合 ?>
<div id=”adsense-bottom”>
<div id=”adsense-left”>
<?php get_template_part(‘ad’); //アドセンス読み込み ?>【左側アドセンスコードをここへ貼る】</div>
<div id=”adsense-right”>
<?php get_template_part(‘ad’); //アドセンス読み込み ?>【右側アドセンスコードをここへ貼る】</div>
</div>
<?php } ?>
</div>

これで完了。

と思いきや表示が崩れて縦表示になってしまいました。
STINGER5でダブルレタングルにする場合、どうやらもう一つ設定が必要のようです。CSSに記述します。

▼コチラのコード

div #adsense-kijishita {
padding:5px 0px 5px 0px;
margin-bottom: 30px;
overflow: visible;
}div #adsense-left {
float:left;
padding:0px 5px 0px 0px;
}div #adsense-right {
padding:0px 5px 0px 0px;
}

先ほどのstyle.cssの横幅変更したコードの下へ追記し「ファイルを更新」で完了。