はてなブログAMP設定＆アドセンス設定ガイド2019
当ブログのAMP化、AMP向けCSS調整、及びAMP向けアドセンス設定が無事に完了したのでそれぞれ必要な作業と方法をまとめました。CSSが分からない方はクラウドソーシング等で5,000円くらい払うとやってもらえます。
はてなブログのAMP化にはPro版が必要
先ずはてなブログでAMPを使うにはPro版を使っていることが最低要件となっています。
2年契約で月々600円、実際アドセンス運用していれば余裕でペイできるので無料ユーザーは今直ぐ有料化しましょう。
契約は下記URLから↓
AMPには利用デザインのCSSをコピーが必須
AMPを有効化しただけだと殺風景な、昔のウェブサイトを思い出すかの様な見事に装飾とは無縁のページになります。
Chromeデベロッパーツールで通常版サイトを見ながら、AMPへ移植するCSSを見つけ出します。どの部分を移植するかは利用者それぞれですが最低限下記要素が揃っていれば十分です。
- 文字サイズ
- 大見出し、小見出し
- リンクテキストカラー
- <strong>の背景カラー
設定はデザイン設定から行います。詳しくは開発ブログの記事を確認してください。
更にカスタマイズしたい人はAMPに使えるサンプル集も参考にしてみてください。
CSSのカスタマイズを終えたらAMPテスト実施を
CSSカスタマイズでエラーがない事を確認するために作業を終えたらAMPテストを行ってください。
もしエラーが表示されていたら必ず修正しましょう。
当サイトで使用しているAMP用CSS（コピペ可）
AMPでバリデーションが済んだCSSなのでコピペして、お好きな色に変更するだけで使えます。
はてなブログに綺麗にCSSコードを貼り付けられなかったのでQiitaに投稿しました。
AMPページへのアドセンス表示
いくつか過去に公開されている記事を参考にしましたが、一番解決に近かったのは下記サイトでした。
2019年8月10日時点でははてなブログAMP版でAMP自動広告は使用できません。
またjavascriptを使って自動的に挿入も出来ないため、表示したい箇所に個別にアドセンスコードを挿入する必要があります。
参考サイトのコードをHTML編集で挿入するといくつかプロパティが消えますが、最終的にAMPのエラーもなくしっかり広告が表示されるコードはこれです。
<center><amp-ad layout="fixed" width="300" height="250" type="adsense" data-ad-client="ca-pub-xxxx" data-ad-slot="xxxx"></amp-ad></center>
上記をコピペし、アドセンスIDとアドスロットIDを置き換えてください。
挿入箇所は広告を表示したい箇所です。沢山記事がある方は編集が大変ですがまだはてなブログを始めて記事数が少なければ苦労は少ないです。
