Dropboxのファイルを共有化してから外部CSSとして直リンクする方法について備忘録として書きます。
無料ブログはじめ様々なブログシステムではCSSを書き換えるのに手間がかかる場合があります。
こういう時はDropboxからCSSファイルを直リンクしてしまうのが簡単でお勧めです！CSSの修正がすぐに確認できますよ！
Dropboxを利用して外部CSSリンクとして直リンク
Dropboxアプリをインストールしてから実行するのが簡単です。
Dropboxアプリからの操作
Dropboxアプリを開きます。そして外部CSSとして動作させたいファイルをコピペしてDropbox内に置きます。
次にファイルを右クリックすると「共有」という選択項目が出ますので選んでクリックします。
「リンクを作成」をクリックします。
リンクが作成されるので「リンクをコピー」をクリックしてから適当なテキストファイルにペーストして貼り付けします。
https://www.dropbox.com/s/7jkdhgf0ad5nid2aj/test.css?dl=0のようになると思います。ところがこのURLを直リンクしても外部CSSとしては動作してくれません。
直リンクになるようにURLを修正
これがファイルへの直リンクになるようリンクの書き換えを行います。ここがミソです。
www.dropbox.comの部分をdl.dropboxusercontent.comに書き換えます。更に末尾の?dl=0は削除します。
外部CSSリンクとして動作させる
ついでに外部CSSリンクとして動作可能になるようリンクタグも作りましょう。
<link type="text/css" rel="stylesheet" href="https://dl.dropboxusercontent.com/s/7jkdhgf0ad5nid2aj/test.css">このようにして作成した外部CSSファイルはアメブロや、はてなブログなど様々なブログシステムで使用することができます。httpsプロトコルで配信されますので常時SSL化にも対応し混在コンテンツとなることもありません。
なによりこのファイルを手元で書き換えるとスグにCSSが反映されるようになります。いちいち「変更を保存」ボタンを押したりする手間が省けます。とても便利です！
CSS設定の確認に便利なChrome拡張機能
CSSを変更したらきちんと修正できているか確認しましょう。
こちらの記事で紹介しているCSSViewerというChromeブラウザの拡張機能が便利です。ぜひインストールしてみてください。
まとめ
Dropboxを利用してCSSファイルを外部から直リンクさせると非常に快適です。
はるなぴは秀丸でサクッとCSSファイルを開き修正して保存。もうこれで反映されます。
Chromeブラウザで修正ページを開き、必要ならF5でリロード。CSSViewerをクリックして該当箇所にカーソルを当てればすぐに確認できます。とっても便利です。お勧めです！
