はてなブログのCSS編集が使いづらい人はDropboxを使いましょう

2017/03/18追記

Publicフォルダの変更による物だと思いますが、この方法は現在使えなくなっています。残念。

2017 年 3 月 15 日より、Dropbox アカウントの Public フォルダは通常のフォルダと同じになります。デフォルトでは、このフォルダは非公開になります。今回の移行操作は自動的に行われます。

Public フォルダ – Dropbox ヘルプ

2017/03/22追記

id:c-miyaさんからブコメを頂きました。

はてなブログのCSSをDropboxに置けなくなったのでGitHub Pagesを使うようにした - なか日記

ちょっとURL変えればDropboxで大丈夫ですよ。<a href="https://dl.dropboxusercontent.com/s/8h9zwdwle12phz6/nakaji.hatenablog.com.css" target="_blank" rel="noopener nofollow">https://dl.dropboxusercontent.com/s/8h9zwdwle12phz6/nakaji.hatenablog.com.css</a>

2017/03/21 15:18

な、なんだってー

URLの取得方法はもちろん、Dropbox上のファイルを参照することのデメリットなど、id:c-miyaさんがブログに詳しく書かれていますので確認してみて下さい。

www.foxism.jp

以下、本文

先日、ブログのデザインを変更しました*1がそれに合わせてはてなブログのデザインCSSをDropboxに置くようにしました。

元ネタはテーマを提供されてたid:waitingmoonさんの下記記事です。

やること

手順はとても簡単です。

1. CSSファイルをDropboxに置く

デザインCSSの内容を全部コピーしてcssファイルを作成します。

それを作ったcssファイルをDropboxに放り込んで共有リンクを取得します。

2. はてなブログでデザインCSSに1行追加

デザインCSSに下記1行を記述します。URLはDropboxの共有リンクね。

@import url("https://dl.dropboxusercontent.com/u/9999999/HatenaBlog/nakaji.hatenablog.com.css");

こんな感じ。

2'. はてなブログの設定でheadに要素を追加する（2016/1/7追記）

デザインCSSにテーマ固有のCSSがimportされている場合、2のデザインCSSに設定する方法だとレスポンシブデザイン対応のテーマが意図したデザインにならなかったり、カスタマイズしたCSSが上手く適用されないことがあるようです。

※詳しくは下の記事参照

そんな時はheadに要素を追加しましょう。というか、この方法が一番無難かもしれませんね。

「設定」→「詳細設定」→「検索エンジン最適化」内にある「headに要素を追加」という項目に以下の1行を追加します。

<link rel='stylesheet' href='https://dl.dropboxusercontent.com/u/2771162/HatenaBlog/nakaji.hatenablog.com.css' type='text/css' media='all' />

こんな感じ。

うれしいこと

当たり前ですが、好きなエディタで編集ができます。いいね。

保存すると即Dropboxで同期されるので、ブラウザで自分のブログをリロードすればOK。

デメリット

プレビューで確認できなくなるというデメリットはあります。

私の場合、常時誰かが見てるブログじゃないので多少なら問題ないかなと思ってます。それよりも、デザイン変更時にはてなブログの設定画面からゴニョゴニョする必要が無くなるメリットの方が大きいと感じてます。

Dropboxじゃなくてもいいかも

誰でも参照できる場所にあればいいので、OneDriveやGoogle Drive、GitHubなんかでもいけそうですね。

めんどいので試しませんけど。

おしまい。

*1:気分を変えるべく、ブログのデザインを変更しました - なか日記