はてなブログのテーマ作成で--output-style compressedにするとレスポンシブ対応が効かなくなるのを解決

こんにちは。レモンティーです。

今回は、はてなブログのテーマ作成についてです。

このブログではずっと公式テーマを使っていたのですが
最近見た目を変えてみたくなってテーマをつくりました。
blog.hatena.ne.jp


テーマは公式のBoilerplateをクローンしてsassでつくります。このとき、--output-styleをcompressedにするとスマホで表示した時にPC版がそのまま表示されてしまいます。expandedならちゃんとレスポンシブ対応になっていたのに…

その原因はここ↓に書いてあります
help.hatenablog.com

レスポンシブ対応するにはResponsive: yesというコメントが必要なのですが、compressedにすると消えてしまうんですね。なのでboilerplate.scssファイルのコメントを/* hoge */から/*! hoge */に変えれば解決します。

こんな感じです

/*!
  Theme: hoge
  Author: hoge
  Responsive: yes
  Description: hoge
*/

あとはpackage.jsonに開発用と別にcompressedでビルドするコマンドを追加して、

  "scripts": {
    ...
    "build-prod":"npm-run-all scss-prod autoprefixer-prod",
    "scss-prod":"node-sass scss/boilerplate.scss build/prod.css --output-style compressed",
    "autoprefixer-prod": "postcss --use autoprefixer -r --no-map build/prod.css"
  },

ビルドしたいタイミングで

npm run build-prod

を実行すればbuildディレクトリにprod.cssが生成されます。

これで--output-style compressedでもレスポンシブ対応できます。今回つくったテーマの場合、元々34kBくらいあったのが13kBになりました。画像1枚分にも満たない変化なので意味はないかもしれません笑

ちなみに今回使用した!付きコメントは公式には書かれていないので今後も使えるかはわかりません。……ということが2011年頃からずっと言われているようなので多分大丈夫(?)


今回はこれでおしまいです。


www.sawalemontea.com