Google AdSenseが、2017年7月に正式にリリースしたネイティブの記事内広告。
今まではバナーみたいな形式だったものが、より自然な形で表示ができるようになりました。

これは試しに使ってみたいと思い、過去記事にコードを貼ってみようと思ったのですが・・・。
色々問題が発生したので、その解決策をまとめました。
結果を先に言えば、回避ができないはてなブログの仕様です。

勝手に生成される不要なコードが・・・。

私は普段「見たまま編集モード」を使用しているので、
アフィ系のコードやYOUTUBEの埋め込みコードは「HTML編集」タブに切り替えて貼り付けています。f:id:kekko96:20170907172950p:plain

記事内広告を設置するためには、
Googleアドセンスの「広告の設定」から「記事内広告」で作成したコードを貼り付けます。
(手順に関しては主旨からずれるため今回割愛します。)
この時点では編集画面のコードには何の問題もありません。

f:id:kekko96:20170907173041p:plain

ところがプレビュー画面に切り替えると・・・。
なんということでしょう。
広告が表示されないではありませんか!
なんだこの「ー」は!!!!

おかしいなぁ〜と、HTML編集に戻ってコードを見てみると・・・。

f:id:kekko96:20170907173101p:plain

ぬぁぁ〜〜〜んだこの不要なコードは!
勝手に書き換えるんじゃないの!おバカ!
でも、根本的に「見たまま編集モード」は勝手にコード調整してくれる親切設計仕様なんですよね。。。優しさが仇となるパターン・・・。
じゃあ、プレビューせずに公開すればいけるのか?
と、思いましたが駄目でした。

尚、最初からみたままモードではなく、HTML編集モードで作成した記事は問題なく広告を埋め込むことが出来ました。

困ったときのはてなサポート窓口

こういうにっちもさっちもいかない時は、
はてなのサポート窓口に問い合わせをするようにしています。
以前、記事の一覧表示の透過画像がバグってる件も問い合わせた。
塩対応と思っていたけど、気付いたらバグは解消されていたので撤回したいと思う。

今回は1営業日後に回答が帰ってきた。
結果はこうだ。どーーん!

f:id:kekko96:20170907173340p:plain

出たーーー!仕様ですーーーー!
うん。知ってた。
記事編集画面からアドセンスのコードは追加できないがファイナルアンサーです。

でも、実際にはてなブログでも記事文中に入れてるブログなんてくさるほどあるのに、
みんなどうしてるんだろう〜〜〜??

と、思って検索した結果神が現れました。

uxlayman.hatenablog.com

この記事のとおりに設定して、作成したコードを記事下に埋め込んだらネィティブな記事内広告無事に表示されました。ありがとうございます〜〜〜m(_ _)m

最後に

ひとまずは、記事内広告は自動挿入で様子を見るしかなさそうです。。
実際入れてみたけどスマホで入ってると邪魔かもしれないので、様子見て外すか、場所変更するのか検討しようと思います。