沼津暮らし

沼津で暮らしているウェブエンジニアが雑多に書くブログ

レスポンシブルデザインで記事下のアドセンスを「PCはダブルレクタングル、スマホはレスポンシブ」と「特定のタグの場合には出力しない」を両立する方法

はてなブログが提供しているデザインに関してのテーマを変えてみました。

レスポンシブルデザインが最近流行っているみたいなので、あまりこのあたりの動向に詳しくないくせに変更してみました。

しかし、軽い気持ちでテーマを変えてみた結果はAdSenseの表示がおかしくなっているのに後日気がつきました。

ちょっとぐらい変でも全然平気でしょ?とか思うかもしれないのですが、利用者から見たらデザインがずれている場合には読んでくれるという気をそぐので早めに治したいです。

やったこと

今までのデバイス別向けのページからレスポンシブルのページに変えるというのは、デザインを刷新する事と同じです。

なので、まじめに広告の配置を考えている人は、最初から広告も含めたデザインを考えると良いでしょう。

実際に私も今までのデザインは忘れて、レスポンシブルにあわせました。

参考にした記事

この時調べて神な記事は以下となります。

はてなブログの見出しレベルで差し込んでくれるスクリプトを出力するツールを提供している記事。

uxlayman.hatenablog.com

 

ダブルレクタングルをブログで設定する場合にはタグの機能を入れる前にこちららの記事に記載されている内容を設定しないと動きません。

www.bombkun.com

両立するにはどうしたら良いか?

この二つの記事の「PCはダブルレクタングル、スマホはレスポンシブ」と「特定のタグの場合には出力しない」をやりたいのが今回の目的です。

私は単純なので以下のロジックで書き換えました。

1.カテゴリのタグが広告禁止のタグでないかのif条

2.div タグのHTMLを出力

3.広告のdivの要素を記事下に移動

スクリプト

JavaScriptは苦手なので、たぶんもっと良い記述があると思います。

参考にした記事を書き換えて以下のようなコードを作成。

広告を張るときは「</script>」を「</scrip>」に置換する必要があります。

<!-- START v1.02 params=[insentense-adsense2,D,,,,1,after,hide,,,true,広告禁止] from http://uxlayman.hatenablog.com/entry/2017/01/26/insentenseform -->
<script>
var adsenseCode2 = (function () {/*

<table class="table-css">
<tr>
<td class="td-css">#ここにPC用ダブルレクタングルの左</td>
<td class="td-css">#ここにPC用ダブルレクタングルの右</td>
</tr>
</table>
#ここにスマホのレスポンシブル

*/}).toString().match(/\/\*([^]*)\*\//)[1].replace(/scrip>/g, 'script>');

addEventListener("DOMContentLoaded", function() {

    if ($('meta[property="article:tag"][content="広告禁止"]').size() > 0) {
        return;
    }

    $('.insentense-adsense2').html(adsenseCode2);
    var myFooter=document.getElementById("my-footer");
    var temp=myFooter.cloneNode(true);
    myFooter.parentNode.removeChild(myFooter);
    document.getElementsByClassName("entry-content")[0].appendChild(temp);

}, false);
</script>
<div id="my-footer" class="insentense-adsense2"></div>
<!-- END v1.02 from http://uxlayman.hatenablog.com/entry/2017/01/26/insentenseform -->

(コピペエンジンア乙ですが)

こちらは二つの記事をマージしたものなのですので、適時書き換えてください。

先ほどの記事では「広告の二番目の記事」で上記のスクリプトを出力しています、

これを利用するときは二番目以外を使用してください。

まとめ

ブログをやっていて思うのはエンジニアでもバックエンドに比べて仕様の前提がありすぎて難しいです。

頭でどうしたいかを表現するのに結構頭を使うのが不思議なところです。フロントエンドを担当しているエンジニアには頭が下がります。

これでようやく広告の配置が完了したので、記事を追加する事に専念しようと思います。