読者です 読者をやめる 読者になる 読者になる

a・cha・cha

育児する。

スポンサーリンク




Bloggerの個別記事ページに初心者がアドセンスを貼る方法

はじめに、私はITの知識無いに等しいです。

専門用語も知らないことだらけ。

 

こんな私がどうやってBloggerのPC版・モバイル版、それぞれの個別記事ページ内にアドセンス広告を貼りつけたのか・・・

 

そりゃもう参考になる記事を残して下さっている方々のおかげであることは間違いないんですが、参考記事の投稿時期や自分が使用しているテンプレートにもよって説明と設定画面が違う部分もあったりして、素人の私にはかなり大変な作業でした。

 

それはそれは壮絶なHTMLとの戦いで(^_^;)

いや、まさに自分との戦いですよね。

 

あまりに大変だったので、備忘録として残しておこうということで今回は

 

Bloggerの個別記事ページの記事タイトル下と記事下にアドセンスを貼る場合の手順

 

について書こうと思います。

 

また、私のように、『ブログ初心者だけどBloggerで初心者なりにカスタマイズしながらブログをやっていきたい!』なんて人に、この記事が少しでもお役に立てれば嬉しいです。

 

では、手順を説明していきたいと思います。

 

Googleアドセンスのアカウント取得済み前提。

(Googleアドセンスってナニ??って方は↓コチラ見てみて下さい。以前書いた記事です。)

ブログで収益を得る仕組みと初心者向け無料ブログ

 

まず、私のテンプレートはBlogger既存のシンプルです。(現在ははてなブログに引っ越しています。)

 

今回こちらを参考にさせて頂きました。

