TCDテンプレートIZMにGoogle AdSenseの広告を貼る方法

TCDテンプレートIZMにGoogle AdSenseの広告を貼る方法

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

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

TCDテンプレートIZMにGoogle AdSenseの広告を貼る方法

飼いヌコ
ほう、無料テーマなのに凄いですね!

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

Simplicityで特定の記事やカテゴリだけGoogle AdSenseを非表示にする方法
WordPressの無料テーマ simplicityで 特定の記事やカテゴリだけGoogle AdSenseの広告を非表示にする方法 ...

飼いヌコ
まさに至れり尽くせりですね。

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

飼いヌコ
有料なのに?

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

スポンサーリンク

TCDテンプレートIZMでの広告の設定方法

TCDテンプレートIZM(TCD034)の投稿記事に広告を貼る方法は、ダッシュボードの「外観」➝「TCDテーマオプション」➝「記事ページ」に進んで「記事ページの広告設定1」から設定します。

一応広告を横並び(ダブルレクタングル)に挿入できるようになっているのですが、本文記事最終文の直後ではなく、更に下の関連記事の上に表示されました。

TCDテンプレートIZMにGoogle AdSenseの広告を貼る方法

飼いヌコ
アチャー遠すぎ、これではクリックしてもらえないな~。

追い打ちをかけるように、広告バナーの推奨サイズが300×250となっているので、Google AdSenseのパソコンでのお勧めサイズ336×280のバナーを貼ると、横2列に収まりきれずに縦に2つ並んでしまいます。

TCDテンプレートIZMにGoogle AdSenseの広告を貼る方法

飼いヌコ
これはこれで面白いですねw

縦2列はともかくとして、記事の終わりの直後に広告バナーが表示されないと、なかなかクリックされないのが現実です。

この欠点を補う方法が「記事ページの広告設定2」です。こちらはショートコードになっていて、任意の場所に貼り付けることができます。

TCDテンプレートIZMにGoogle AdSenseの広告を貼る方法

先ほどと同様に、記事の最後にダブルレクタングル広告を挿入します。

TCDテンプレートIZMにGoogle AdSenseの広告を貼る方法

Google AdSenseの336×280のバナーを貼ると相変わらず縦2列になりますが、記事の終わりに広告が表示されました。

TCDテンプレートIZMにGoogle AdSenseの広告を貼る方法

飼いヌコ
おお!ちゃんと記事の終わりに広告が表示されましたね、一件落着ですね。

これでGoogle AdSenseの広告が貼れたと思ったら大間違いです、先程の記事下にダブルレクタングル広告を挿入した記事をスマホで見てみましょう。

TCDテンプレートIZMにGoogle AdSenseの広告を貼る方法

スマホではスクロールせずに見える画面で広告が2つ見えているのは、ポリシー違反になります。

飼いヌコ
 (((( ;゚Д゚)))ガクガクブルブル 

TCDテンプレートのウィジェットはどうなっているの?

当ブログの無料テーマSimplicityは非常に優秀に作成されていて、パソコンとスマホで別々のウィジェットが用意されています。

TCDテンプレートIZMにGoogle AdSenseの広告を貼る方法

飼いヌコ
いう事なしですね!

一方のTCDテンプレートIZMのウィジェットは、パソコンでは投稿記事内に挿入できるといった機能はありません。

TCDテンプレートIZMにGoogle AdSenseの広告を貼る方法

スマホでは投稿記事に広告を貼り付ける事は可能ですが、Simplicityみたいに投稿本文下とかは指定できません。

TCDテンプレートIZMにGoogle AdSenseの広告を貼る方法

TCDテンプレートIZMで投稿本文内に広告を挿入するには、先ほど説明した「TCDテーマオプション」で広告を設定する方法しかありません。しかもパソコンとスマホで別々の広告を表示させる事はできません。

スマホでは、パソコンで表示させたダブルレクタングル広告は縦2列に表示されるので、Google AdSenseのポリシー違反になってしまいます。

Googleアドセンスの広告の効果的な貼り付け位置

WordPressのブログにおけるGoogleアドセンスの理想的な貼り付け方を検索してみると、パソコンでは最初の見出し(h2)の上に336×280のバナーを1つ、投稿記事本文の最後にダブルレクタングルの336×280バナーを貼り付けるのがポピュラーな方法となっています。

TCDテンプレートIZMにGoogle AdSenseの広告を貼る方法

一方スマホでは、最初の見出し(h2)の上と投稿記事本文の最後、更に関連記事の下にレスポンシブバナーを貼ります。

TCDテンプレートIZMにGoogle AdSenseの広告を貼る方法

飼いヌコ
ほう、分かり易いですね。

パソコンとスマホで別々の広告を表示させる方法

今回は広告を挿入する場所は3箇所。1と2はパソコンとスマホで表示内容を変更させるコードを貼り付けていきます。

パソコンスマホ
1 h2上(336×280) h上(レスポンシブ)
2 投稿本文下

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

投稿本文下

(レスポンシブ)

3 関連記事下

(レスポンシブ)

飼いヌコ
難しそうだな~

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

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

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

飼いヌコ
少しでも間違えるとブログが真っ白になる例のアレですね。

次に、パソコンで表示させる広告を[pc][/pc]、スマホで表示させる広告を[sp][/sp]で、それぞれ囲みます。

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

TCDテンプレートIZMにGoogle AdSenseの広告を貼る方法

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

TCDテンプレートIZMにGoogle AdSenseの広告を貼る方法

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

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

TCDテンプレートIZMにGoogle AdSenseの広告を貼る方法

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

TCDテンプレートIZMにGoogle AdSenseの広告を貼る方法

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

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

TCDテンプレートIZMにGoogle AdSenseの広告を貼る方法

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

2.投稿本文下

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

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

TCDテンプレートIZMにGoogle AdSenseの広告を貼る方法

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

TCDテンプレートIZMにGoogle AdSenseの広告を貼る方法

飼いヌコ
旨く行くかな?

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

TCDテンプレートIZMにGoogle AdSenseの広告を貼る方法

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

TCDテンプレートIZMにGoogle AdSenseの広告を貼る方法

飼いヌコ
ヨッシャー 成功!

3.関連記事下

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

飼いヌコ
ガックシ・・・。

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

TCDテンプレートIZMにGoogle AdSenseの広告を貼る方法

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

!? 忘れてた(笑)。

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のコードを貼り付けて保存するだけです。

TCDテンプレートIZMにGoogle AdSenseの広告を貼る方法

また、「Shortcode」にチェックを入れておくと、コードに替わって登録した文字が挿入されます。

TCDテンプレートIZMにGoogle AdSenseの広告を貼る方法

飼いヌコ
ブラボー!

パソコンでは問題なく表示されましたが、スマホで見てみると、Google AdSenseのバナーがはみ出していました。

飼いヌコ
!?

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

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

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

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

飼いヌコ
ホッとしましたわw

まとめ

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

icon-check-square-o function.phpに下記コードを貼り付ける。

icon-check-square-o パソコンでのみ表示させたい広告は[pc][/pc]スマホでのみ表示させたい広告は[sp][/sp]と、それぞでコードを囲む。

h2タグ上のパソコン1つ、スマホ1つの広告の場合

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

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

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

TCDテンプレートIZMにGoogle AdSenseの広告を貼る方法

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

飼いヌコ
お疲れ様でした。

TCD最新テンプレート


IZM(TCD34)関連記事

スポンサーリンク

フォローする

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)