Emporioで記事タイトル下にAdsenseを表示する方法

Emporioで記事タイトル下に広告を出すカスタマイズを初めてやったのは、カンボジアブログだった。

当初サイドと記事の一番下に出していたのだが、記事タイトル下のリンク広告が効果が高いというのを目にして、ちょっと試したくなった。

で、とりあえずタイトル下に出すのはすぐできた。

が、トップページや検索結果画面に並ぶ記事のタイトル下にもずらっと出てしまって、えらく見にくいトップページになってしまった(^_^;)

その後、個別の記事でだけタイトル下に広告を出す方法を見つけ出して、今は問題なくやれている。

やったことは

記事のソース確認
カスタマイズ場所の当たりをつけ、確認
広告コードを貼り付けて確認
トップページと検索結果画面以外のときに広告を出すようにする

という感じ。

やりたい人は多いと思うので、やり方をシェアしておく(・∀・)

※作業するときはテーマのバックアップを絶対に忘れずに！失敗したとき戻せなくなってしまうぞ(^_^;)

ソースコードからタイトル下の箇所を見つけ出す

テーマをいじるにあたり、何はともあれ記事のソースコードを確認だ。
タイトル下に出したいので、タイトルを表示しているあたりを探す。

Chromeで適当に選んだ記事のソースを表示し、記事タイトルの文字列で検索するとこんなところがあった。

他にもタイトルの文字列が入ってる箇所はあるのだが、

h3タグで囲まれていること
post-title-containerとかそれらしい名前のクラスになっていること

から、これがタイトルを表示しているコードだろうと推測できる。

タイトル下はテーマ内のどこ？

テーマ中でタイトル表示に対応している部分は、記事のソースコードに似たコードになっているはずである。

その部分に適当な文字列を入れてみて、実際に記事にどう出るか見ると、どの箇所がタイトル下にあたるのかが確認できる。

タイトル下らしきところは3箇所

というわけでBloggerの管理画面からテーマのHTMLを開き、クラス名 ”post-title-container” でテーマを検索してみると、、

それらしい箇所がある！

一番上の行のコメントといい、h3タグといいこれだろう！と当たりがついた。

ただこれと同じような箇所はテーマ中に３箇所あり、それぞれ何に対応しているのかはわからない。

なので3つの該当箇所に、上から順に＠＠＠１、＠＠＠２、＠＠＠３と確認用の文字列を入れて確認してみた。

入れた場所はそれぞれの箇所の、post-title-containerクラスのDIVタグが閉じるところ。
上記画像の最後の行にある</div>の下です。

実際に確認してみる

で、実際に記事を表示してみた結果、

1番上に入れた＠＠＠１はPCにもスマホにも表示されず
＠＠＠３はPC、スマホのタイトル下に出ている！
＠＠＠２は見えないが、文字列検索してみるとどうも＠＠＠３の下に隠れているみたい

という感じであった。

なので＠＠＠３を入れた箇所、つまり3つの該当箇所の3つ目、最後のところに広告コードを貼れば表示される可能性が一番高いように思われた。

Adsenseコードを貼ってみた

というわけで最後は3箇所それぞれに広告コードを貼ってみて、どうなるか確認してみる。

その結果、

個別記事
注目の記事ガジェット

のタイトル下に広告が出た。

同時にいろいろ不具合も出て、対処するかカスタマイズ自体やめるかの判断が必要となった。

タイトル下に広告表示！しかし。。

まずタイトル下であるらしい3つ目の箇所にAdsenseコードをコピペしてみたところ、、

見事にタイトル下に広告表示！！

広告はタイトルと日付や共有ボタンの間に入り込んでいた。

というわけで大成功。。と思ったのだが、その後トップページを確認してみたところ、

なんとトップにタイル状に並ぶ記事リンクすべての下に広告が出てしまっている！これは醜い。。。

また検索結果画面でもこの状態だった。

なのでURLで判別してトップページと検索結果の画面の場合は広告を出さない制御が必要なことがわかった。

他の箇所は何なのか？

また他の”post-title-container”クラスの</DIV>下にも広告コードを入れて試してみたが、1箇所目はやはりどこにも表示されなかった。

2箇所目に入れてみたところ、どうも「注目の記事」（トップページの上に大きく出している記事）のタイトル下に対応しているようで、PCのトップページではこんな感じに出る。

まあこれは問題なさそう。

しかし、スマホの方のトップページは表示が崩れタイトルが見切れてしまう。

これは見にくいね。

注目の記事のタイトル下は断念

上記の表示崩れは、注目の記事タイトル下の広告をレスポンシブじゃなくサイズ指定のものにすれば回避できるのかもしれない。

が、そうすると今度はPCのほうがカッコ悪くなりそう。

それならPCとスマホなどモバイルで条件分岐すればいいのかもしれないが、もうやってられません。

またEmporioはスマホで個別記事を見ると、注目の記事のタイトルが上に見切れてるというバグとしか言いようのない現象が出る。

そしてこれも広告を入れるとその不具合が強調されて見れたもんじゃなくなる(^_^;)

もう何の記事かわからんわ（￣∇￣

というわけで2箇所目を使って「注目の記事」のタイトル下に入れるのも断念した。

なおその後、注目の記事はトップページのみに出すことにしたので、ますますこのカスタマイズは必要性が薄い(^_^;)

