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