WordPressの記事内の任意の場所にアドセンスを追加したいとき、簡単に広告を貼って表示させる2つの方法。
- アドクイックタグで広告コードを出力
- functions.phpに追記して、ショートコードで出力
CSSでアドセンス違反にならないよう調整し、スマホ表示で広告ユニットが はみ出して、グラグラ横揺れしないよう広告サイズを、レスポンシブ対応させました。
- スマホでは300×250
- パソコンでは大のサイズは336×280
広告ユニット数が3個だったのが変わったので、WordPress初心者さんも簡単に広告の配置が記事内でできるので、アドセンスポリシーに準じて設置してくださいね。
広告ユニットの数に関して
広告ユニットの数は上限3つと以前はありました。今はユーザーから見て有益なコンテンツに、ページに見合った数の広告が貼れるという認識に変わってます。
- コンテンツより多い広告は貼らない
- ユーザーに価値ある情報を提供するのが前提
- 価値がないページでの広告配信・多すぎる広告には制限や無効になる場合もある
下記リンクの見出し『適切な広告配置』『価値の高い広告枠』を参考。
参考広告掲載に関するポリシー 広告の配置に関するポリシー｜AdSense ヘルプ
ユーザーの目線で見て、広告貼りすぎ！と感じる場合は制限・無効とされると曖昧な解釈です。過度な広告を設置はいただけない前提で自己責任で設置してください。
記事中にアドセンスを設置で注意する点
アドセンスを導入した際にポリシーを守ることを前提に導入してるので、違反があればアドセンスの停止やアドセンスチームから警告を受ける場合があります。
ムフフな内容、お酒を扱うページなどはNGなのは大前提ですが、広告とコンテンツの違いを明確にするのも大事で、考慮したうえでの設置が必要です。
色々あるので、詳しくは下記リンク先をどうぞ。
LINK恐怖・アドセンスからの警告メール！メッセージが来たときポリシー違反で確認した内容と対処
パソコンだけでなくスマホでの広告表示もチェック
スマホビューでの確認が大事で、画面一面広告だらけになるのもNGですので、テーマで設置している広告とカブらないようプレビューでチェックするなど。ほか色々あるけど、下記も考慮してください。
- スマホでページを表示したとき、スクロールせずに見える範囲には320×100の設置
- 300×250pxの広告ユニットを置く場所はスクロールして初めて見えるトコロに設置。
参考モバイルウェブ向けの最適化 あらゆる端末のユーザーの関心を引き付ける｜AdSense ヘルプ マルチスクリーン対応ガイドライン
スマホ対応させる広告ユニット、レスポンシブの導入
記事中に使うのでスマホ対応を考えて、アドセンスの広告ユニットはレスポンシブにしてCSSでスマホ対応させます。
新たに広告ユニットを追加する場合、AdSenseにログインして広告の設定をクリックして、新しい広告ユニットから導入。
テキスト広告とディスプレイ広告から新しい広告ユニットへ行き自動サイズレスポンシブを選んで保存してコードを取得を選んでください。
名前は『記事中』など、なんでもOK！
これで広告コードをコピーして、貼り付ける準備完了！
WordPress記事内に、広告ユニットを追加する2つの方法
ブログの投稿画面から、広告ユニットを簡単に追加するためにHTMLを追加して、広告を表示させる2つの方法です。
- プラグイン、アドクイックタグを使って追加
アドクイックタグは、装飾したい場所にHTMLタグを簡単に追加できるWordPressのプラグインです。ツイッターのリンクや定型文の挿入も簡単にできるので幅広く便利に使えます。
- メリット
アドセンス用ではないので、定型文など幅広く使える。例えば記事内でよく使う、HTMLタグ（装飾用）やツイッターなどのリンクとか。
- デメリット
装飾や定型文が増えると、探すのが面倒
登録した装飾・定型文が増えたとき
- functions.phpに追記し、記事中アドセンスを貼りたい所に[ad]と書いて追加
ブログの命令ができるファイルfunctions.phpにコードをコピペして反映させると、記事内の好きな場所にショートコード[ad]と書くだけで、HTMLと広告コードを追加しブログで表示させる方法。
- メリット
- [ad]と記事に書くのが簡単
- PC・スマホ機能で自動入力すると、更に簡単
テキストエディタからHTMLを見ても[ad]だけしか表示しないからスッキリ見える
- デメリット
functions.phpに書いてる内容がかぶったり、一文字でも変な文字や空白が入るとエラーが出て管理画面に入れない
はじめにバックアップをとっていればエラーが出ても、すぐ復元できます。よくわからない場合、functions.phpのエラーからの復元や、5秒で復元する方法をチェックしてください。実際は復元に3秒かかりません＾＾
LINK簡易的バックアップ！初心者用WordPressファイル内説明と、5秒で復元する方法
万が一を考えて、復元できる自信がなければアドクイックタグを＾＾
アドクイックタグを使ってHTMLとコードを追加
HTMLのコード内にアドセンスの自動サイズのレスポンシブ広告ユニットを導入するのに、アドクイックタグを使います。
プラグインの導入方法など詳細は下記を参考にしてください。
LINKプラグイン・AddQuicktagの導入と設定、使いかた
導入したら設定よりAddQuicktagをクリック。
クイックタグの追加と削除画面。
- ボタン名に広告やアドセンス・adなど解りやすい・見つけやすい名前を付ける
- 一番右の四角をクリックしてチェックを入れる
- 開始タグにHTMLタグを入れる
開始タグに下記コードを追加
<div class="ad-sp"> <div class="ad-lab">スポンサーリンク</div> <div class="ad-s"> // この1行を消してアドセンスコードscriptを追加 </div> </div>
4行目は削除して、広告コードをいれてください。
- 変更を保存
これで管理画面のビジュアル・テキスト画面のどちらからでも入力できます。※下記はビジュアルエディタ左上のタグの追加画面
ビジュアルエディタはプルダウンで：タグを選択（タグ追加場所）
詳しい使いかたは、AddQuicktagの使いかたをご確認くださいね。次はCSSで装飾するので、CSSが苦手ならチェックしてください。
ショートコード（functions.php）を使ってHTML・広告コードを追加するとき
functions.phpに広告コードと装飾に必要なHTMLタグを記事内で使えるように、ショートコードを追加します。このファイルを触る前は万が一に備えて、バックアップをとると安心。
準備ができたら、WordPressダッシュボードの外観よりテーマの編集をクリックして右側。functions.phpを選択して一番下にコードを追記します。
function code_ad() {
$output = <<< EOF
<div class="ad-sp">
<div class="ad-lab">スポンサーリンク</div>
<div class="ad-s">
// この1行を消してアドセンスコードscriptを追加
</div>
</div>
EOF;
return $output;
}
add_shortcode ( 'ad', 'code_ad' );
復元の準備ができたら、下記を追加して、6行目。
// この1行を消してアドセンスコードscriptを追加
このコメントを削除して、広告コードに差し替えてください。上部に変な数字・おかしな場所に文字・スペースが入ってないか確認してください！
6行目を削除して広告コードを追加
間違いなければファイルを更新。かなり簡単にできましたね＾＾
- 実装方法
記事内のアドセンスを入れたい場所に[ad]といれたらアドセンスが表示されますよ。
テキスト画面も[ad]となっていてシンプル！
記事内に入れたアドセンス（HTML）を装飾する
記事に追加したアドセンスにhtmlタグをつけてるのでCSSで、スポンサーリンクのラベルや広告をセンタリング中央にして設置します。
- センタリングし、上下の余白を考慮
- スマホで横揺れを防ぐよう対応したレスポンシブ化させる
- 幅の狭いスマホ：300×250のサイズを表示
- PC・タブレット：336×280のサイズを表示
CSSでスタイルを決める前に装飾での注意点をご覧くださいね。
アドセンスポリシー違反対策、広告の装飾の注意点
<div class="ad-sp"> <div class="ad-lab">スポンサーリンク</div> <div class="ad-s"> // ～ AdSense広告コード ～ </div> </div>
- 広告のラベルは、スポンサーリンクか広告どちらでもOK
- 上下の余白も大事
- コンテンツ内の段落や画像と、広告の区別をつけるのに必須。
例えばどちらも上下の余白を30pxに指定すると…。
- コンテンツ内段落の余白を広めにとっているサイト
- 段落の余白が狭いサイト
余白が広いサイトは30pxで区別が付きにくいから、アドセンスの警告が来る可能性もある。
LINK恐怖・アドセンスからの警告メール！メッセージが来たときポリシー違反で確認した内容と対処
- 段落p以上の余白を持たせていたら、安心。
ページのバランスを見て、サラっと読み流すユーザー目線で慎重に確認してくださいね。
レスポンシブ広告ユニットで、スマホ・PCでレクタングルの大きさを変更するCSS
レスポンシブ大（横幅336px）を設置すると、幅320pxのスマホビューではみ出して横揺れ（グラグラ）するので、広告ユニットはレスポンシブを使用します。
記事内のHTML（テキストエディタ）にphpコードを書いても反映せず、そのままコードが表示されるので、CSSで対応させるワケです。
/*アドセンスのラベル・広告を囲む領域*/
.ad-sp {
text-align: center; /*センター寄せ*/
margin: 60px 0; /*上下の余白を60・左右は0*/
max-width: 100%; /*コンテンツ幅よりはみ出さない*/
}
/*広告コードの領域・レクタングル300×250で表示*/
.ad-s {
width: 300px;
height: 250px;
margin: 0 auto; /*真ん中に表示*/
}
/*タブレット・PCの指定、レクタングル大で表示*/
@media only screen and (min-width: 768px) {
.ad-s {
width: 336px;
height: 280px;
}
}
アドセンスのポリシーGoogle 広告を紛らわしい方法で掲載することは禁止に違反しないよう、4行目のmargin: 60px 0;の60pxはご自身のサイトをチェックして調整してください。
アドセンスの設置は、ページの作り・人・テーマによって変わる場合もあるので、最終的に自分の目でチェックが必要ってワケです＾＾
アドセンスのコードの改変についてのリンク
自分でアドセンスのコードを変更するには、知識が必要です。して良い事・ダメな事があるので、変更を考えるならまずチェックしてください。
どこに詳しい情報があるか探すのが大変なので、リンクを置いておくのでどうぞ。このページを書くにあたって参考にしたページです。
改変が許可される場合
AdSense コードについて、許可される改変方法は次のとおりです。
レスポンシブ デザイン
新しい非同期広告コードを使用すると、CSS またはメディアクエリ（オプション）を使って、レスポンシブ デザインを採り入れたサイトに合わせて広告のサイズを設定できます。詳しくは、レスポンシブ広告ユニットの使用方法をご覧ください。
自分で広告コードを修正したい場合は、下記を参考にしてください。
LINK広告コードの導入 レスポンシブ広告コードを修正する方法｜AdSense ヘルプ
さいごに
WordPress初心者のとき、広告の設置でやりたいことが出来なかったので、このページを作成しました。
スマホとPCビューの広告ユニットが同じでも、記事中の広告の需要も計測できるので設置と同時に時々チェックしてくださいね。
phpのコードを参考にしたのは、下記の本284ページです。
それでは、かうたっくでした。
Comments