[Ha-Basic] How to display Adsense advertisements in two columns (double rectangle display) below the text of the post

【ha-Basic】投稿本文下へアドセンス広告を2列表示(ダブルレクタングル表示)する方法

公開日: 設定や詳細
Knowledge Base Wordpress ha-Basic テーマ

いろいろなテーマでよくある本文下のアドセンス広告(336×280サイズ)の2列表示。このサイトの本文下にも表示していますが、自動広告や記事内部の広告と比べ一定の効果はあるようです。

高機能なテーマではこの方法がほぼ100%機能としてあることから考えてもやはり効果的な配置だと思います。

が、特にそれらのテーマを使ったり、広告表示用のプラグインなどを使わなくても簡単にこの表示は実現できますので、他のテーマをお使いの方でもやってみてください。調整は必要ですがびっくりするほど簡単ですよ!

※高機能テーマの中には1つ広告コードを設定すると複数の場所に効率よくユニットを複製して貼り付けてくれるものもありますが、特にそうする必要もありません(個別に貼ればいい話)し、逆にそのうちの1つの広告を非表示にするのに苦労する場合もありますので、やりたいことをやりたいところだけやる(変?)というのが一番なんじゃないかと思います。

ちょこっと解説 アドセンスのどの広告が効果的かを簡単に知る方法
貼り付けたアドセンス広告がどの程度クリックされているか?ということについて一番単純に知る方法は、貼り付ける位置に応じて広告を変えることです。

このサイトの本文下に表示しているアドセンス広告は「336280 どっとこむ 記事下」という名前のユニットを作って表示させています。

こうすることで、アドセンスの管理画面を見たときにクリックされた広告の一覧へどのサイトのどの場所のどのサイズの広告がクリックされ、いくらの収益見込みがあるかがはっきり分かります。

小難しいことするよりも、この方法が一番簡単で一番単純で一番一目でわかる方法でしょうね。

ダブルレクタングルってなんぞや??

ご存知かとは思いますが一応解説をしておきます。

ダブルレクタングルというのはこんな感じの表示方法です。




左右同じ画像ですが別々にすることもできます(↑は同じ画像を入れているので同じなだけです)

そしてスマホで見ると左側のものだけが表示される(右は非表示になる)というのを今回は実現させます。

【ha-Basic】投稿記事下に自動表示される関連記事について

テキストエディタで編集が便利になる【ha-Basic】テーマのクイックタグについて

【ha-Basic】ショートコードで簡単に新着記事の一覧が表示できる機能について


【ha-Basic】での適用方法

挿入したい場所へは以下のコードを使います

<div class="dr-ad">
<p style="text-align: center; margin-bottom: 0px;">【スポンサーリンク】</p>
<div class="double-rectangle">
<div class="dr-left"><!– 左のコンテンツ –>
<!– 336280 どっとこむ 本文下 –>
<ins class="adsbygoogle" style="display: inline-block; width: 336px; height: 280px;" data-ad-client="ca-pub-5735219289800650" data-ad-slot="6862162028"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<div class="dr-right"><!– 右のコンテンツ –>
<!– 336280 どっとこむ 本文下 –>
<ins class="adsbygoogle" style="display: inline-block; width: 336px; height: 280px;" data-ad-client="ca-pub-5735219289800650" data-ad-slot="6862162028"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
</div>
<hr class="clear">
</div>

※左(右)のコンテンツと書かれているところの下へ広告コードを貼り付けます(336×280サイズ以外の場合は独自にCSSの調整が必要です)

出来上がったら

  1. SNSのシェアボタン下に広告を表示する場合は本文下ウィジェット(外観→ウィジェットから)へテキストウィジェットを追加して貼り付ける
  2. シェアボタン上(本文の直下)に広告を表示する場合は「外観」→「テーマの編集」から「a-insert-undercontent.php」を開いてコードを張り付ける

のいずれかの方法で挿入すれば、記事下にダブルレクタングルの広告が表示されます。

・・・でも変な表示になってしまうので、「外観」→「テーマの編集」から「a-insert-css.css」を開いて一番下にCSSをコピペして保存します。

/********************* ダブルレクタングルコンテンツ(スマホは左のみ表示) ***********************/
@media (min-width: 768px) {
.dr-ad {
	padding:0px !important;
    display: block;
    margin-bottom: 30px;
}
.double-rectangle {
    display: inline-block;
    width: 100%;
    margin-top: -20px;
}
.dr-left {
    float: left;
	margin-left:15px;
}
.dr-right {
    float: right;
	margin-right:15px;
}
.clear {
	clear:both;
	display:none;
}
}
@media (max-width: 767px) {
.dr-ad {
	padding:0px !important;
    display: block;
    margin-bottom: 30px;
}
.dr-left {
	width:100%;
}
.dr-right {
display:none;
}
.clear {
	clear:both;
	display:none;
}
}

