はてなブログでAMPを配信する際に、気をつけておきたい記事の書き方
はてなブログでAMP配信がスタートし、つい先日、CSSを設定することが、できるようになりました。
AMPに適用するCSSを設定できるようにしました - はてなブログ開発ブログ
これによりAMPでもデザインがカスタマイズできるようになり、このブログでもCSSを設定してみました現在は配信していないので設定していません。
このAMPに対応するのに、いろいろ調べました。その調べたことなど、ブログで公開したら何らかの参考になるかな？と思い、3回に分けて記事にいたします。
ご参考になれば、幸いです。
スポンサーリンク
ちなみに、AMPとは何じゃらほい？という方は、こちらに詳しい書かれています。
リンク：Google ウェブマスター向け公式ブログ: AMP について
また、はてなブログのヘルプページにもAMPのことについて詳しく書いてあります。
ちなみにAMPとは「Accelerated Mobile Pages」の略で、この言葉をGoole翻訳で翻訳すると「加速されたモバイルページ」となります。
※、追記および修正
最初に
最初に、AMPはまだ開発途中のものであり、機能や実装などが突然変わることがあります。
はてなブログでのAMP HTMLは、はてなブログのシステムに大きく依存しています。なので、ユーザー側からあれこれすることは、ほとんどないのですが、情報自体は仕様の変更などで最新のものとは違う場合もあります。
その点をあらかじめご了承の上、お読みください。
記事本文（HTML）の注意点
はてなブログにおいて、記事本文（HTML）の注意点は、さほどないように感じます。ほとんどはてなブログのシステムが自動変換してくれるからです。
画像はもちろんのこと…、
GIF画像や
YouTubeなど
ペンパイナッポーアッポーペン PPAP （Pen Pineapple Apple Pen） 【ねば～る君】 ペンワラナットーナットーペン (PWNP) 【ねばねばTV】 歌ってみた 踊ってみた
はてなブログでは、記事URLの最後に?amp=1を付けて記事を開くと、AMPでの表示を確認できます。
本来はAMP独自の形式に変えなくてはいけないこれらのものも、はてなブログのでは簡単に表示できるようにしてくれます。
ブログの記事本文で書く人はおそらくほとんどいないでしょうけど、formやobjectといった一分のタグはAMPでは使用を禁止されています。
はてなブログでは、これらのタグも自動で取り除いてくれます。こういう便利なところがブログサービスの良いところです。
ただしAMP配信にするとAMPに合わせていろいろ変換したり削除したりするため、テーマが反映されなかったり、文字の色や大きさを変えたとしても反映されなかったりと、いろいろと変わる部分もあります。
AMP配信にすると記事がどのように変化するのかは、こちらのヘルプに書かれています。
とりあえずこのヘルプを読んでいると仮定して、その上でのAMP配信する際のコツや注意点を書いていきます。
ブログカード（iframe）
AMPでは、その仕様上、ページ上部にあるiframeは基本的には表示できないようになっています。はてなブログでiframeと言えば、ブログカードなどです。
AMPではページ上部にある
AMPを使用する - はてなブログ ヘルプiframeの表示に制約があるため、例えば記事の先頭にブログカードを配置したときには表示されません。
さて、この上部がどこらへんまでの範囲を指すのかと言えば【最初に表示されるビューポートの75％上部から離れた場所】か【トップから600px離れた場所】のどちらか小さい方に表示されます。
ちなみにビューポートとはアドレスバーや下部のメニューバー（iPhoneなら戻るボタンなどがある部分）を除いた、サイトやブログなどのHTMLを表示する領域のことです。
このiframeの位置をどれだけ上部から離したらよいかは、そのブログのヘッダやサムネイル画像の有無などによって変わってきますので、何とも言えません。当然、過去記事のリライトなどをしなくては文書的に変になる場合もあります。
iPhoneの縦など、だいたいのスマホの縦のサイズは600pxを超えているので、そこらへんを参考にすると、どのあたりからブログカードを使えるかが分かりやすいかもしれません。
ちなみに、同じようにiframeで挿入されるYouTubeは、上部に配置しても大丈夫なようです。
ブログタイトル（ヘッダ）
AMPでの記事上部のブログアイコンやタイトル画像の有り無しといった設定は、スマホ版の【デザイン】→【スマホ版】→【ヘッダ】の設定に依存しています。
つまりタイトル部分はスマホ版のデザインが反映されます。これはレスポンシブデザインのチェックを入れていても同じでスマホ版の設定が反映されます。
タイトル画像を載せるときや、アイコンやタイトルの表示・非表示などはこちらの設定を調整すれば行えます。
段落
記事本文中の段落は、だいたいはpタグで囲まれています。ですが、AMPになると<div class=paragraph"></div>に囲まれます。
これはどうやら、そういう仕様になっているようです。ちなみに"paragraph"とは「段落」という意味です。
画像（2017年9月7日、追記・修正）
はてなブログでは画像（img要素）は、AMPの独自要素であるamp-imgに自動変換してくれ、AMPで表示できるようにしてくれます。
ただし、はてなブログのAMPでは設定したwidth属性やheight属性は無くなって、独自の方法で表示されます。つまり、その画像を拡大縮小していたとしても独自のレイアウト方法で表示されるのです。
width属性と height属性の両方の指定があれば、表示サイズの値は継承されます。
で、その表示方法はresponsiveというもので、画像サイズの縦横比（アスペクト比）はそのままで、要素の大きさいっぱいに表示するものです。
幅が小さいと比率はそのままで縮小表示。大きくなると指定されている横幅いっぱいまで大きくなります。
この幅の最大の大きさは、width・heigh の指定がなければ本来の画像の大きさ（ピクセル値の大きさ）に指定されるので、拡大しすぎるということにはなりません。
ですが、この影響で画像を縮小して表示させていてもAMPにしたら元の大きさで表示されることもあります。
例えば、下の画像は本来400×400の画像ですが、それをインラインの style 属性で50×50にしています。
ですがAMPでは、50×50より大きく表示されているはずです。
（↑50×50で設定していますが、AMPでは大きくなります。）
img要素はAMPに変換するとクラス名とかも継承されません（IDは継承しますが）。
場合によっては過去記事の修正が必要になることもあります。
※はてなブログの画像に関しては、別途こちらの記事に詳しく記述しました。よろしければ参考にしてください。
Google Search Console のススメ
AMP配信をするなら、ぜひとも導入してほしいのがGoogle Search Consol（サーチ コンソール）です。
リンクhttps://www.google.com/webmasters/tools/home?hl=ja
こちらにブログを登録しておくと、万が一AMPでエラーがあったときは知らせてくれて、しかもエラーがあるページやエラーの内容を教えてくれます。
参考リンク：Google、AMPのエラーレポートをSearch Consoleで提供開始 | 海外SEO情報ブログ
Search Consol の導入は【詳細設定】のページからできます。また、検索で調べれば導入の仕方を簡単丁寧に解説しているブログやサイトはいっぱい出てきますので、そちらを参照しても良いでしょう。
Search Consol はとても便利なサービス
で、ブログ運営に役立つ機能もいっぱいあります。もし導入がまだの場合は、これを機にブログに導入しても良いかもしれません。
最後に
はてなブログでHTML方面の気をつける部分はこんなものです。だいたいは、はてなブログ側で調整してくれるので、難しいことはありません。
ただし、記事によってはリライト（修正）が必要な場合もあります。特に記事の最初のほうにブログカードを配置している場合は、注意が必要です。
今回、最後にCSSが出できましたが、実は、はてなブログのAMPデザインにおいて、気をつけなければいけない部分が多いのはCSSのほうです。
次回はこの、はてなブログのAMPにおけるCSSについての調査結果を、ご報告したいと思います。
スポンサーリンク
