(cache) 「はてなブログ」のCSS設定を外部ファイル化して編集を楽ちんにする方法

以前にも書きましたが「はてなブログ」のCSS設定の画面は使い勝手が悪いのです。

他のことするたびに閉じられるし、字は小さいし。

そこで上の記事を書いたのですがこれは「はてなブログPro」の方への限定方法でした。
（実際は「はてなダイアリー」の「ファイル管理」機能を使ってます。）

今回は無料利用中の「はてなブログAmateur（仮称？）」の方でも大丈夫な方法で、「はてなブログ」のデザインCSSの設定を外部ファイル化します。

CDNを使って「はてなブログ」のデザインCSSの設定を外部ファイル化する

今回「はてなブログ」のデザインCSSの設定を外部ファイル化するにあたっては「CDN（コンテンツデリバリーネットワーク）」という方法を使います。

これは簡単に言うと「ファイルをインターネット上の近い経路のサーバからダウンロードして使う（超ざっくり）」というものです。

詳しくは以下のサイトがわかりやすく解説してくれています。

本来はCDSサービスは有料ばかりだったのですが、なんと無料でCDSサービスを提供してくれている会社があります。

無料で使えるサービスは

利用可能なDISK総容量	1ファイルの最大サイズ	ファイル数	転送量
50MB	500KB	1000ファイルまで	月間200GB前後まで

ということなので容量的に少ないので画像や動画はアップできませんが、CSSファイルを転送しておくには十分だと思います。

しかもアップロードしたファイルは自動で圧縮されるのでダウンロード時間の短縮にもつながります。

CSSファイル外部化の手順は簡単です。

だけです。

ファイルを修正したら「CDN-Tokyo」にファイルをアップロードするだけです。

わたしの場合のURLはこんな風になりました。

<link type="text/css" rel="stylesheet" href="http://file.cdn.tokyo/cdn/whiteobake/min/hatena_main.css">

これをヘッダー部分に入れます。
このファイルをブラウザーで見ると「改行や無駄な空白」が無くなって圧縮されていることがわかると思います。

注意事項としては、ファイルを修正した際にアップロードしてもしばらく変更が反映されない時があるようです。
（しばらくすると反映されています。）

また、CDN-Tokyoを無料で使うには「180日に1回CDN-Tokyoにログイン」しなければなりません。
（しないとアカウントが凍結されるうようです。）