ブログカスタマイズ『グーグルアドセンス広告設定』

こんにちは、神の子KIDです。

 

今日はブログのカスタマイズをしました。

 

グーグルアドセンス広告、デフォルトのクイックスタート広告でも充分使いやすいのですが、記事中に広告が入り込むところが気に入らず、頑張ってカスタマイズすることに決めました。

 

PCとスマホで別々に設定しないといけませんがスマホはあまり改善点がみつからなかったので今はとりあえずPCのみ。

 

1.デザイン決め

まずはどこに配置するかを決めないといけないわけですが、これは調べると良さそうなデザインが簡単に見つかりました。

タイトル下に横長の広告1つ

f:id:blog_kid:20170702181647p:plain

 

記事下に広告2つ

f:id:blog_kid:20170702181810p:plain

 

タイトル下はクリックされやすいようですが、邪魔なのであまりスペースを取らないようにしたいと思いました。

 

記事下は読み終わってから見る部分なので、広告があっても邪魔にならない、それどころか興味がある広告があればプラスに働くので重要だと判断しました。

 

2.カスタマイズ方法

デザインを決めたは良いものの、いくら調べてもカスタマイズ方法が見つからないんですよね・・・

 

簡単な流れだけ言えば

 

①広告枠の作成。

②広告コードの貼り付け。

③左右に並べて配置するにはどうやればいいの?

問題は③です。どうやればいいかなかなか分かりませんでした。

 

ということでどこにも情報が見つからなかったので自分でまとめていきます。

 

①広告枠の作成

アドセンスの画面は規約に引っかかりそうなので画像無しでの説明になります。

 

グーグルアドセンスのページを開いて、「広告の設定」→「コンテンツ」→「広告ユニット」→「新しい広告ユニット」の順にクリックします。

 

「タイトル下」等の名前を付けて、推奨設定の中から広告枠のサイズを選びます。

 

私の場合、

「タイトル下」は「ビッグバナー」

「記事下」は「レクダングル(大)」

としました。

 

記事下は同じサイズですが、右と左で別々に名前を付けておいた方が、後から広告枠毎のクリック率を調べたりするときに便利です。

 

名前とサイズ以外の設定はデフォルトのままでOKです。

 

②広告コードの貼り付け

コードを取得したら、張り付けるわけですが、そのまま貼るだけではだめでした。

 

タイトル下の広告枠を張り付ける場所は↓の青い部分です。

f:id:blog_kid:20170702184048p:plain

次に、張り付ける内容は・・・

 

<div id="top-editarea">
<!-- ここに広告コードを貼り付け -->
</div>

 

これをコピペすると良いです。

 

③左右に並べて配置するにはどうやればいいの?

記事下に配置する広告ですが、張り付ける場所は↓の青い部分です。

f:id:blog_kid:20170702184945p:plain

次に、張り付ける内容は・・・

<div id="my-footer1"
  style="float:left;">
<!-- ここに左に表示する広告コードを貼り付け -->
</div>
<script>
var myFooter=document.getElementById("my-footer1");var temp=myFooter.cloneNode(true);myFooter.parentNode.removeChild(myFooter);document.getElementsByClassName("entry-content")[0].appendChild(temp);
</script>
<div id="my-footer2"
  style="float:right;">
<!-- ここに右に表示する広告コードを貼り付け -->
</div>
<script>
var myFooter=document.getElementById("my-footer2");var temp=myFooter.cloneNode(true);myFooter.parentNode.removeChild(myFooter);document.getElementsByClassName("entry-content")[0].appendChild(temp);
</script>


以上です。

dystopia.blog-kid.com