はてなブログAMPにCSS適用させて満足してたら、Googleからエラーあるよメール届いたので修正した

以前、はてなブログのAMPにCSS適用させたよ!と意気揚々とブログ書いた。

kiyoshi.hatenablog.com

適当にやってうまくいったと思っていたところエラーがあるよとGoogleからメール届いたので、それの対処をしたよ、という記事になります。ちなみに、この記事の内容をふまえて上記ブログ記事も修正済みであります。

Google Search Consoleからメール

初めて届いたかも。ブログには書いてないかもしれないけど、こないだSearch Console対応させたんだった。

f:id:kiyoshi_net:20170402220434p:plain

エラーの詳細をおしえてくれるのかと思って、クリックしてみると、

f:id:kiyoshi_net:20170402220657p:plain

スタイルシートおかしいぞ、こちらのサイトみてなおしんしゃい、という内容らしい。えー、そんだけ?普段CSS書いてない素人なんで、リリースノートとかmanページ見たってわからんですよ。。。

www.ampproject.org

しかたないのでググる

どうもAMP用のURLの末尾に「#development=1」を付け加えると、ブラウザ(Google Chrome)でエラーが確認できるらしい。

デフォルトの記事URLが

http://kiyoshi.hatenablog.com/entry/2017/03/31/202623

AMP表示のURLが

http://kiyoshi.hatenablog.com/entry/2017/03/31/202623?amp=1

その検証用のURL(末尾に #development=1 を足したもの)が

http://kiyoshi.hatenablog.com/entry/2017/03/31/202623?amp=1#development=1

なうほど。表示上は通常のAMP表示と同じ。ここでブラウザの右クリック→「検証」をクリックすると、ブラウザの右側になにか開発者モードのような難しい文字列が表示された。

右側の表示の上側にタブがあり、「Console」タブをクリック。以下のエラーがそれだ。

f:id:kiyoshi_net:20170402220249j:plain

ふむふむ 「!important がだめよ」といっているようである(適当)。

たしかに先程のGoogleさんのAMPリリースノートのようなページにもそう書いてあった。

Important

Usage of the !important qualifier is not allowed. This is a necessary requirement to enable AMP to enforce its element sizing invariants.

よし、修正だ

はてなのAMP用記述を編集。たどり方は下記↓。

ダッシュボード→デザイン→スマホマーク→詳細設定→AMP用CSS

<Before>

strong{
margin:0 0.1em;
padding:0.1em 0.2em;
background:#FCDF1D !important;
background:linear-gradient(to bottom, transparent 60%, rgba(252,252,84,0.8) 60%) !important;
}

↓↓↓

単純に「!important」だけ消す。

↓↓↓

<After>

strong{
margin:0 0.1em;
padding:0.1em 0.2em;
background:#FCDF1D ;
background:linear-gradient(to bottom, transparent 60%, rgba(252,252,84,0.8) 60%) ;
}

修正後、もういちど検証ページーのコンソールから見てみたら、エラーが消えてた!バンザイ!これで明日はGoogleからエラーメールこないかな。

error(赤文字)は消えたけど、warning(黄色文字)は残ってるんだよなー。まーそれはこんど気が向いたときでいいか。。。

f:id:kiyoshi_net:20170402222703p:plain

そんじゃーの。