読者です 読者をやめる 読者になる 読者になる

納豆、Web、雑記など

はてなブログでAMPを配信する際に、気をつけておきたい記事の書き方

Web はてなブログ HTML・CSS
Google AMP search result

はてなブログでAMP配信がスタートし、つい先日、CSSを設定することが、できるようになりました。

AMPに適用するCSSを設定できるようにしました - はてなブログ開発ブログ

これによりAMPでもデザインがカスタマイズできるようになり、このブログでもCSSを設定してみました。

リンク:
http://www.tomotanuki.com/entry/hatena-amp-html?amp=1

デザインは、このブログでインストールしているテーマ「stripe」のデザインに合わせて、ほぼ同じデザインを使わせていただきました。制作者のMinimal-Greeさんには許可をいただいています(感謝)

このAMPに対応するのに、いろいろ調べました。その調べたことなど、ブログで公開したら何らかの参考になるかな?と思い、3回に分けて記事にいたします。

ご参考になれば、幸いです。

ちなみに、AMPとは何じゃらほい?という方は、こちらに詳しい書かれています。

リンク:Google ウェブマスター向け公式ブログ: AMP について

また、はてなブログのヘルプページにもAMPのことについて詳しく書いてあります。

リンク:AMP(Accelerated Mobile Pages)を使用する - はてなブログ ヘルプ

ちなみにAMPとは「Accelerated Mobile Pages」の略で、この言葉をGoole翻訳で翻訳すると「加速されたモバイルページ」となります。

最初に

最初に、AMPはまだ開発途中のものであり、機能や実装などが突然変わることがあります。

はてなブログでのAMP HTMLは、はてなブログのシステムに大きく依存しています。なので、ユーザー側からあれこれすることは、ほとんどないのですが、情報自体は仕様の変更などで最新のものとは違う場合もあります。

その点をあらかじめご了承の上、お読みください。

記事本文(HTML)の注意点

はてなブログにおいて、記事本文(HTML)の注意点は、さほどないように感じます。ほとんどはてなブログのシステムが自動変換してくれるからです。

画像はもちろんのこと…、

GIF画像や

GIF画像のサンプル

YouTubeなど


ペンパイナッポーアッポーペン PPAP (Pen Pineapple Apple Pen) 【ねば~る君】 ペンワラナットーナットーペン (PWNP) 【ねばねばTV】 歌ってみた 踊ってみた

確認用URL:
http://www.tomotanuki.com/entry/hatena-amp-html?amp=1
↑はてなブログでは、記事URLの最後に"?amp=1"を付けて記事を開くと、AMPでの表示を確認できます。

本来はAMP独自の形式に変えなくてはいけないこれらのものも、はてなブログのでは簡単に表示できるようにしてくれます。

ブログの記事本文で書く人はおそらくほとんどいないでしょうけど、formobjectといった一分のタグはAMPでは使用を禁止されています。

はてなブログでは、これらのタグも自動で取り除いてくれます。こういう便利なところがブログサービスの良いところです。

ただしAMP配信にするとAMPに合わせていろいろ変換したり削除したりするため、テーマが反映されなかったり、文字の色や大きさを変えたとしても反映されなかったりと、いろいろと変わる部分もあります。

AMP配信にすると記事がどのように変化するのかは、こちらのヘルプに書かれています。

help.hatenablog.com

とりあえずこのヘルプを読んでいると仮定して、その上でのAMP配信する際のコツや注意点を書いていきます。

ブログカード(iframe)

AMPでは、その仕様上、ページ上部にあるiframeは基本的には表示できないようになっています。はてなブログでiframeと言えば、ブログカードなどです。

AMPではページ上部にあるiframeの表示に制約があるため、例えば記事の先頭にブログカードを配置したときには表示されません。

引用元:AMP(Accelerated Mobile Pages)を使用する - はてなブログ ヘルプ

さて、この上部がどこらへんまでの範囲を指すのかと言えば【最初に表示されるビューポートの75%上部から離れた場所】か【トップから600px離れた場所】のどちらか小さい方に表示されます。

ちなみにビューポートとはアドレスバーや下部のメニューバー(iPhoneなら戻るボタンなどがある部分)を除いた、サイトやブログなどのHTMLを表示する領域のことです。

このiframeの位置をどれだけ上部から離したらよいかは、そのブログのヘッダやサムネイル画像の有無などによって変わってきますので、何とも言えません。当然、過去記事のリライトなどをしなくては文書的に変になる場合もあります。

