こんにちは、エンジニアのオオバです。

※2021年9月はてなブログをやめました

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

• はてなブログ管理画面から生CSSを入力
• プレビューが遅い
• プレビューしたい画面を見れない

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

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

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

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

→11万文字で徹底解説した「DOTweenの教科書」Unityアニメーションの超効率化ツールはこちら

Dropboxと連携する

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

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

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

1.DropboxにCSSを追加する

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

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

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

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

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

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

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更新ワークフローがとても効率的になりました。

最後に

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