はるなぴログ

WEBサイト作成技術研究

ドロップボックスのファイルを共有化してから外部CSSとして直リンクする方法

f:id:hal7pi:20180609153815j:plain

ドロップボックスのファイルを共有化してから外部CSSとして直リンクする方法について備忘録として書きます。

はるなぴはアメブロでもこの方法でスマホ用のCSSを適用しています。

ドロップボックスアプリをインストールしてから実行するのが簡単です。

ドロップボックスアプリを開きます。そして外部CSSとして動作させたいファイルをコピペしてドロップボックス内に置きます。

次にファイルを右クリックすると「共有」という選択項目が出ますので選んでクリックします。

f:id:hal7pi:20180609153813p:plain

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

リンクが作成されるので「リンクをコピー」をクリックしてから適当なテキストファイルにペーストして貼り付けします。

f:id:hal7pi:20180609153809p:plain f:id:hal7pi:20180609153806p:plain

https://www.dropbox.com/s/6jkdhgf05nid2aj/test.css?dl=0

のようになると思います。ところがこのURLを直接リンクしても外部CSSとしては動作してくれません。

これがファイルへの直リンクになるようリンクの書き換えを行います。ここがミソです。

www.dropbox.comの部分をdl.dropboxusercontent.comに書き換えます。更に末尾の?dl=0は削除します。

ついでに外部CSSリンクとして動作可能になるようリンクタグも作りましょう。

<link type="text/css" rel="stylesheet" href="https://dl.dropboxusercontent.com/s/6jkdhgf05nid2aj/test.css">

このようにして作成した外部CSSファイルはアメブロや、はてなブログで使用することができます。httpsプロトコルで配信されますので常時SSL化にも対応し混在コンテンツとなることもありません。

なによりこのファイルを手元で書き換えるとスグにCSSが反映されるようになります。いちいち「変更を保存」ボタンを押したりする手間が省けます。とても便利です!