はてなブログのカスタムCSSをローカルで編集する
はてなブログのCSSを編集する際、ブラウザの中のエディタで全てを完結させるのはちょっとつらいです。
編集したCSSをプレビューで見れますが、変更を保存するかゼロに戻すかしかないので大掛かりな改修は現実的でないです。
これをローカルでデザインを完成させてからアップロードしたり、gitなどで管理できればだいぶ楽になります。
骨組みとなるHTMLをまるごとダウンロード
chromeを使った方法です。
他のブラウザでも同様の機能があるのでどれでもいいですが、safariの場合.webarchiveという拡張子になってしまいCSSだけを抜き出すのが難しくなるので気をつけます。
chromeで自分のはてなブログのページを開いて、[ファイル] -> [ページを別名で保存...]を選択。
適当な保存場所を選ぶ。画像・CSS・スクリプト等各種ファイルが入ったフォルダとページのHTMLがローカルに保存される。
フォルダを開くとcaf2807...301e92みたいな１６進数４０桁のファイル名が付いた拡張子なしのファイルがあるので、.cssと拡張子を付ける。*1HTMLファイルを開いて
caf2807...301e92を読み込んでいる箇所を探す、検索を使うと早い。
<link rel="stylesheet" href="caf2807...301e92">みたいな感じで読み込まれているので、ここもhref="caf2807...301e92.css"という風に拡張子を付けておく。CSSを編集する。
HTMLファイルをブラウザで開いてデザインを確認する。
もちろん、ここからはCSSプリプロセッサを導入したり、スクリプトを読み込んだりして編集していってもいいです。
ブラウザのデベロッパツールを活用
ブラウザとエディタを行き来しながらデザインを編集するのは結構骨が折れるので、デベロッパツールでスタイルを追加・編集しながらある程度見た目を調整出来たらエディタに移すという風に作業を進めると楽でした。
ただし、うっかりリロードを掛けるとスタイルが全部消し飛ぶので、あまり作りこまず、小さい単位でエディタに移していくのが吉です。
