はてなブログのAMP用CSSが編集できるようになったので、試してみた。(蛍光マーカー風強調)

最終更新: 2017/04/02

注意: ちょっとたんま、グーグル様から「AMP用のスタイルシートにcriticalレベルのエラーあるから、直せや」ってメールきたから、修正必要。エラー修正したらこの記事も更新するから、まだ参考にしないでください。

-> 解決。!important というルールを使っているとだめなようです。外してみて、エラーがでなくなるか様子見てみる(2017/04/02更新)。


先日はてなAMPのCCS解禁されたので、設定入れてみた。

staff.hatenablog.com

最近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%) ;
}

f:id:kiyoshi_net:20170331233908p:plain

う、うまくいきました!

Before -> After

f:id:kiyoshi_net:20170331233813p:plain

f:id:kiyoshi_net:20170331233814p:plain

参考にさせていただいたページ

mu2in.hatenablog.com

関連記事

kiyoshi.hatenablog.com


そんじゃーの!