WordPressでダブルレクタングル広告を設置する方法

 

サイトへの広告の配置方法の一つに“ダブルレクタングル”いう表示方法がある。

 

これはアドセンス広告の広告サイズ、〔300×250〕や〔336×280〕の広告サイズが“レクタングル”と呼ばれているため、それを横並びで表示することから“ダブルレクタングル”と呼ばれることが多い。

 

ダブルレクタングル広告は大抵記事下に配置する。

そのせいか、ダブルレクタングル広告の“クリック率”は高い！

 

 

最近のWordpressのテーマのほとんどは“ダブルレクタングル広告”が簡単に作れるウィジェットが用意されているものが多いが、そうでないテーマは自分で作成しなければならない。

 

今回は、WordPressでダブルレクタングル広告を設置する手順を紹介する。

 

 

 

 

手順と言っても、広告を横並びにするだけなので、ダブルレクタングル広告を表示したいエリアに書き込めるウィジェット（エリア）が備わっているテーマの場合はHTMLとCSSのコーディングだけで事足りる。

ウィジェットに“テキスト”でHTMLを記述し、CSSで装飾してやるだけでいい。

 

ただ、表示を考えている箇所に書き込めるウィジェットが無い場合は、

• 全ページ手動での入力作業を行うか、（絶望的な手間である…）
• 固定ページ・投稿ページのPHPに直接書き込み、一度に全てのページを更新する

という方法がある。

圧倒的に後者の方が簡単だ。

 

次項から、ウィジェットが備わっているケースと、そうでないケースの２パターンで“ダブルレクタングル広告”の設置手順を紹介していく。

 

 

 

 

広告を表示したいエリア（記事下）などに書き込めるウィジェットが備わっている場合は簡単だ。

そのエリアに、“ダブルレクタングル広告”用のHTMLを記述し、CSSで装飾するだけで全ページ一度に設置できる。

 

 

１、WordPress管理画面の〔外観〕→〔ウィジェット〕から広告を表示したいエリアに〔テキスト〕ウィジェットをドラッグする。

 

２、〔テキスト〕ウィジェットの〔テキストエディタ〕（ビジュアルじゃないほう）に、下記のHTMLコードを書き込む。

 

<!--***************************************************************
ダブルレクタングル広告　（ウィジェット直接入力用）
****************************************************************-->
<p class="sponsor-mattari">スポンサーリンク</p>

<div class="rendering2-mattari rendering-smart-mattari-rendering2"> <!--回り込み指定（横並びを解除するためのもの）-->

　　<div class="rendering-left-mattari rendering-smart-mattari-left">
　　　　【左側のアドセンス広告コードを記述】 <!--左側にこの広告を表示する（センタリング）-->
　　</div>

　　<div class="ad-bottom-right rendering-smart-mattari-right">
　　　　【右側のアドセンス広告コードを記述】 <!--右側にこの広告を表示する（センタリング）-->
　　</div>

</div> <!--回り込み指定終わり-->

<!-- /ダブルレクタングル広告　ここまで
**********************************************************************-->

 

※【 】で囲まれている箇所には広告コードが入る

※スマホで観覧した場合、広告が縦に２つ連続で表示されてしまいかっこ悪いので、スマホでの観覧の際は右側の広告が表示されなくなり、左側広告のみが表示されるようになっている

 

３、CSSで広告を横並び表示させる。

WordPressの〔外観〕→〔カスタマイズ〕→〔追加CSS〕で以下のCSSコードを入力する。

 

/*********************************************:
アドセンス記事下ダブルレクタングル広告CSS　（ウィジェット入力用）
***********************************************/

/*スポンサーリンク表示部分CSS*/
.sponsor-mattari {
　　text-align:center; /*センタリング*/
　　margin-top:15px; /*“スポンサーリンク表示部分から上のスペース”*/
}

/*ダブルレンタリング　クリアボス（回り込み解除）*/
.rendering2-mattari {
　　margin-top:20px;　　　　　/*“スポンサーリンクまでの距離”*/
　　margin-bottom:20px;　　　 /*ダブルレンタリング広告の下のスペース*/
}
/*クリアボス（回り込み解除）*/
.rendering2-mattari:after {
　　content:"";　　　　　　　/*広告ユニットの後に、*/
　　display:block; 　　　　　/*ブロック要素で*/
　　clear:both;　　　　　　　/*クリアプロパティを実行する*/
}

