読者です 読者をやめる 読者になる 読者になる

攻めは飛車角銀桂守りは金銀三枚

ITとアコースティックギター、そして日常のひとこま。

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

はてな
スポンサーリンク

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

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

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

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

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

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

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

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

無料のCDSサービスCDN-Tokyo

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


  1. 参考CDN-Tokyo

無料で使えるサービスは

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

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

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

CSSファイル外部化の手順

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

  1. CDN-Tokyoにユーザー登録する
  2. CDN-Tokyoにログインして自分の「はてなブログ」のCSSファイルをアップロードする
  3. 「はてなブログ」のヘッダー部分でアップロードした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にログイン」しなければなりません。
(しないとアカウントが凍結されるうようです。)

関連記事