はてなブログの記事内に、アドセンス広告を表示する　－魚を貰うよりも釣り方を学ぶ

こんばんわ。前の記事から読んでくださっている方のために、

少し、知識の共有をしたいと思っています。

めげずに一緒に頑張りましょう＾＾

【↓前の記事】
www.perorincho.work

アドセンス広告を表示する

結局、自動広告が利用できない、

個別の記事に毎回張るのは面倒だ。となると、

ページのHTML部分にいろいろ書き加えて、

毎回広告のURLを自分でコピペしてくれるように

する必要があるんですね。乱暴に言えば。

流れでいうと、テキストファイルとして、

コードを編集して、

はてなぶろぐのデザイン　→　スパナマーク　→　記事　→　記事下

と開いていって、貼り付ける。そして

変更を保存するっていう形になるんですね。

表示するだけなら

表示するだけなら、ざっとコードを探してきて

コピペ！これで足りますね。

正直９９％これでいいと思うんです。

でもね、僕が思うに、こういう風に、

コードに触れるチャンスって、めったにないと思うんですよ。

なので、ただ、コピペしないで、

できる限り、何が書いてあるのか、ちょっと勉強してみようと思ったんです。

魚を貰うよりも釣り方を学ぶ

使い古された言い回しですが、

魚はもらっても、腐る前に食べてしまっておしまいですね。

その後、またおなかが減ってしまう。

しかし、魚を貰うよりも、魚の釣り方を学んでおけば、

いつでも、自分で魚を釣って食べられるんです。

僕は、このコードの分野でもそうなりたい。

いつでも食べたいときにパソコンを食べたいんです。嘘です。

特定の位置に広告を表示する

それでは早速、特定の位置に広告を入れるコードで広く出回っているものを見てみましょう。
ちょっと書いた人がわからないので、引用元を載せられないのが、残念ですが。

引用開始

―広告のコードを張るところ―

</p>
</div>

引用終わり

1行目

前置き

この、スクリプト(csript)っていうのは、日本語にすると、台本とか脚本って訳付けますよね。

コンピューター用語では、おそらく、までの間の指示を

ちゃんとJavascript等の台本通りやってくださいね。ってことなんでしょう。

次に［CDATA［］］となっている部分ですが、

これは、キャラクタ―データの略だそうで、いまいちそういわれてもピンときませんが、

とりあえず、普通のHTMLのルールに縛られないで、ちょっとだけ他の文字とか

プログラムが利用できるというもののようです。

要するに、このCDATAの後ろのかっこの中身は、ちょっとだけ例外的な

動きをするものが入ってますよということなのでしょう。

肝心な中身ですが、

addEventListenerというのは、決まった書き方で、カッコの中の関数が

満たされたときに特定の処理をするという仕組みのようです。

そのあとに、ちょっと見づらくなってくるんですが、

DOMContentLoadedというのは、この後のものの処理を、

読み込みと同時にやりますよ。という指示だとのことです。

つまり、これは、この後に書かれている条件を満たしたことが確認されたら

すぐに、広告のオブジェクトを表示してくださいという指示なんでしょう。

続いて、 function()とあるのは、この後の計算や処理を、

(カラッポ)何物もさしはさまずに、そのまますぐに処理してくださいということなんだそうです。

大事な部分

さて、ここからが大事な部分ですね。

var $target = $('.entry-content > h4');

これは、このあと、対象とする、数えるものが何かを決めて(var)、その数より

目的の数が大きくなる初めての整数ということなのでしょう。

今回だと、h4すなわち、これが、見出しを指すのですが、

この、見出しの数を対象とする、数えるということなんでしょうね。今後。

正しく読めているのか不安なんですが、この＞は、いわゆる大なりで、

見出しの数よりも大きくなる整数ということなんですかね。要素として考えると。

別にこの段階で数字の意味については考えなくていいです。次で役に立つので。

その次がこれです。

$target.eq(0).before($('.insentence-adsense'));

これは、さっき出してきた個数の数字をeq()のかっこの中に入れると出てくる数ということなんでしょう。

そのあとのbeforeは、おそらく、閾値の前。今回でいうなら次の見出しのカウントがされる前のところまでで。

という意味なんでしょうね。

つまり、ここまでの内容を加味してみると、

まず、eq()に0を入れて、『大見出しの数を数えたとき、それが、0個よりも初めて大きくなる地点の、前に、アドセンス広告を即座に表示しなさい。』

ということになるのでしょう。

言い換えればこれは、一つ目の見出しの前、すなわち、リード文下に、広告を表示してください。

ということになりますね。

応用してみる

ながながと小難しい勉強につき合わせて、ごめんなさい。

でも、せっかく学んだのですから、

応用してみましょう。

数える見出しを増やす

まず、初めに、var $target = $('.entry-content > h4');のh4を、　h3,h4,h5,h6'　としてみます。

このh~というのは見出しの大きさを示す表記で数字は１～６までつかえて、

数字が大きくなるほど、見出しが小さくなるそうです。

さっきまでのh4だと、大見出ししか数えませんが、

ほかの数字をいれていくと、もっと小さい見出しも、数えてくれます。

フレームデザイン的に、大見出しがあんまり好きじゃないときなどは、

中見出しばっかり使いたいですよね。

こういう時は、その見出しのサイズに合った数値を入れると、

使っている見出しの大きさに合わせて、広告の位置を決めてくれるようになりますね。

表示する位置を決める

次にもう一つだけ、

$target.eq(0).before($('.insentence-adsense'));とある、行の、

eq()の中の数字を、2や4にしてみましょう。

さっきの法則と同じなので理由は割愛しますが、

この部分の数字が２だと、3つ目の見出しの前に広告が入ります。

同じく、4だと5つ目の見出しの前に広告が入ります。

コピペで、複数の広告を載せる。

ここまでくれば、ほぼ自在に、表示位置を決められますね。

一応の注意点なんですが、僕がやってみた感じとして、

今のパターンで複数の広告を表示しようとすると、

コピペしたままでは、同じ場所に三つの広告が出てきてしまいました。

そこで、いろいろ調べてみた結果、

$target.eq(0).before($('.insentence-adsense'));とあるうちの、

最後の、insentence-adsenseと書かれている部分は、

二つ目以降、insentence-adsense-2といった風に、

「これは、二つ目の広告で、一つ目とは別のものの話をしていますよ」ということを

書いてあげないといけないようです。

なお、このインセンテンスアドセンスというのは、下の方にも出てくるので、

同じ2個目の広告のコード内では、きちんと対応していないといけないようです。

(ちょっといじくってみた感じだと、逆に対応してさえいればほかのことを書いても表示されました。)

<div class="insentence-adsense">　←　このぶぶんです。

最後に

さぁ！もうなんとなく、いけそうな気がしますよね。

とりあえず、

初めの方に載せた引用部分に、

アドセンスさんで作った広告のコードをはめ込んで、

記事下に入れてみましょう。

それがうまいこと表示されたら、あとは、このページでやっているように、

いろいろ書き替えてみると、

楽しいと思います。

…少しはお役に立てましたでしょうか。
最後の方は、意図的に、少し不親切になってます。
コピペすれば、そのまま使えるような状態のものをおいていないので。
でも、たぶんですけど、この記事を最後まで読んでくださった方なら、
いろいろ自分でいじくって表示させた方が、きっと今後のためになるのだと思います。
自分でやってみてうまくいったときめっちゃ嬉しかったので、すいません。同じ気持ちを感じでほしいです。

ぺろりんちょの村長日誌

犬と猫と畑を愛する村長は、愉快な村人を募集中です。