TCDテンプレートIZMにGoogle アドセンスの広告を貼る方法

WordPress有料テンプレートのIZM(tcd034)にGoogleアドセンスの広告を貼り付ける方法 を解説します。

当ブログの無料テーマSimplicity(現在はSANGO)では、パソコンとスマホで別々のウィジェットがあるので、簡単にアドセンスの広告挿入が可能です。

ほう、無料テーマなのに凄いですね！

おまけに特定の記事やカテゴリーで、アドセンスの広告を非表示にする事も出来ます。

まさに至れり尽くせりですね。

しかしTCDテンプレートIZM(TCD034)にはそういった機能はありません。

有料なのに？

そこで、Google アドセンスをパソコンとスマホで別々に表示させる方法を考えていきたいと思います。

TCDテンプレートIZMでの広告の設定方法
TCDテンプレートのウィジェットはどうなっているの？
Googleアドセンスの広告の効果的な貼り付け位置
パソコンとスマホで別々の広告を表示させる方法
Post Snippetsで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(現在はSANGO)は非常に優秀に作成されていて、パソコンとスマホで別々のウィジェットが用意されています。

いう事なしですね！

一方の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		関連記事下 (レスポンシブ)

パソコン

スマホ

h2上(336×280)

h上(レスポンシブ)

投稿本文下

ダブルレクタングル(336×280)

投稿本文下

(レスポンシブ)

① h2(最初の見出し)上バナー

パソコンには336×280のバナーを、スマホにはレスポンシブバナーを使用していきます。

まず初めに、function.phpに下記のコードを貼り付けます。

//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］で、それぞれ囲みます。

[ｐｃ]パソコン用338×280バナー[/ｐｃ]

[sp]スマホ用レスポンシブバナー[/sp]

なお、パソコンでは[336×280]

スマホでは[レスポンシブ]

それぞれ別々に表示できれば成功となります。

記事本文の最初の見出し(h2)の上に、それぞれのコードを貼り付けます。

[ｐｃ]パソコン用338×280バナー[/ｐｃ]
[sp]スマホ用レスポンシブバナー[/sp]

実際にパソコンで見てみましょう。

おお！パソコン用のバナーだけが表示されましたね。

続いてはスマホで見てみましょう。

今度はレスポンシブのバナーだけが表示されていますね、ヨスヨス。

② 投稿本文下

続いては、ブログの投稿記事の終わりに広告を表示させていきます。パソコンでは336×280のダブルレクタングルを上下に、スマホでは先ほどと同じレスポンシブ広告をそれぞれ表示させます。

ダブルレクタングルのコードは「外観」➝「TCDテーマオプション」の「記事ページの広告設定2」に①Googleアドセンスの広告を貼り付けます。②設定を保存。③ショートコードをコピーします。

先ほどと同じように［pc］［/pc］［sp］［/sp］で囲みます。

[ｐｃ][s_ad][/ｐｃ]
[sp]スマホ用レスポンシブバナー[/sp]

旨く行くかな？

パソコンで表示させてみると、投稿記事の最後に縦2列で表示されました。

スマホで見てみると、こちらはスマホ用のレスポンシブバナーが1つだけ表示されました。

ヨッシャー成功！

③ 関連記事下

最後にスマホの3番目の広告ですが、関連記事の下に設置する方法が一般的です。しかし、TCDテンプレートIZMでは、当ブログのテーマSimplicity(現在はSANGO)のように、関連記事下に挿入できるスマホ専用のウィジェットがありません。

ガックシ…。

仕方がないので、更に下にある『カテゴリー』の上に挿入する事にします。

しかしこの方法では、すべての投稿ページのカテゴリ上にGoogle AdSenseの広告が表示されてしまわないですかね？アドセンスを貼りたくないページにまで挿入されてしまいますよ。

!?　忘れてた(笑)。

TCDのテーマでは、特定の記事やカテゴリーだけGoogle AdSenseの広告を非表示する事が出来ませんでした。

ウィジェットで広告を導入すれば、すべての投稿ページに広告が表示されてしまいます。この方法は駄目ですね。

難儀だな～、有料なのに…。

当記事のように、文字数が4,000字以上とボリュームがあれば、記事中に3枚広告を導入しても違和感はありませんが、レシピブログではせいぜい1,000～1,500文字程度なので、どんなに多くても広告は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のバナーがはみ出していました。

！？

どんな大きさにも対応可能というのがレスポンシブ広告のはずですが、スマホでは大きくはみ出していました。四角い広告が表示されずに細長い広告が表示されて半分はみ出している感じです。

それは困りましたね、TCDのテーマはイマイチ使い勝手が悪いですね。

物は考えようで、スマホで表示されるのは大体はレクタングル大(336×280)なので、パソコンで挿入している物と同じ336×280のバナーを挿入してみる事にしました。

最初は『はみ出すかも』と思いましたが、思ったよりもピッタリと収まりました。これなら見た目も良いです。

ホッとしましたわｗ

まとめ

少し複雑だったので、おさらいをしておきます。

function.phpに下記コードを貼り付ける。

//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つの広告の場合

[ｐｃ]パソコン用338×280バナー[/ｐｃ]
[sp]スマホ用338×280バナー[/sp]

記事下のパソコンではダブルレクタングル、スマホでは1つの場合。

[ｐｃ][s_ad][/ｐｃ]
[sp]スマホ用338×280バナー[/sp]

パソコンのダブルレクタングルの2つの広告は、「テーマオプション」の「記事ページの広告設定2」であらかじめ登録してショートコード化しておきます。

作成したコードはPost Snippetsに登録しておき、クリック1つでいつでも挿入できる状態にしておきます。

最終的には、Google AdSenseの5つの広告サイズは、全て336×280のレクタングルになりました。理由を挙げると、スマホではレスポンシブバナーにすると、広告がはみ出してしまうという事です。

お疲れ様でした。

追記：現在ではアドセンスの自動広告が導入可能になっています。

Googleアドセンスの自動広告とは？導入すると収益はアップする？

TCD無料テンプレート

TCD最新テンプレート

IZM関連記事一覧はコチラ