以前、はてなブログのAMPにCSS適用させたよ!と意気揚々とブログ書いた。
適当にやってうまくいったと思っていたところエラーがあるよとGoogleからメール届いたので、それの対処をしたよ、という記事になります。ちなみに、この記事の内容をふまえて上記ブログ記事も修正済みであります。
Google Search Consoleからメール
初めて届いたかも。ブログには書いてないかもしれないけど、こないだSearch Console対応させたんだった。
エラーの詳細をおしえてくれるのかと思って、クリックしてみると、
スタイルシートおかしいぞ、こちらのサイトみてなおしんしゃい、という内容らしい。えー、そんだけ?普段CSS書いてない素人なんで、リリースノートとかmanページ見たってわからんですよ。。。
しかたないのでググる
どうもAMP用のURLの末尾に「#development=1」を付け加えると、ブラウザ(Google Chrome)でエラーが確認できるらしい。
デフォルトの記事URLが
AMP表示のURLが
その検証用のURL(末尾に #development=1 を足したもの)が
http://kiyoshi.hatenablog.com/entry/2017/03/31/202623?amp=1#development=1
なうほど。表示上は通常のAMP表示と同じ。ここでブラウザの右クリック→「検証」をクリックすると、ブラウザの右側になにか開発者モードのような難しい文字列が表示された。
右側の表示の上側にタブがあり、「Console」タブをクリック。以下のエラーがそれだ。
ふむふむ 「!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(黄色文字)は残ってるんだよなー。まーそれはこんど気が向いたときでいいか。。。
そんじゃーの。