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

Minimal Green

はてなブログカスタマイズや、HTML、CSS、サイト制作などについて書いています。

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

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

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 : フリーランスWEB/UIデザイナー

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 : フリーランスWEB/UIデザイナー

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

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

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

タイトル画像を使う

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

/* ヘッダー */
.header-image {
background-repeat: no-repeat;
background-position: 50%;
background-size: cover;/* 領域を埋め尽くす */
width: 100%;
height:160px;/* 画像の高さ */
}
.header-image-wrapper {
  background-color: #fff;/* ヘッダー画像が透明な場合などに背景色を指定する場合 */
}

background-size: cover;のところはcontainにすると背景画像を全体が見えます。但し、上下に余白ができることもあります。

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

ヘッダー画像を使わず、背景とテキストのみで表示します。
以下の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

はてなブログ向けAMP対応サービスやっています

有料カスタマイズサービスでAMP対応も受けています。自分で上手く出来ない場合やわからないことがある場合は是非有料サービスも使ってみてください。お問い合わせいただければ、お見積させていただきます。
料金の目安は内容にもよりますが、3000~5000円です。
design.syofuso.com