カラクリサイクル

『輝かしい青春』なんて失かった人の雑記

はてなブログ Pro の AMP サポート (Beta) を有効にして CSS を設定した

本日の作業です。


ここの所、割と本腰を入れてこのブログ (はてなブログ Pro でホスト) をメンテナンスしているんですが、 今回、このブログ (カラクリサイクル) に対して、

  • はてなブログ Pro の AMP サポート機能 (Beta)

を有効にした上で、おおよそお見た目が同じような感じになる様に、CSS を書き足してみました。 そのため、おそらくは固有リンクページで URL に ?amp=1 を足すと、AMP 対応のページが見れると思います。

ただ、はてなブログ Pro の AMP サポート機能 (Beta) は、はてなブログ側が提供するデフォルトの HTML や CSS の定義が、 微妙なところで Desktop 等と異っているので、その辺りの加減で、完全に見た目の感じが一致、と言うところまでは出来ていません。

そのため、基本的にはレスポンシブモードと同じ様な見た目なんですが、レスポンシブモードと AMP ページとでは、 フォントサイズなどが微妙に食い違っているので、ちょっと違和感が有るかもです。はい。(っていうか自分には微妙な違和感が有りました)


で、僕は以前にも書いた様に、今現在、このブログの CSS は SASS (SCSS) を使って書いているので、 今回の作業では、

  1. scss を定義や用途毎に分割して既存のファイルを調整
  2. 既に適用していた CSS の記述漏れや統一されていなかった部分を調整
  3. AMP (Beta) 用に調整した scss を作成

という様なコトを行なっていました。まあ、作業自体は昨日から取り掛かって、 今日の昼食が終わった後の作業で完了した感じですかね。

あと、先にも書いた様に、amp-html への CSS は微妙に細かい所まで詰めれてなくて、 一部表示が崩れてたりもする可能性も無きにしも有らずだし、あと、広告とか表示出来てないんで、 その辺りは今後の課題かな、と思っています。


と言う事で本日は以上です。はい。