こんにちは、エンジニアのオオバです。
※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更新ワークフローがとても効率的になりました。
最後に
ぼくは効率化ブーム到来中です。
特にコードの自動生成にハマっていますので、
どこかで記事にできればと思います。
この記事が気に入ったらフォローしよう