はてなブログのCSSをDropboxへ置いて読み込ませたらカスタマイズが超捗った

はてなブログのカスタマイズが楽しい。

カスタマイズ系の記事も参考にさせてもらいつつ、ヘッダーへイメージ画像を設定したり、グローバルメニューをつけたり、見出しのデザインを変更したりなどなど。シムシティ感覚で少しずつ育てている。

ただ、CSSを編集する度にはてなブログのメニューからアクセスしなければならないのを負担に感じるようになってきた。少し編集してプレビューで確認してまたあの小さな編集ウィンドウにアクセスし直すというループがちょっと辛い。

そこで、Dropboxの公開フォルダへCSSファイルを置いて読み込ませるようにした。自分の使い慣れたエディタで編集できるし、変更はすぐに反映されるのでカスタマイズが格段に楽になった。

手順をメモとして書いておく。
※念のため作業前にバックアップをお忘れなく。

はてなブログのCSSファイルをDropboxへ置く

デザイン → カスタマイズ → デザインCSS　と進みインポートされているCSSを開いてテキストファイルへコピー。カスタマイズしたCSSがあればそれも書き加えておく。
テキストファイルの拡張子を.cssにして保存。
保存したCSSファイルをDropboxの共有フォルダへアップする。
共有フォルダのCSSファイルを右クリックして「公開リンクをコピー」を選択。
例： https://dl.dropboxusercontent.com/u/xxxxx/xxxxx.css
はてなブログの　設定 → 詳細設定 → head に要素を追加　部分へCSSへのリンクを記述する。
例：<link rel="stylesheet" href=" https://dl.dropboxusercontent.com/u/xxxxx/xxxxx.css" type="text/css" />
元のデザインCSSを削除する。

これであとはパソコンの中のDropboxフォルダにあるCSSファイルを編集すれば同期アップロードされるようになる。やったね！