コスパを考えると、まあやらんでいいであろう。

個別記事のタイトル下だけに広告を出す

というわけで広告は3番めの箇所を使い、個別記事のタイトル下だけに出すことにした。

注目の記事ガジェットには出さないし、トップページにも検索結果画面にも出さない。

よってそのための判定文を入れる。

やりたいことと引っかかったこと

というわけで最終的に、

トップページに並ぶ記事のタイトル下には広告を出さず
検索結果の画面でもタイトル下に広告を出さず
個別記事のタイトル下にだけ広告を出す

ということをやれれば今回のカスタマイズは成功だ。

判定を入れるのはそう難しくなかったが、判定文の中だと

広告コードがそのままでは正しく認識されない

のがハードルだった。

その対処のため、document.writeln でコードを一行で書き込む、という少々強引なことをしている。

個別記事の判定付き広告表示コードはこれだ！

上記の仕様をdocument.writelnで対処し、稼働に成功したコードは以下になる。

'広告コード'のところにAdsenseで生成したコードを入れるが、それには後述するひと工夫がいる。



<script>

var TopUrlPC = location.protocol +'//'+ location.hostname+'/';
var TopUrlSP = location.protocol +'//'+ location.hostname+'/?m=1';
var SearchUrl = location.protocol +'//'+ location.hostname+'/search';
var myUrl = location.href;

if(myUrl==TopUrlPC || myUrl==TopUrlSP) {

// トップページでは何もしない
;

} else if ( myUrl.match(SearchUrl) ) {

// 検索結果ページでも何もしない
;

} else {

// トップページか検索結果ページ以外なら広告を入れる

document.writeln('広告コード');

}

</script>



コードでやっていること

まず上記コードでやっていることを（見れば分かると思うが）一応解説しておく。

まずJavascriptで

プロトコル（http:とか）
//
ホスト名
/

を連結してトップページのURLを組み上げ、それを判定に使っている。

Bloggerではスマホなどモバイル端末ではURLの最後に ?m=1 というパラメータが付いているので、そっちのURLも判定用に作っておく。

また検索結果画面には"プロトコル//ホスト名/"の後ろにsearchという文字列が付く。
そのURLも検索結果画面の判定用に作っておく。

で、今見ているページのURLと比較して、トップページ及び検索結果画面だったら空文(;)で何もせず、それ以外の場合は document.writeln で広告コードを書き込む。

広告コードそのままコピペではNG

上記コードはdocument.writelnなんて使わなくても、elseの後に広告コードを普通にコピペすればそれでいいように思える。

しかし実際やってみると、どういうわけかscriptタグが閉じなくなる。

またGoogleさんがくれた広告コードをそのままdocument.writelnの中にコピペしてもやはりうまく動かないので、修正の必要がある。

※Adsenseコードの修正（改変）は規約上、絶対にNGではありませんが場合により規約違反になる可能性があります。この記事で示す修正は不正なものではないので大丈夫と考えていますが、やる場合はもちろん自己責任でお願いします。

タグが閉じず挙動不審に

まずスクリプトのelseの後に広告コードを普通にコピペするとscriptタグが閉じなくなる件について。

やってみるとわかるが、テーマのエディタ上で最後の閉じタグが赤く、</script> みたいになってしまうのだ。

その状態でムリに保存して表示させてみると、やはり

コードの一部( "}" とか)が表示されてしまう
トップページにも広告が出てしまう

と挙動不審に陥った。

特殊文字をエスケープする

なので document.writeln で完全に文字列として書き込むことにしたわけだが、writelnであるのでコードを1ラインの通常文字列にしなければならない。

つまり document.writeln('広告コード'); に入れるコードは、

改行があってはダメ
特殊文字はエスケープしないとダメ

なのであった。

というわけでやるべきことは

取得したAdsenseコードから改行を削除して1行にする
その上で<>などの特殊文字にエスケープ等の対処

である。

Javascriptのコード内ではどうも

タグに使われる<>は <> で表記
その他特殊文字は￥でエスケープできる（必ず半角の￥で）

ようだったので、広告コードから改行を取った上で上記を適宜適用し、document.writeln 内に入れてみると、きちんとタグが閉じた！！

※なおこのエスケープ作業はBloggerのガジェットを使うと超簡便にやれます。詳しくは以下を読んでみてください＾＾

>> Bloggerで広告コードの特殊文字を簡単にエスケープする方法

トップページから広告表示が消えた！大成功＾＾

というわけでタグの辻褄がおかしくなる問題が解消されたので、テーマを保存して実際にトップページを表示させてみると、、

あの全タイルにずらずら出ていたうるさい広告が消えている！！＾＾

もちろん検索結果画面でも広告は出ていない。

そして個別記事のタイトル下にはきちんと出ているし、スマホでもうまく動いていた。
大成功である＾＾

なお自分もそうしているが、見た目が窮屈にならないよう広告の前後に適宜改行<br/>を入れてもよい。

その場合は document.writeln 内の広告コードの前後に以下の形で改行タグを入れる（もちろん、<>が<>になっている）。

<br/>

そんなわけで

個別記事にだけタイトル下にレスポンシブ広告を出し
トップページには出さない

という所期の目的をついに達成した僕様、今日からは枕を高くして眠れそうである！！＾＾

このブログを検索

Blogger/Emporioカスタマイズ日記