渋谷ほととぎす通信

新しいこと、枯れたこと問わず大庭が興味を持ったものを調査、生活の効率を求める完全趣味の技術ブログ。基礎を大事にしています。

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


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

はてなブログ管理画面から生CSSを入力しないといけません。 あまりブログデザインを更新しないのであれば、このシステムでも良いのですが、頻繁に更新する場合にこのワークフローは非効率極まりないです。

ということで、はてなブログのCSSを外出しして管理します。

Dropboxと連携する

ググると同じようなことを考えている人はいて、参考にさせてもらいました。 基本無料で済ませたいので、Dropboxとその共有機能を使って実現します。

1.DropboxにCSSを追加する

ファイル名はなんでもよくて、このブログの場合はshibuya24.cssとしてDropbox/Public/shibuya24.cssと配置しました。

配置場所はどこでも大丈夫です

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

f:id:esakun:20190815222906p:plain Web版のDropboxへ移動し、共有したいファイルの所にいって共有ボタンをクリックします。
f:id:esakun:20190815222952p:plain リンクを作成をクリックします。
f:id:esakun:20190815223032p:plain リンクをコピーをクリックして、共有リンクを生成します。

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

最後に

最近は公私ともに効率化ブームです。
特にコードの自動生成にはまっていますので、どこかで記事にできればと思います。

体調悪い > めんどうくさいに敏感 > 効率化を求める ようになるという記事を以前書きましたのでどうぞ。