最終更新: 2017/04/02
注意: ちょっとたんま、グーグル様から「AMP用のスタイルシートにcriticalレベルのエラーあるから、直せや」ってメールきたから、修正必要。エラー修正したらこの記事も更新するから、まだ参考にしないでください。
-> 解決。!important というルールを使っているとだめなようです。外してみて、エラーがでなくなるか様子見てみる(2017/04/02更新)。
先日はてなAMPのCCS解禁されたので、設定入れてみた。
最近AMPに対応させた当ブログ(その時の記事はこちら)。すくなからず先輩ブロガーさんたちの動向も参考にしていた。そのなかで、「はてなブログのAMPだとCSS適用できないからデザインが崩れるー」、という嘆きをブロガー先輩方の記事でよく見かけた。
うちみたいにデザインほとんど考慮してない、テーマ使用させてもらってやってるだけのところではAMPのCSSなんて関係ないなーと思っていた。というかCSSよくわかってない😝。
でも、一点だけ。\<strong>をCSSで蛍光マーカー風のハイライトを掛けている設定はいれていて、それがAMPだと\<b>と同じ太字になってしまっていた。
もうそこだけ。そこだけ改善できたらなーと思っていたので、実現できて満足です。
個人的にはAMPページは潔いほどシンプルな方が「お、AMPやっとるな🙂」という感じでよい。主観ですが。
設定方法
ダッシュボード→デザイン→スマホマーク→詳細設定→AMP用CSS
ここに以下を記述 (!importantを使うとエラーがでるので外しました。その他ルールはこちら。)
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%) ; }
う、うまくいきました!
Before -> After
↓
参考にさせていただいたページ
関連記事
そんじゃーの!