WordPress有料テンプレートのIZM(tcd034)にGoogleアドセンスの広告を貼り付ける方法を解説します。
当ブログの無料テーマSimplicityでは、パソコンとスマホで別々のウィジェットがあるので、簡単にアドセンスの広告挿入が可能です。
おまけに特定の記事やカテゴリーで、アドセンスの広告を非表示にする事も出来ます。
しかしTCDテンプレートIZM(TCD034)にはそういった機能はありません。
そこで、Google AdSenseをパソコンとスマホで別々に表示させる方法を考えていきたいと思います。
目次
TCDテンプレートIZMでの広告の設定方法
TCDテンプレートIZM(TCD034)の投稿記事に広告を貼る方法は、ダッシュボードの「外観」➝「TCDテーマオプション」➝「記事ページ」に進んで「記事ページの広告設定1」から設定します。
一応広告を横並び(ダブルレクタングル)に挿入できるようになっているのですが、本文記事最終文の直後ではなく、更に下の関連記事の上に表示されました。
追い打ちをかけるように、広告バナーの推奨サイズが300×250となっているので、Google AdSenseのパソコンでのお勧めサイズ336×280のバナーを貼ると、横2列に収まりきれずに縦に2つ並んでしまいます。
縦2列はともかくとして、記事の終わりの直後に広告バナーが表示されないと、なかなかクリックされないのが現実です。
この欠点を補う方法が「記事ページの広告設定2」です。こちらはショートコードになっていて、任意の場所に貼り付けることができます。
先ほどと同様に、記事の最後にダブルレクタングル広告を挿入します。
Google AdSenseの336×280のバナーを貼ると相変わらず縦2列になりますが、記事の終わりに広告が表示されました。
これでGoogle AdSenseの広告が貼れたと思ったら大間違いです、先程の記事下にダブルレクタングル広告を挿入した記事をスマホで見てみましょう。
スマホではスクロールせずに見える画面で広告が2つ見えているのは、ポリシー違反になります。
TCDテンプレートのウィジェットはどうなっているの？
当ブログの無料テーマSimplicityは非常に優秀に作成されていて、パソコンとスマホで別々のウィジェットが用意されています。
一方のTCDテンプレートIZMのウィジェットは、パソコンでは投稿記事内に挿入できるといった機能はありません。
スマホでは投稿記事に広告を貼り付ける事は可能ですが、Simplicityみたいに投稿本文下とかは指定できません。
TCDテンプレートIZMで投稿本文内に広告を挿入するには、先ほど説明した「TCDテーマオプション」で広告を設定する方法しかありません。しかもパソコンとスマホで別々の広告を表示させる事はできません。
スマホでは、パソコンで表示させたダブルレクタングル広告は縦2列に表示されるので、Google AdSenseのポリシー違反になってしまいます。
Googleアドセンスの広告の効果的な貼り付け位置
WordPressのブログにおけるGoogleアドセンスの理想的な貼り付け方を検索してみると、パソコンでは最初の見出し(h2)の上に336×280のバナーを1つ、投稿記事本文の最後にダブルレクタングルの336×280バナーを貼り付けるのがポピュラーな方法となっています。
一方スマホでは、最初の見出し(h2)の上と投稿記事本文の最後、更に関連記事の下にレスポンシブバナーを貼ります。
パソコンとスマホで別々の広告を表示させる方法
今回は広告を挿入する場所は3箇所。1と2はパソコンとスマホで表示内容を変更させるコードを貼り付けていきます。
| パソコン | スマホ | |
|---|---|---|
| 1 | h2上(336×280) | h上(レスポンシブ) |
| 2 | 投稿本文下 ダブルレクタングル(336×280) | 投稿本文下 (レスポンシブ) |
| 3 | 関連記事下 (レスポンシブ) |
1.h2(最初の見出し)上バナー
パソコンには336×280のバナーを、スマホにはレスポンシブバナーを使用していきます。
まず初めに、function.phpに下記のコードを貼り付けます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | //PCでのみ表示するコンテンツ function if_is_pc($atts, $content = null ) { $content = do_shortcode( $content); if(!wp_is_mobile()) { return $content; } } add_shortcode('pc', 'if_is_pc'); //スマートフォン・タブレットでのみ表示するコンテンツ function if_is_sp($atts, $content = null ) { $content = do_shortcode( $content); if(wp_is_mobile()) { return $content; } } add_shortcode('sp', 'if_is_sp'); |
次に、パソコンで表示させる広告を［pc］[/pc]、スマホで表示させる広告を［sp］［/sp］で、それぞれ囲みます。
1 | [pc]パソコン用338×280バナー[/pc] |
1 | [sp]スマホ用レスポンシブバナー[/sp] |
なお、パソコンでは[336×280]
スマホでは[レスポンシブ]
それぞれ別々に表示できれば成功となります。
記事本文の最初の見出し(h2)の上に、それぞれのコードを貼り付けます。
1 2 | [pc]パソコン用338×280バナー[/pc] [sp]スマホ用レスポンシブバナー[/sp] |
実際にパソコンで見てみましょう。
続いてはスマホで見てみましょう。
2.投稿本文下
続いては、ブログの投稿記事の終わりに広告を表示させていきます。パソコンでは336×280のダブルレクタングルを上下に、スマホでは先ほどと同じレスポンシブ広告をそれぞれ表示させます。
ダブルレクタングルのコードは「外観」➝「TCDテーマオプション」の「記事ページの広告設定2」に①Googleアドセンスの広告を貼り付けます。②設定を保存。③ショートコードをコピーします。
先ほどと同じように［pc］［/pc］［sp］［/sp］で囲みます。
1 2 | [pc][s_ad][/pc] [sp]スマホ用レスポンシブバナー[/sp] |
パソコンで表示させてみると、投稿記事の最後に縦2列で表示されました。
スマホで見てみると、こちらはスマホ用のレスポンシブバナーが1つだけ表示されました。
3.関連記事下
最後にスマホの3番目の広告ですが、関連記事の下に設置する方法が一般的です。しかし、TCDテンプレートIZMでは、当ブログのテーマSimplicityのように、関連記事下に挿入できるスマホ専用のウィジェットがありません。
仕方がないので、更に下にある『カテゴリー』の上に挿入する事にします。
!? 忘れてた(笑)。
TCDのテーマでは、特定の記事やカテゴリーだけGoogle AdSenseの広告を非表示する事が出来ませんでした。ウィジェットで広告を導入すれば、すべての投稿ページに広告が表示されてしまいます。この方法は駄目ですね。
当記事のように、文字数が4000字以上とボリュームがあれば、記事中に3枚広告を導入しても違和感はありませんが、レシピブログではせいぜい1000～1500文字程度なので、どんなに多くても広告は2枚が限界ではないでしょうか？
とりあえずスマホの広告は2つに留めておいて、対策を考える事にしました。
最終的には、パソコンのh2上に1枚、記事下に縦2枚。スマホのh2上に1枚、記事下に1枚と、計5枚のGoogle AdSenseを貼ることができました。
新規投稿記事を作成するたびに、コードを作成していては日が暮れてしまうので、2つのコードをあらかじめ登録しておきます。
Post SnippetsでGoogle AdSenseの広告コードを登録する方法
クリック1つで登録したコードを呼び出せる便利なプラグインPost Snippetsを使って、あらかじめGoogle AdSenseの広告コードを登録しておきます。このプラグインは、「プラグインの新規追加」から検索してダウンロードできます。
有効化するとダッシュボードの「設定」に「Post Snippets」が表れるのでクリックして、先ほど作成したGoogle AdSenseのコードを貼り付けて保存するだけです。
また、「Shortcode」にチェックを入れておくと、コードに替わって登録した文字が挿入されます。
パソコンでは問題なく表示されましたが、スマホで見てみると、Google AdSenseのバナーがはみ出していました。
どんな大きさにも対応可能というのがレスポンシブ広告のはずですが、スマホでは大きくはみ出していました。四角い広告が表示されずに細長い広告が表示されて半分はみ出している感じです。
物は考えようで、スマホで表示されるのは大体はレクタングル大(336×280)なので、パソコンで挿入している物と同じ336×280のバナーを挿入してみる事にしました。
最初は『はみ出すかも』と思いましたが、思ったよりもピッタリと収まりました。これなら見た目も良いです。
まとめ
少し複雑だったので、おさらいをしておきます。
function.phpに下記コードを貼り付ける。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | //PCでのみ表示するコンテンツ function if_is_pc($atts, $content = null ) { $content = do_shortcode( $content); if(!wp_is_mobile()) { return $content; } } add_shortcode('pc', 'if_is_pc'); //スマートフォン・タブレットでのみ表示するコンテンツ function if_is_sp($atts, $content = null ) { $content = do_shortcode( $content); if(wp_is_mobile()) { return $content; } } add_shortcode('sp', 'if_is_sp'); |
パソコンでのみ表示させたい広告は［pc］［/pc］スマホでのみ表示させたい広告は［sp］［/sp］と、それぞでコードを囲む。
h2タグ上のパソコン1つ、スマホ1つの広告の場合
1 2 | [pc]パソコン用338×280バナー[/pc] [sp]スマホ用338×280バナー[/sp] |
記事下のパソコンではダブルレクタングル、スマホでは1つの場合。
1 2 | [pc][s_ad][/pc] [sp]スマホ用338×280バナー[/sp] |
パソコンのダブルレクタングルの2つの広告は、「テーマオプション」の「記事ページの広告設定2」であらかじめ登録してショートコード化しておきます。
作成したコードはPost Snippetsに登録しておき、クリック1つでいつでも挿入できる状態にしておきます。
最終的には、Google AdSenseの5つの広告サイズは、全て336×280のレクタングルになりました。理由を挙げると、スマホではレスポンシブバナーにすると、広告がはみ出してしまうという事です。
TCD最新テンプレート
