はてなブログのAMP用CSSを書くときの注意点

f:id:syofuso:20170610170544j:plain
はてなブログのAMP版のCSSを記述出来るようになりましたね。おかげで今までAMP対応を見送ってた方も見直してAMP対応始めた方も多いと思います。カスタマイズ依頼案件でもAMP対応を依頼されることが多くなりました。
基本的にはPC版のデザインCSSと同じように書けばよいのですが、AMP用CSSには制約があったり、元々デフォルトで指定されてるCSSがあるためうまく表示されないことがあります。

HTMLの禁止事項
CSSでの禁止事項
はてなブログでAMP版のヘッダーを作り込む
- タイトル画像を使う
- タイトル画像を使わない（テキストのみ）
はてなブログ向けAMP関連記事
はてなブログ向けAMP対応サービスやっています

HTMLの禁止事項

imgやvideo,iframeなどはamp-img、amp-video、 amp-iframe に置き換えられます。object,formなどの一部タグは使用できません。詳しくはAMPの公式ドキュメントや以下の記事を参照して下さい。
Accelerated Mobile Pages Project – AMP
amphtml/amp-html-format.md at master · ampproject/amphtml · GitHub
はてなブログでAMPを配信する際に、気をつけておきたい記事の書き方 - わたしと納豆ごはん
AMPページ用HTMLの書き方を調べてみました | MONOCHROME DESIGN : 東京都中野区東中野でホームページ制作・WordPressによるサイト制作を行うフリーランスデザイナー

CSSでの禁止事項

・容量は50KBまで
・@font-face, @keyframes, @media, @supports は使用可能
・@charset, @import は使用禁止
・!important は使用禁止
・ユニバーサルセレクタ（*)は使用禁止
・:not() セレクタは使用禁止
・amp-で始まる要素に疑似要素の使用禁止
・a:hover, div:last-of-type は使用可能
・amp-img:hover, amp-img:last-of-type は使用禁止
・behavior、-moz-binding は使用禁止
・filter は使用禁止
AMPページ用HTMLの書き方を調べてみました | MONOCHROME DESIGN : 東京都中野区東中野でホームページ制作・WordPressによるサイト制作を行うフリーランスデザイナー

CSSも幾つか制約があります。 @importが使えないのでFontAwesomeやはてなブログのブログアイコンなどのアイコンフォントが使えません。なので日付やリストの::beforeにアイコンを指定されてる方は画像で表現するしかありません。結構面倒です…。ですが、頑張ればPC版と遜色ない位見た目を整えることもできます。

注意事項としては「記事内にインラインで書かれたCSSは無効になる」ということです。"style=～"でインラインで直接書かれたCSSでの装飾はAMPでは無効のなるのでご注意ください。
www.ampproject.org

はてなブログでAMP版のヘッダーを作り込む

はてなブログでAMPのヘッダーを作り込むのはタイトル画像を使うのが簡単だと思います。

タイトル画像を使う

f:id:syofuso:20170430133511j:plain
「管理画面→デザイン→カスタマイズ→スマートフォン→ヘッダ→タイトル画像」で「スマートフォン用に画像を設定する」「画像だけ表示」にチェックを入れて保存します。レスポンシブデザインモードでもここを使います。AMP用のヘッダー画像をアップロードします。
AMPヘッダー画像なしだと
f:id:syofuso:20170430152559j:plain
こんな感じでそっけないですが、ヘッダー画像を設定すると
f:id:syofuso:20170430133603j:plain
こんな感じになります。
透過画像で背景色を設定したい場合は以下のようにして下さい。

.header-image-wrapper {
  background-color: #fff;/* ヘッダー画像が透明な場合などに背景色を指定する場合 */
}

タイトル画像を使わない（テキストのみ）

ヘッダー画像を使わず、背景とテキストのみで表示します。
以下のCSSをAMP用CSSに記述します。

.header-blog-icon-img {
    display:none;/* 丸アイコンを消す */
}
#header {
    text-align: left;/* 左寄せにする場合 */
    background: #67D4A7;/* ヘッダー背景色 */
    padding: 40px 0 40px 6.25%;/* 上下に余白と左寄せの余白を作る */
    margin: 0px auto 15px;
}
h1#title a {
  color: #fff;/* タイトルテキストの文字色 */
}
#container {
  margin: 0 auto;
  width: 100%;/* デフォルトでは93.75% */
}
.section {
    width: 93.75%;/* デフォルトにあわせる */
}

デフォルトのAMP用CSSには#container の幅が93.75%に指定されており、コンテンツに程よい左右の余白が設定されています。ヘッダー領域を横幅100％表示にするために上記のように変更しています。
こんな感じになります。
f:id:syofuso:20170430134939j:plain
AMP表示の確認には記事URLの末尾に?amp=1をつけてみてください。

はてなブログ向けAMP関連記事

AMP用CSSについてはid:tomotan_uki さんがサンプル集など詳しく書かれています。
www.tomotanuki.com
www.tomotanuki.com
AMPのメリット・デメリット；
shiromatakumi.hatenablog.com
AMPでAdSense：
www.weblog-life.net