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

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

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

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

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

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

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

Simplicityで特定の記事やカテゴリだけGoogleアドセンスを非表示にする方法
どうも、ごりょんさんです。 今回はWordPressの無料テーマ simplicityで 特定の記事やカテゴリだけGoogleアドセ...

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

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

飼いヌコ
有料なのに?

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

スポンサーリンク

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

今回は広告を挿入する場所は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テンプレートにGoogleアドセンスの広告を貼る方法12

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

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

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

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

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

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

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

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

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

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

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

2.投稿本文下

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

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

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

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

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

飼いヌコ
旨く行くかな?

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

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

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

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

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

3.関連記事下

最後にスマホの3番目の広告ですが、関連記事の下に設置する方法が一般的です。

しかしTCDテンプレートIZMでは、当ブログのテーマSimplicityのように関連記事下に挿入できるスマホ専用のウィジェットがありません。

飼いヌコ
ガックシ・・・

仕方がありませんので更に下にありますカテゴリーの上に挿入する事にします。

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

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

!? 忘れてた(笑)。

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

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

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

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

飼いヌコ
ブラボー!

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

飼いヌコ
!?

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

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

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

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

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

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

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

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

2.パソコンでのみ表示させたい広告は[pc][/pc]、スマホでのみ表示させたい広告は[sp][/sp]とそれぞでコードを囲みます。

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

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

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

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

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

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

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

スポンサーリンク

シェアする

フォローする

コメントをどうぞ

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