iPhoneの縦など、だいたいのスマホの縦のサイズは600pxを超えているので、そこらへんを参考にすると、どのあたりからブログカードを使えるかが分かりやすいかもしれません。

ちなみに、同じようにiframeで挿入されるYouTubeは、上部に配置しても大丈夫なようです。

ブログタイトル(ヘッダ)

AMPでの記事上部のブログアイコンやタイトル画像の有り無しといった設定は、スマホ版の【デザイン】→【スマホ版】→【ヘッダ】の設定に依存しています。

つまりタイトル部分はスマホ版のデザインが反映されます。これはレスポンシブデザインのチェックを入れていても同じでスマホ版の設定が反映されます。

タイトル画像を載せるときや、アイコンやタイトルの表示・非表示などはこちらの設定を調整すれば行えます。

段落

記事本文中の段落は、だいたいはpタグで囲まれています。ですが、AMPになると<div class=paragraph"></div>に囲まれます。

これはどうやら、そういう仕様になっているようです。ちなみに"paragraph"とは「段落」という意味です。

画像(amp-img)

はてなブログでは画像(img要素)は、AMPの独自要素であるamp-imgに自動変換してくれ、AMPで表示できるようにしてくれます。

ただし、はてなブログのAMPでは設定したwidth属性やheight属性は無くなって、独自の方法で表示されます。つまり、その画像を拡大縮小していたとしても独自のレイアウト方法で表示されるのです。

で、その表示方法はresponsiveというもので、画像サイズの縦横比(アスペクト比)はそのままで、要素の大きさいっぱに表示するものです。幅が小さいと比率はそのままで縮小表示、大きくなると指定された横幅いっぱいまで大きくなります。

この幅の最大の大きさが、その画像のもともとの画像の大きさなので、拡大しすぎて画像が荒くなるということはありません。

ですが、このレイアウト方法の影響で、もともと画像を独自に縮小して表示していたとしても、AMPにしたら元の画像の大きさで表示されることもあります。

例えば、下の画像は本来400×400の画像ですが、それを属性で50×50にしています。ですがAMPでは、50×50より大きく表示されているはずです。

AMPでは大きくなるテスト用イラスト
↑50×50で設定していますが、AMPでは大きくなります。

従来の表示:
http://www.tomotanuki.com/entry/hatena-amp-html
AMPでの表示:
http://www.tomotanuki.com/entry/hatena-amp-html?amp=1

はてなブログのAMPでは今のところ(時点)そういう仕様になっています。この仕組みを変えてサイズ変更しようとしたら、少々工夫が必要です。

使うのはCSSのmax-widthです。他に方法はありますが、このプロパティを使うのが1番簡単です。

使い方は、縮小したい画像に自動で大きくならないようにmax-widthで設定するだけです。

,.entry-content amp-img {
    max-width: 100px; /*任意の数字*/
}

これを使う時は、全部の要素に適応させるということはないはずです。だいたいは吹き出しのアイコンなど特定の画像だけを縮小することが多いはずです。

imgをAMPに変換すると、属性と同じようにクラス名とかも継承しないので、個別に指定するときは何らかの要素で囲んで指定する必要があります。

例としては、このような感じです。

<span class="class-name">[挿入した画像]</span>
.entry-content .class-name amp-img {
    max-width: 40px; /*任意の数字*/
}

こんな感じになります。

ちなみに元の画像サイズの大きさになるまで画像サイズを自動調整してくれるこのレイアウト方法においてあまり必要はないのですが、min-widthを使えば元画像の大きさより、さらに拡大して表示することができます。

ただし、使い方によっては表示領域より画像が大きく固定され、デザイン自体が崩れる可能性があります。なので、使用はあまりおすすめしません。

最後に

はてなブログでHTML方面の気をつける部分はこんなものです。だいたいは、はてなブログ側で調整してくれるので、難しいことはありません。

ただし、記事によってはリライト(修正)が必要な場合もあります。特に記事の最初のほうにブログカードを配置している場合は、注意が必要です。

今回、最後にCSSが出できましたが、実は、はてなブログのAMPデザインにおいて、気をつけなければいけない部分が多いのはCSSのほうです

次回はこの、はてなブログのAMPにおけるCSSについての調査結果を、ご報告したいと思います。

TOP