大丈夫、４６歳のほとんど知識のないオッサンでも出来たんだから。
なに？アドセンスの広告を貼ることくらい簡単だと。それを言っちゃ～おしまいよ。
さて、ついにアドセンスの審査が通って我がブログにもアドセンス広告が貼れるようになりました。早速流行りのパターンで『タイトル下』と『記事下に横並びで２個』というのを真似してみたいと思いましたが、これがそう簡単にはいかない。
いろいろ調べてみるとそれに関する記事があったのでいけるかと思っていたのですが、それでも上手くいかない。紆余曲折あって最終的には出来たのでそのまとめを書いてみます。
タイトル下に広告を貼る
広告のサイズは『自動サイズ レスポンシブ』がいいみたいです。
広告タイプは『テキスト広告とディスプレイ広告』が選びました。
カスタムチャンネルと代理広告はデフォルトにしました。
これでコードを取得します。
次に、はてなの「デザイン」ー「カスタマイズ（スパナマーク）」ー「ヘッダ」ー「タイトル下」ここにさきほどのコードを貼り付ければいいのですが、これだと左詰めになってしまいます。
そこで真ん中に寄せる方法を探してみるとこういうのがありました。
<center><span style="font-size:80%">スポンサーリンク</span><br/>
/*自分のアドセンスコードを入れる*/
</center>
ついでに「スポンサーリンク」もついて問題解決です。ありがとうございます。
スポンサーリンク
記事下に横並びで２個広告を貼る
広告のサイズは『336 x 280 レクタングル (大)』がいいようです。
広告タイプは『テキスト広告とディスプレイ広告』を選びました。
カスタムチャンネルと代理広告はデフォルトにしました。
これでコードを取得します。
このときに左右別々に広告ユニットを作っておいて名前をつけておきます。
タイトル下に貼り付けるのと同じように、はてなの「デザイン」ー「カスタマイズ（スパナマーク）」ー「記事」ー「記事上下のカスタマイズ」ー「記事下」なんですが、ここに２個広告を貼ると上下に配置されるらしいです。（ｽﾐﾏｾﾝ未確認です）
あとは、記事下なんですが直下ではなく枠から外れるのでそれも何とかしてみます。
参考にしたのはこのサイトです。
ここで２つの方法を学ぶことができました。ありがとうございます。
その方法ですがこの２つになります。
１） 記事本文の直下にアドセンスを設置する方法
２） アドセンスの2個のレクタングルを横に並べる方法
ただ、これら２つの内容が別々だったので、これを理解するのに時間がかかりました。
２つのコードはこうなっています。
１）記事直下にアドセンスを設置するコード
<div id="my-footer">
※ここにアドセンスのコード貼り付け
</div>
<script>
var myFooter=document.getElementById("my-footer");var temp=myFooter.cloneNode(true);myFooter.parentNode.removeChild(myFooter);document.getElementsByClassName("entry-content")[0].appendChild(temp);
</script>
２）横並びで２個設置するコード
<ul class="doublerec">
<li>
アドセンスのコード1
</li><li>
アドセンスのコード2
</li>
</ul>
これとは別に貼らないといけないモノ（ＣＳＳ）もあるのですが、これは後回し。
では、これを組み合わせるとこうなります。
<div class="entry-footer-html"><div id="my-footer">
<span style="font-size:small;"> スポンサード リンク</span>
<ul class="doublerec"><li>
ここにアドセンスの左のコード
</li><li>
ここにアドセンスの右のコード
</li>
</ul></div>
<script>
var myFooter=document.getElementById("my-footer");var temp=myFooter.cloneNode(true);myFooter.parentNode.removeChild(myFooter);document.getElementsByClassName("entry-content")[0].appendChild(temp);
</script>
上記の<div class="entry-footer-html">については、記事には書いてありませんでしたがサイトのコードを見てみる（マウス左クリックで『ページのソースを表示』で見る）と書いてありましたので従っています。あと<span style="font-size:small;"> スポンサード リンク</span>は『スポンサーリンク』と表示する為のものです。
実際の作業は２つあります。
まず１つ目。
はてなの「デザイン」ー「カスタマイズ（スパナマーク）」ー「記事」ー「記事上下のカスタマイズ」ー「記事下」に上のコードを貼り付けます。さらに、アドセンスで作られた広告コードの左右を貼り付けて、「ここにアドセンスの右のコード」は消します。
スポンサーリンク
最後にもうひとつの作業です。
.doublerec ul {
padding: 0;
margin: 0;
list-style: none;
font-size: 0;
}
.doublerec li{
padding: 0;
margin: 0;
display: inline-block;
}
どうやらこれが広告を横並びにするコードらしいです。
これを貼る場所はここです。
はてなの「デザイン」ー「カスタマイズ（スパナマーク）」ー「デザインＣＳＳ」に貼ります。
これで貼れるはずなんですが、あくまでも自分の成功例なので、実行に当たっては自己判断および自己責任でお願いします。
自分の場合、すでにいくつかのカスタマイズをしていて、コードが複数あり何のコードかわからなくなっていたので結構な時間を要しましたが、これを整理しておくと後になってもてもわかりやすくなります。
コード上に説明を残す方法はこうなります。
ＨＴＭＬなら <!-- 記事直下にするコードここから --> とか書いておく。
ＣＳＳなら /* ↓横並びここから */ とか書いておく。
すると、書いている文章はコード上は表示されるがブログでは表示されません。
参考にさせていただきましたサイトのみなさま、ありがとうございます。
