はてなブログのCSSをDropbox経由で更新して効率化する

こんにちわ、オオバです。

※2021年9月はてなブログをやめました
👉オススメ記事 : 6年使った有料はてなブログをやめた理由

本ブログは、はてなブログを使用していますが、
CSSの更新がこの上なく面倒臭いです。

このような弊害があります。

ブログデザインをあまり更新しないスタイルであれば
このシステムでも良いかもしれません。

そうではない場合、
このワークフローでは非常に効率が悪いです。

ということで、
CSSを外部に切り出して管理してみます。

Dropboxと連携する

ググると同じようなことを
考えている人は多くいるようです。

ランニングコストは極力小さくしたいため、
基本的に無料で。

Dropboxとその共有機能を使います。

ファイル名に指定はありません。
このブログの場合はshibuya24.cssとしています。

Dropbox/Public/shibuya24.cssに配置しています。
※後述しますがPublicディレクトリを公開ディレクトリとしています。

Web版のDropboxへ移動し、
共有したいファイルの所にいって共有ボタンをクリックします。

リンクを作成をクリックします。

リンクをコピーをクリックして、共有リンクを生成します。

先ほどコピーした共有リンクはファイルへの直リンクではありません。
以下のようにURLを変更して直リンクをゲットします。

https://www.dropbox.comの部分を
https://www.dl.dropboxusercontent.comに置き換え、
?dl=0を削除します。

はてなブログの設定 > 詳細設定 > headに要素を追加の
テキストエリアに以下のように追加します。

<link type="text/css" rel="stylesheet" href="Dropboxの共有リンク">

あとは、CSSをよしなに修正すれば、
ほぼほぼリアルタイムにCSSが更新されるようになります。
CSS更新ワークフローがとても効率的になりました。

オオバは効率化ブーム到来中です。
特にコードの自動生成にハマっていますので、
どこかで記事にできればと思います。