/* 広告左 */
.rendering-left-mattari{
　　width: 300px; 　　　　　/*幅の指定*/
　　text-align: center; 　　/*センタリング*/
　　float:left;　　　　　　 /*左寄せに広告配置*/
　　margin-left: 15px; 　　/*ダブルレクタングル広告の左側のスペース*/
　　margin-right: 10px;　 /*ダブルレクタングル広告間のスペース*/
}

/* 広告右 */
.rendering-right-mattari{
width: 300px; 　　　　　　　/*幅の指定*/
text-align: center; 　　　　/*センタリング*/
float:left; 　　　　　　　　/*左の広告の横に左寄せで広告配置*/
margin-right: 15px; 　　　/*ダブルレクタングル広告の右側のスペース*/
}

/*スマホでの観覧用CSS*/
@media screen and (max-width:600px){ /*画面幅600pxまでの端末で適用されるCSS*/
.rendering-smart-mattari-rendering2{
width: 100%; 　　　　/*スマホでの幅の指定幅の指定*/
}
.rendering-smart-mattari-right{
display: none; 　　　/*ダブルレクタングル広告　右側の広告を表示させない*/
}
.rendering-smart-mattari-left{
text-align: center; /*センタリング*/
margin: auto;
}
}

/*********************************************:
/アドセンス記事下ダブルレクタングル広告CSS終わり
***********************************************/

 

※表示させる広告のサイズ、表示させる箇所の幅によって【margin-right】【margin-left】の値は自分で調整する。
今回の例では、640px幅の本文中に幅300pxの広告を２つ横並びに配置する例で作成した。
ダブルレクタングル広告の両サイドに15pxの余白、広告間には10pxのスペースを設けた。
（15px + 300px +10px + 300px + 15px ＝ 640px）

※〔class名〕は99.9%既存のclass名と被ることが無いように〔mattari〕と入れさせてもらった。
ソースを汚されたくない者は、置換して別の記述に変えるのじゃ！笑

 

これで広告を２つ横並びに出来たはずだ。

 

 

 

 

表示したい場所に書き込めるウィジェットが無い場合や、シェアボタンの上や下・記事上など…好きな場所に表示したい場合は、PHPファイルに直接HTMLを書き込む方法が最適だ。

 

WordPressのPHPファイル名は、

• 固定ページ … 〔page.php〕
• 投稿ページ … 〔single.php〕

となっている。

 

固定ページと投稿ページの両方でダブルレクタングル広告を表示したい場合は、両方のファイルに追記する必要がある。

 

追記する場所は、広告を表示したいエリアによって変わる。

例えば記事下のシェアボタンの上に表示したい場合、Wordpressテーマ〔LION BLOG〕テンプレートの場合だと、

 

青枠で囲った箇所に記述すればいい。

 

 

 

１、WordPressの〔外観〕→〔テーマの編集〕からPHP編集画面に入る

 

２、記述するPHPファイルを見つけ出す

• 全ての固定ページに書き込みたい場合は〔page.php〕
• 全ての投稿ページに書き込みたい場合は〔single.php〕
• 全ての固定・投稿ページに書き込みたい場合は〔page.php〕〔single.php〕

 

３、広告を表示したいエリアを見つけ出だし、下記コードを記述する。

 

PHPファイルに記述するコードは以下のコードだ。

※PHPファイル編集時は最善の注意を払って作業しよう！
万が一に備えてバックアップを取っておくと安心できる。

 

<!--***************************************************************
アドセンスダブルレクタングル広告
****************************************************************-->
<!DOCTYPE html>
　　<html>
　　　　<body>
　　　　　　<p class="sponsor-mattari">スポンサーリンク</p>

<?php if (wp_is_mobile()) :?> <!--もし、モバイル端末ページが開かれたら、、、（phpコード）-->

　　　　　　<div class="rendering-smart-mattari"> <!--この広告を表示する。（センタリング）-->
　　　　　　　　【スマートフォン用の広告コードを記述】
　　　　　　</div>

<?php else: ?> <!--それ以外の場合は、、、〔PC表示〕（phpコード）-->

　　　　　　<div class="rendering2-mattari"> <!--回り込み指定（横並びを解除するためのもの）-->

　　　　　　　　<div class="rendering-left-mattari">
　　　　　　　　　　【左側のアドセンス広告コードを記述】 <!--左側にこの広告を表示する（センタリング）-->
　　　　　　　　</div>

