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