Google AdSenseを設置しているweblogで、ins要素にCSSでスタイルを適用する場合の注意点

このweblogは、はてなブログの無料バージョンを使って実験していた時期があるため、はてな側が設置しているGoogle AdSenseが表示されていました。

自分で設置しているGoogle AdSenseではないため、自分のweblogを見る際はそこに意識が向くことがなかったので気付かなかったのですが、先日このGoogle AdSense部分の前に ( 追記 ) と表示されていて「何でや」と思いました。

このweblogは実験的かつ仮運用なので、既存のテーマをほぼそのまま用いてカスタマイズは最小限にしていますが、CSSで数値文字参照を使って文字を挿入する ? Rezn’t rev.7を参考にして、<ins>や<del>で追記・修正をマークアップした部分にbefore擬似要素で ( 2018-12-06T19:00:00+09:00 追記 ) や、 ( 2018-11-28T20:00:00+09:00 修正 ) のように追記・修正した日時を表示するようにしていました。

ins[datetime]::before {
    content: " ( " attr(datetime) "\0020\008ffd\008a18\0020 ) ";
}

del[datetime]::before {
    text-decoration: none;
    content: " ( " attr(datetime) "\0020\004fee\006b63\0020 ) ";
}

ところが、Google AdSense部分のHTMLを確認してみると、

<div class="ad ad-online-afc" style="display: block !important;">
    <ins class="adsbygoogle" id="ins-ad-pc-archive-header" style="display:block!important;min-height:100px;"></ins>
</div>

とあり、Google AdSense部分にもins要素に対するCSSの指定が適用されていたということです。

Google AdSense部分を<ins>でマークアップすることはどうなの？という点は次の記事に譲るとして、幸いにもGoogle AdSense部分にはclass属性が指定されているので、CSSの記述に次のように書き加えています。

ins[datetime]::before {
    content: " ( " attr(datetime) "\0020\008ffd\008a18\0020 ) ";
}

ins.adsbygoogle::before {
    content: none;
}

del[datetime]::before {
    text-decoration: none;
    content: " ( " attr(datetime) "\0020\004fee\006b63\0020 ) ";
}

この記述で、ins要素の前（ins::before）にdatetime属性で記述された追記日時をCSSで表示しつつ、class属性値にadsbygoogleが記述されたins要素（ins class="adsbygoogle"）の前だけはその表示を無しにする、ということができます。

この話はbefore擬似要素に限らず、ins要素に対してスタイルを適用したい場合にはまりやすい罠だと思われるので、CSSでins要素にスタイルを適用する場合は、ins.adsbygoogle { }でGoogle AdSense部分のスタイルを上書きするようにした方が良い、と覚えておきましょう。

Google AdSense insで検索すると、Google AdSense部分の背景色が黄色くなるということで、私と同様のことを書いているweblogがいくつかヒットします。その多くはGoogle AdSense部分以外でins要素は使わないから、ins { background: none; }のようにすればOKという感じです。 しかしins要素を今後使うことになった時には影響が出てしまいますので、ins.adsbygoogle { background: none; }のように、Google AdSense部分だけを狙って指定するようにしましょう。

そもそも、datetime属性が記述されていなければbefore擬似要素での文字列追加を行う必要が無いため、ins[datetime]::beforeのように、文字列追加を行いたい対象として、datetime属性が記述されているins要素のみにbefore擬似要素を適用するようにCSSを修正しました。