bloggerにアドセンスを挿入する!モバイルテンプレートで上下2カ所入れたい!

今までもブログを運営していて、アドセンスを利用してきました。無料ブログサーブスとしてはseesaaブログを使っていましたが、最近bloggerの無料ブログサービスが良いって良く聞くので、導入してみました!

bloggerはGoogleが提供する無料ブログサービス。Googleが提供しているならアドセンスとも親和性がいいはずと思っては初めて見ました。モバイルテンプレートあるしね。

スポンサーリンク

システム的な事はさっぱりで、気合いブログを更新しているだけの僕に取っては、結構歯ごたえがあったので備忘録としてブログを書いています。

参考にする場合には、バックアップを取る事を強くお勧めしておきますね!

アドセンスを挿入する!

私はアドセンスのアカウント持っています。なのでガジェット機能で簡単に好きな場所に簡単にアドセンスを挿入できるのかと思いきや、その機能はブログを結構運営してからじゃないと使えないみたい。

「エー使えないじゃん」と色々検索していたら、何種類かアドセンスを挿入する方法があるみたい。

【1】レイアウトのガジェットでアドセンスを追加する

一番簡単なのはこれ。レイアウトからサイドバーやらフッターに「HTML/JavaScript」のガジェットを追加して、そこにアドセンスの広告コードを貼付ける方法。

記事中には挿入できないみたいだけど、①タイトルと本文の間、②サイドバー、③フッターにアドセンスを挿入する事が出来ました。これは結構簡単!

今まで記事中にアドセンスを挿入していたから、それが出来ない事はちょっと不満だけど、まあ簡単だからいいかと思っていたんですが、実はこれモバイルテンプレートの方には反映しない。

スマホで見ると、まったアドセンスが反映していない状態。これはいかん!

スポンサーリンク

【2】モバイルテンプレートにアドセンスを挿入(スマホテンプレート)

調べてみると何種類かやりかたがあるみたい。これが、ちょっとだけややこしい。まず一つ目はモバイルテンプレートをカスタムするって奴ですね。記事上と記事下の2カ所に挿入できるみたいですよ。

1)まずはbloggerの編集画面を開いて、テンプレートをクリックする。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-22-12-08-43

2)モバイルのテンプレートの設定ボタンを押す

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-%e2%91%a0

3)で、「はい。携帯端末でモバイルバージョンを表示する」と選択し、「モバイルテンプレートを選択」でカスタムを選択、保存する。

0003 0004

4)今度はテンプレートのブログで使用中の「HMTLで編集」を選びます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-%e2%91%a1

5)表示されたテンプレートいじって行きますが、ここで「CTRL+A」で全文字選択して、「CRTL+C」で全部コピー。メモ帳などに貼付けておきましょう。

 

0009

6)まずは、記事の上にアドセンス広告を入れて行きます。HMTLのどこでもいいのでマウスで選択。「CTRL+F」で「検索ボックス」を出します。

検索ボックスで、<div class=’post-header-line-1’/>をテンプレートから探し出します。2カ所あるので、1個目のすぐ下にアドセンスコードを貼付ましょう。

%e8%a8%98%e4%ba%8b%e4%b8%8a

ここで注意!貼付けるアドセンスの広告コードは実態参照ってやつで、置き換えしないとエラーになるそうです。よくわかんないですよー

「”」→「&quot;」 「<」→「&lt;」  「>」→「&gt;」という様に変換します。変換してくれるサイトがあるので、それを利用すると簡単です。

http://www.htmlescape.net/htmlescape_tool.htm ボックスの横の4つチェックボックスの内「Replace < > “」だけにチェックをいれて、変換しましょう。

7)今度は記事下ですね。先ほどの<div class=’post-header-line-1’/>の下にいれた広告コードのすぐ下の<data:post.body/>を同じ様に検索して探して、その下にアドセンスの広告コードを張ります。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-22-16-43-46

これで、テンプレートを保存を押せばオーケー。スマホで確認すれば、記事の上下に2カ所アドセンスの広告が張られているはずです!

スポンサーリンク