Bloggerの記事タイトル下と記事下にもAdSenseを貼ってみた。(Haru's Style)(残念ながらこちらの記事は現在削除されているようです。)

いろいろと見た中で1番わかりやすく書かれていて、おかげでうまくいきました。

 

準備①

既存テンプレートのバックアップを必ずとっておきましょう。

 

HTMLをいじるのでこれ必須です!

 

(私は編集中の失敗で記事の本文が表示されなくなってしまったり、いろいろありましたがバックアップをとっておいたので、すぐやり直すことができました。必要ですよ、バックアップ!!)

 

〜忘れないうちに必ずやっておくべし。〜

 

 

 

管理画面の左側にあるメニューから、テンプレートを選択します。

 

右上の設定マークの隣にある【バックアップ/復元】を選択して、

 

【テンプレートをすべてダウンロード】します。

 

準備②

モバイルテンプレートをデフォルトからカスタムに変更

この後、HTMLを編集するんですが、編集を反映させる為にはモバイルテンプレートの設定をカスタムに変更しておく必要があります。

 

 

テンプレートバックアップをとった画面で、画面中央右側のモバイル表示の下にある設定マークを選択します。

 

 

”モバイルテンプレートを選択”の部分で【カスタム】に変更し【保存】します。

 

 

始めましょう!手順①

テキストメモを活用して貼り付けるコードを準備する

 

では、HTML編集をする前にBlogger用広告コードを準備しましょう。

  

seesaaやFC2、livedoorso-netアドセンス広告を貼った時は、アドセンスで生成したコードをそのまま使用して問題なく貼ることができたのにBloggerではそのまま貼ることができません。

 

『エッ!?』って思いますよね。(^_^;)

  

Blogger専用にコードを変換しないといけないんです。

 

ちょっと弱気になってしまいますよね。

 

しかも、広告には枠線やバーを入れたり、【スポンサード リンク(スポンサーリンク)】などを表記した方が良いので、変換した広告コードだけでは足りません。

 

HTMLの編集に自信のない私は頭ゴチャゴチャになったので、混乱しないように、テキストメモを活用することにしました。

 

テキストメモに

と、それぞれのコードを貼り付ける場所を用意します。(実際は”PC”、”スマホ”と分けただけだけど(^_^;)自分でわかるようにしておけば良いので。)

 

(私はPC版にはレクタングル大、モバイル版にはレクタングル中、と違うサイズの広告を貼りたかったので、上のように項目を分けて用意しました。)

 

手順②

アドセンス広告にスポンサーリンクを表示させるコードを準備

 

まず、用意したテキストメモのそれぞれの場所に下のコードを貼り付けます。

 

<b:if cond='data:blog.pageType == &quot;item&quot;'> <br/><br/><br/><span style='color:#666;margin-bottom:5px;'>スポンサーリンク</span><br/> ここに変換したアドセンスコード </b:if>

 

いろいろ試したんですが、記事タイトル下・記事下のどちらも広告の上に【スポンサーリンク】を表示するタイプだけが広告コード貼り付けに成功したのでこのコードを紹介します。

 

ここに変換したアドセンスコードと書かれた部分に、変換したPC用アドセンスコード・モバイル用アドセンスコードをそれぞれ貼っていくことになります。

 

手順③

アドセンスコードを変換

 

さて、変換です。

 

BloggerのHTMLに追加するアドセンスコードでは、「<」「>」「"」が使えないらしいんです。

 

なので、使えないそれぞれの記号をBloggerで使えるように書き換えなくてはいけないんですね。(実態参照化、またはエンティティ化というらしい。)

 

  • 「<」→&lt;
  • 「>」→&gt;
  • 「"」→&quot;

 

一つ一つ書き換えても良いのですが、面倒くさいので私はHTML2TEXTという変換ツールを使って変換しました。(アドセンスコードの変換に関する記事では結構この変換ツールが紹介されています。)

 

 

 

使い方は簡単なので安心してください。

 

 

まず、上部の【元の文章】と書かれた場所に変換させたいアドセンスコードを貼り付けます。

 

次に、そのすぐ下にある【空白も変換する】のチェックを外します。(※これを忘れたらうまくいきませんでした。)

 

その下の【上から下へ変換↓】を選択します。

 

【変換した文章】の場所に現れたコードをコピーして使用します。

 

この変換作業で、Bloggerで使用できるPC用・モバイル用のアドセンスコードを準備することができます。

 

変換したコードをコピーしたら先ほどテキストに準備した、

 

<b:if cond='data:blog.pageType == &quot;item&quot;'>< br/><br/><br/><span style='color:#666;margin-bottom:5px;'>スポンサーリンク</span><br/> ここに変換したアドセンスコード </b:if>

 

ここに変換したアドセンスコードという部分に変換したアドセンスコードを入れます。

それぞれのコードが準備できたら、いよいよHTML編集です。

 

手順④

HTML編集

 

管理画面左側にあるメニューの【テンプレート】を選択すると、画面中央に現在使用中のPC版・モバイル版のテンプレートのトップ画面が表示されます。

 

PC版の画面の下にある【HTMLの編集】を選択します。

 

 

このような画面になります。

 

⑤-1,記事タイトル下にアドセンスコードを貼る

 

ゴチャゴチャしたコードの中から記事タイトル部分の記述を見つけるには、HTML内検索”Search”を使います。

 

編集画面の中のコードをどこでもよいのでクリックします。

 

次に”CTRLキー”と”F”を同時に押すと、編集画面内の右上に”Search”と書かれた小さな検索窓が現れます。

 

この検索窓にdiv class='post-header-line-1というコードを入力して”ENTER↩”を押すと、HTML内のdiv class='post-header-line-1という記述部分を黄色くマークして教えてくれます。

 

(私の場合、コードを入力して"ENTER↩"したら編集画面は切り替わったのですが、黄色いマークは画面中には現れませんでした。ちょっと画面を下に送ったらすぐ下に黄色いマークのdiv class='post-header-line-1という記述が出てきました。見切れていた感じです。)

 

このdiv class='post-header-line-1という記述は1カ所ではなくて、モバイル用とPC用2カ所あるんです。

 

1カ所目がモバイル用で、2カ所目がPC用です。

 

1カ所目の<div class='post-header-line-1'/>直下に

を貼り付けます。

 

テンプレート保存します。

 

(1カ所貼り付ける度に保存しないと私の場合はエラーになりました。編集する4カ所まとめて保存しようとしていたので何度も何日もやり直して大変でした。(T_T))

 

変更が多いと対応できないのかな。面倒だけど親しみわいちゃう。www

 

ついでにちゃんと広告が表示されているかいちいちチェックしておくと良いですね。

 

検索窓をクリックしてもう1度”ENTER↩”押すと2カ所目のdiv class='post-header-line-1を教えてくれます。

 

2カ所目の<div class='post-header-line-1'/>直下に

を貼り付けます。

 

テンプレート保存&広告表示確認します。

 

⑤-2,記事下にアドセンスコードを貼る

 

HTML内検索窓で記事下の記述data:post.bodyを入力して”ENTER↩”を押します。

 

記事タイトル下と同様、こちらも2カ所出てきます。

 

1カ所目の<data:post.body/>直下に

を貼り付けます。

テンプレート保存&広告表示確認します。

 

2カ所目の<data:post.body/>直下に

を貼り付けます。

 

テンプレート保存&広告表示確認します。

 

お疲れ様でした。

 

PC版・モバイル版、個別記事ページの記事タイトル下と記事下にアドセンスコードを貼る作業は以上でおしまいになります。

 

 

 

無事テンプレートが保存できて表示されていれば大成功!!です。\(^o^)/

 

なぜか一筋縄ではいかない・・・と思いますが何度かチャレンジすると、またなぜかうまくいったりして・・・。不思議なんですが、それがHTMLかなと・・・(^_^;)いやいや、私に知識が無いからでしょ。www

 

とにかくHTMLを編集する前に必ずバックアップをとっておいて下さいね!!

 

ヘトヘトになるし凹むこともあるので、疲れている時はこの作業はオススメできません。(^_^;)

 

うまくいかない時は一旦諦めて、しっかり疲れをとってから再チャレンジしてみてください。