こんちゃす、たけ氏でっす
『AMP』話題ですよね
ですがはてなブログではAMPアドセンスに対応しておらず、うまみが少なかったので最近はあえてAMPを使用していない方が多くなってきたように感じます
そんなところにこんなブログ記事を見ました
[blc url="http://sore.konoblog.com/entry/amp"]
『うそだろ？どうせ表示されねーよｗｗｗ』と思ったんですけど
先ほどの記事ではAMPアドセンス用のコードは紹介されていなかったので、簡単にコードをまとめましたので以下からどうぞ～～！
※カスタマイズは自己責任でお願い致します、
不利益なことがおきても筆者は責任を負えません
AMPを導入する
はてなブログでのAMP導入方法は非常に簡単です
ダッシュボードの左メニューバーより【設定】→詳細設定→【AMP】
のチェックボタンに✔を入れてページ下部の【変更する】をクリック
以上です
以上です
ね、簡単でしょ？笑
ただ、この機能はプロ版オンリーですので、無料版の方は諦めて課金するかWordpressに移行しましょう！！笑
アドセンスコードにAMP用コードを追記する
AMPページは爆速で表示できるようになる代わりに非常にシンプルなデザインとなります
上記プラグインを使用している場合、初期デザインは
ヘッダー
記事
フッター
のような感じに。笑
なのでサイドバーなどに表示させているアドセンスは諦めて、記事内アドセンスのみ対応させます
通常、アドセンスを貼り付けるときはこのようなコードを使用しますよね
スポンサーリンクゥ！
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- アドセンスゥ！ -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-○○"
data-ad-slot="△▽"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
記事中アドセンスにもこういうコードを使っていると思います
赤字の部分は広告によって変わってくるので、普段使っているものを参考にしてください
このコードの下に↓のコードを追加します
<amp-ad width="300" height="250"
type="adsense"
data-ad-client="ca-pub-○○"
data-ad-slot="△▽">
</amp-ad>
赤字の部分は上のコードと同じに！
あとはフルコピペでOKです
このコードが『AMP用アドセンス』のコードです
『両方書いたら、広告２つ出るんじゃない？』と思った方！
（ぼくがそうでした）
安心してください、
『AMPページでは通常のアドセンスが表示されない』
＋
『AMPアドセンスはAMPページ以外では表示されない』
ので、
２つ連ねて書くだけで両方対応できるのです！
これでAMP導入＋AMPアドセンス対応は完了です！
おわりに
これまではWordpressの特権だったAMPアドセンスがついにはてなブログでも対応してしまいましたね…
ただ、AMPページをカスタマイズできるのはいまだWordpressの特権です！
デザインにこだわりたい方はぜひWordpressに引越しを！ｗ
WordpessのAMP・AMPアドセンス対応、AMPページでのシェアボタン対応はこちらの記事をご参考にしてください
[blc url="http://30cm.xyz/ampad/"]
[blc url="http://30cm.xyz/ampshare/"]
そんな感じで以上！たけ氏でした！
【追記１】今までの記事に表示させてある記事中アドセンスについて
AMPアドセンスを表示するには、上に書いたとおり専用タグを書き加える必要があるので、
今まで記事中に直接アドセンスコードを記入していた場合、AMPアドセンスコードも直接書き加える必要があります
過去記事が100なら100回修正、1000なら1000回修正が必要…
ですが、AMPで表示されるページは『Googleトップニュース』や『はてなアプリ』から見た場合のみですので、全てを修正する必要もないのかな？と個人的には思います。
これから書く記事はAMPアドセンスコードを記述しておいて、ニュースでピックアップされそうな記事やはてなアプリからの流入が未だにある記事などのみ対応すれば良いかと！
気になる方は全部修正してもいいとは思いますが、その時間で新しい記事を書いたほうがはるかに生産的な気がします…ｗ