　　　　　　　　<div class="ad-bottom-right">
　　　　　　　　　　【右側のアドセンス広告コードを記述】 <!--右側にこの広告を表示する（センタリング）-->
　　　　　　　　</div>

　　　　　　</div> <!--回り込み指定終わり-->

<?php endif; ?> <!--phpコード終わり-->

　　　　</body>
　　</html>
<!--***********************************************************
/アドセンスダブルレクタングル広告ここまで
*************************************************************-->

 

※【 】で囲まれている箇所には広告コードが入る

※PHP内に書き込んだHTML内に、更にPHPコードを書くこともできる。
このサンプルには、
『もし、ページをモバイルで開かれた場合はモバイル用の表示を。そうでない場合はPC用の表示をする』というプログラムが書かれている。

 

４、CSSで広告を横並びにする

WordPressの〔外観〕→〔カスタマイズ〕→〔追加CSS〕で以下のCSSコードを入力する。

 

 

/*********************************************:
アドセンス記事下ダブルレクタングル広告CSS　（php入力用）
***********************************************/

/*スポンサーリンク表示部分CSS*/
.sponsor-mattari {
text-align:center; /*センタリング*/
margin-top:15px; /*“スポンサーリンク表示部分から上のスペース”*/
}

/*ダブルレンタリング　クリアボス（回り込み解除）*/
.rendering2-mattari {
　　margin-top:20px; 　　　　　　/*“スポンサーリンクまでの距離”*/
　　margin-bottom:20px; 　　　　/*ダブルレンタリング広告の下のスペース*/
}
/*クリアボス（回り込み解除）*/
.rendering2-mattari:after {
　　content:"";　　　　　　　　　/*広告ユニットの後に、*/
　　display:block; 　　　　　　　/*ブロック要素で*/
　　clear:both;　　　　　　　　　/*クリアプロパティを実行する*/
}

/* 広告左 */
.rendering-left-mattari{
　　text-align: center; 　　　　/*センタリング*/
　　float:left; 　　　　　　　　/*左寄せに広告配置*/
　　margin-right:15px; 　　　　/*右側の広告とのスペース*/
　　margin-left: 10px; 　　　　/*左側のスペース*/
}

/* 広告右 */
.rendering-right-mattari{
　　text-align: center; 　　　/*センタリング*/
　　float:left; 　　　　　　　/*左の広告の横に左寄せで広告配置*/
　　margin-right: 15px; 　　/*右側のスペース（入力する必要ないが、一応…）*/
}

/*スマホでの観覧用CSS*/
@media screen and (max-width:600px){ /*画面幅600pxまでの端末で適用されるCSS*/
.rendering-smart-mattari{
　　text-align: center; 　　　/*センタリング*/
　　margin-top: 20px; 　　　　/*ダブルレンタリング広告上のスペース*/
　　margin-bottom: 20px; 　　/*ダブルレンタリング広告下のスペース*/
}
}

/*********************************************:
/アドセンス記事下ダブルレクタングル広告CSS終わり
***********************************************/

 

※表示させる広告のサイズ、表示させる箇所の幅によって【margin-right】【margin-left】の値は自分で調整する。
今回の例では、640px幅の本文中に幅300pxの広告を２つ横並びに配置する例で作成した。
ダブルレクタングル広告の両サイドに15pxの余白、広告間には10pxのスペースを設けた。
（15px + 300px +10px + 300px + 15px ＝ 640px）

※先と同様に〔class名〕は99.9%既存のclass名と被ることが無いように〔mattari〕と入れさせてもらった。
このクラス名で被った者とは間違いなく気が合いそうじゃ 笑

 

 

CSSによって広告が横並びで表示されるようになっているはずだ。

そして、スマホで観覧したときには、別に記述した広告が1つだけ表示される。

 

 

 

PHPファイルを編集する必要はあるが、後者の方が圧倒的に自由度が高い！

 

PHPを編集できるようになると本当に便利になる。

今回使用した〔page.php〕〔single.php〕以外にも〔comment.php〕や〔sidebar.php〕などで、コメント欄やサイドバーの編集も可能だ！

 

PHPを本格的に勉強しようとすると少し勇気がいるジャンルだが、浅い知識でも簡単な編集ならできる。

PHP練習用のサイトでも作って練習PHPで遊んでみるのも面白いかもしれない。