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

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

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

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

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

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

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

Dropboxと連携する

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

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

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

1.DropboxにCSSを追加する

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

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

2.ファイルの共有設定をする

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

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

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

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

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

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

3.共有リンクを修正して直リンクを取得

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

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

4.CSS定義をヘッダに追加

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

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

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

最後に

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

👉 オススメ記事

2021秋 Asset Refreshセール
100以上のアセットがなんと50%OFF!!オオバもいくつか買いました!
期間 : 10月2日午後3時59分まで