あれ?手順通りにやったのに広告表示がまだおかしい・・・という時はお約束のキャッシュクリアをしてくださいね。

キャッシュのクリア?どうやるの?

キーボードからブラウザのスーパーリロード(キャッシュクリア)をする方法(Windows用)

CSSの編集後すぐに変更が適用されないときに以下の方法で一時保存されている情報をクリアします

  • Google Chrome/Microsoft Internet Exproler/Mozilla Firefox
  • ctrlを押しながらf5
  • Microsoft EDGE
  • F5を押す、またはctrlを押しながらR
  • Apple Safari
  • ctrlを押しながらR

あとがき ダブルレクタングルの表示方法はテーマによってバラバラ

結構この表示方法についてはいろいろなサイトで紹介されていて、半ば双方のサイトの方法を批判し合うような形となっています。

これはテーマによってこの表示コンテンツの前後の表示方法や、テーマ本文の幅などによって必要な要素がまちまちだからで、決して誰の記事が正しいということはありません。

従ってコピペでうまく表示できた場合にはたまたまだと考えた方がいいでしょう。

今回紹介したコードも【ha-Basic】テーマなら有効という方法であって、その他のテーマではうまく表示できないかもしれませんから、CSSの知識がない、htmlの知識がないという方は片っ端からダブルレクタングルについての記事内コードをコピペして一番らしいものを見つけるか、最初からその機能があるテーマにするか、はたまた自身で勉強するか?のいずれかになるでしょう。

このケースでなくても「コピペでって書いてあるからコピペしたのにうまくいかないじゃんか!!」と怒るのはお門違いで、あくまでも著者の環境ではうまくいったということが前提ですから、そこから自身のサイトに適合させる自信のない方はコピペで!を鵜呑みにするのはどうかと思います(ひょっとするとおかしなコードがこっそり挿入されているかも知れませんよ~怖

追記

今回紹介したコードではモバイル表示の場合に左側のコンテンツのみを表示するようにしています。いろいろと調べたところ、アドセンス広告をこの方法で表示させることは規約に違反する(表示するものをCSSでわざと非表示にする)可能性がありますので、本文内などへ今回のコードを使って広告を2列表示させる場合には、左側のみ(コードで言うと上側の部分のみ)にアドセンス広告を設置されることをおすすめします。

なお、この懸念への対応を踏まえ、【ha-Basic】テーマの本文下ウィジェットエリアを「パソコン用」と「モバイル用」に分けることにしました。これでパソコン用にはダブルレクタングルを、モバイル用にはレスポンシブまたはちょうどいい大きさの広告をという風に使い分けることができるようになります。
※バージョン1.1で対応予定です

※こういうことを考えてウィジェットの並びがいろいろ設定してある「Simplicity2」テーマはやっぱりすごいなぁと改めて感じました

おまけ 「スポンサーリンク」っていう表記は必要なの?

今回のコードを紹介する上で悩んだことです。こればっかりはどこかの誰やらの記事を参考にしたり、確証としたりすることは危険なので、公式ヘルプなどで調べました。するとこちらのヘルプでは

AdSense の広告ユニットには、「広告」と「スポンサーリンク」のいずれかのラベルを表示できます。他の種類のラベルは、現時点では許可されません。詳細については、広告のプレースメントに関するポリシーをご覧ください。

すごく曖昧・・・読み取り方によっては他のポリシーから考えても「表示するならこの文字列にして!」ともとれる内容。決して表記しなさいとは書いてないんです。

昔どうだったかはさだかではないですが、確かに最近ではインフィード広告や記事内広告、ひいては自動広告などの機能が追加され、それらで表示される広告には「スポンサーリンク」という表記はありません。

ではいらないの??となるのですが・・・

個人的な見解としては「特に邪魔にならないんだから入れとけば!!」という結論に達しました。

今回紹介するコードを使って広告挿入する方、コード中のタグを消せば「スポンサーリンク」という文字は消すことができますので、ご自身で判断して利用ください(もしも表記を消して何かあっても一切責任は負えません)。

こういうのを「不要」と言い切る記事が散見されますが、すごい自信だなぁ、私もそんな決定的な内容の記事を書くべき?とも思えるのですが、やはり確証のないものは・・・ですね。あるのは前述した曖昧な内容だけなんですから。

ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報