はてなブログのcssをDropboxに保存して編集しやすくしよう

f:id:c-miya:20170321205118j:plain はてなブログのcssをカスタマイズする時、デザイン設定から編集しますが、これがなかなか使いにくいです。そこで、cssファイルをDropboxに保存し、それを読み込ませるようにすることで編集しやすくできます。

css編集ボックスは使いにくい

f:id:c-miya:20170321205721j:plain 通常はデザイン設定のデザインcssにcssを追加して編集します。ただここは狭いしフォントは小さいし、使いにくいんですよね。できればPC上で使い慣れたテキストエディタを使って編集したいところです。そこで、Dropbox上にcssファイルを保存して、はてなブログからそれを参照するようにします。

1.共有リンクを取得

まずはDropbox上にcssファイルを作成して保存します。保存する場所はどこでもOKです。

f:id:c-miya:20170321205942j:plain そしてファイルを右クリックしてDropboxリンクをコピーをクリックします。

これで以下のようなURLがクリップボードにコピーされます。

https://www.dropbox.com/s/spq6wdi6nzmz621/tender.css?dl=0

これをテキストエディタなどにペーストして、以下のようにURLを変更します。

https://dl.dropboxusercontent.com/s/spq6wdi6nzmz621/tender.css

つまり、https://www.dropbox.comhttps://dl.dropboxusercontent.com に変更し、?dl=0を取り払います。

2.headに要素を追加

f:id:c-miya:20170321210522j:plain 続いて、はてなブログの設定詳細設定からheadに要素を追加に以下のコードを追加します。

<link href="取得・変更したcssファイルのURL" rel="stylesheet">

これではてなブログのheadからDropbox上のcssファイルを読み込ませることができます。
そしてPC上でcssファイルを編集・保存すればDropboxのファイルも同期されて更新され、はてなブログ上の表示も変更されます。

f:id:c-miya:20170321211131j:plain やっぱり使い慣れたエディタで編集するのが一番ですね。ちなみに、私はEmEditorを使っています。

Publicフォルダではなく共有リンク

同じようにDropboxにcssファイルを置く方法を解説している記事はたくさんあります。その中でDropboxのPublicフォルダを使う方法があり、2017年3月15日以降は使えなくなった、と言うものがあると思います。しかし今回のものはPublicフォルダでなくても使えます。

そもそもPublicフォルダは基本的に2012年10月4日以前に作成したDropboxアカウントにしかなかった機能でした。今回の方法はDropboxの新しい共有方法を使ったもので、今までPublicフォルダを使えなかった人でも誰でも使うことができます。便利ですね。

Dropboxに置くことのデメリット

はてなブログのcssをDropbox上に置いて読み込ませるのは通常の利用方法とは違います。なので何かしら問題が発生する可能性もあります。それについては覚えておきましょう。

f:id:c-miya:20170321212030j:plain:leftとりあえず、head要素に入れてしまうことで基本的にcssがはてなブログのPC版とスマホ版両方に適用されてしまいます。レスポンシブにチェックを入れてる入れてないに関わらず、です。cssの内容によっては致命的になるので注意しましょう。

一応の解決策としては、head要素に入れるコードを以下のようにすればなんとかなる…かもしれません。

<link href="取得・変更したcssファイルのURL" rel="stylesheet" media="screen and (min-width:500px)">

media=“screen and (min-width:500px)”を入れることで、スクリーンの横幅が500ピクセル以上のときのみcssが読み込まれるようになっています。

まとめ

私もテーマを作るときなどはDropboxにcssファイルを置いてそこで作業しています。やっぱり楽ですよ。
しかし、ある程度のデメリットもあるので、テーマが完成したら全部コピーしてはてなブログのcss欄に貼り付けるのがいいと思います。そのほうが無難です。

普段はそんなにcssをいじることもないと思いますので、大規模な作業をするときのみ今回のような方法を取るのがいいかな、と思います。でも作業効率は絶対にあがりますので、cssをよく編集する人はぜひ試してみてください。