※ この記事は公開されてから1年以上経過しているため、情報が古い可能性があります。

今回トップ画像が思いつかなかったのでいらすとやさんより転用させていただきました。。。

以前から訪問下さっていた方は気づかれたかと思いますが、このサイトにもついに広告を導入させていただきました<(_ _)>
ずっと広告なしで運用してきていたのですが、サーバー代(当サイトは Xserver の X10 プランで運用されています。)がもし稼げたら嬉しいかも…と思って入れさせていただきました。

応援してくださる方は是非広告をポチッとお願いいたします<(_ _)>
とても励みになります!!

個人で出しているアプリにも広告を入れておらず、正直どこがよくてどうとかよく分からなかったんですが、取り敢えずよく聞く A8.net を使ってみることにしました(*・ω・)ノ
成果が出てきたら、また報告したいと思います!

苦労話

せっかくなのでちょっとした導入苦労話を…
当初はメイン画面だけでなくサイドバーにも広告を入れようと思ってました。
ただ amp サイトの広告は style で posion: fix; の箇所に入れるとエラーを吐きます…

むむぅ、なるほど…
調べてみると absolute なら問題なさそうなので、強制的に元の CSS を上書きしてみます!

1
2
3
.html.i-amphtml-fie:not(.i-amphtml-inabox)>body, html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body {
  position: absolute!important;
}

すると Developer ツールでは問題なくなりました(・∀・)
ただ、しばらくすると Google Search Console がエラーを吐き始めます。。。

1
2
タグ「style amp-custom」内のテキストに「CSS i-amphtml- name prefix」が含まれていますが、これは許可されていません。	
タグ「style amp-custom」内のテキストに「CSS !important」が含まれていますが、これは許可されていません。

おぉ〜、そうなります??
ということは、事実上サイドバーに広告は入れられないと言うことになりますね(´・ω・`)
意外と amp の制約って多いようです。。。
でも絶対サイドバーに入れたい!というほどでもなかったので、一旦これ以上は追求せず広告は入れない方向にしました(*・ω・)ノ

運用していても知らないことが多いので、とても勉強になりますね!
小さな発見も Twitter につぶやくだけでなく、可能な限り調べて記事にしたいと思います(`・ω・´)