はてなブログテーマのらくちん制作環境

はてなブログでデザインテーマコンテストが開催中なので
ひとつ前の記事ではブログを構成するidやclassの紹介をしました。
今回はブログテーマデザインのらくちん制作環境の紹介を。

はてなブログに限らず、ブログのテーマデザインを念入りにつくろうと思うと

1. 慣れたエディタでCSSファイルを編集する
2. 全て選択してコピー
3. ブログの管理画面にペースト
4. 変更をブログに反映
5. ブログページの表示を更新

の繰り返しになると思います。

カリカリカリ、コマンドエー、コピー、ペースト、コマンドアール。うーん。
カカリカ、コマンドエー、コピー、ペースト、コマンドアール。う、うーん。
うーん。。。

なかなか大変ですよね。
エディタで保存するのを忘れてデータが先祖返りなんてのもしばしば。。。

そこで！もっとらくちんにテーマのデザインをつくる方法を紹介します。

Dropboxのパブリックフォルダを使うとらくちん

DropboxのパブリックフォルダにCSSファイルを置いて
それをはてなブログに読み込むことで
らくちんにテーマデザインの制作をすすめることができます。
これをすると

1. 慣れたエディタでCSSファイルを編集する
2. エディタで保存する
3. ブログページの表示を更新

だけです！

カリカリカリ、コマンドエス、コマンドアール。うーん。
カカリカ、コマンドエス、コマンドアール。う、うーん。

手数が減って、らくちん。

らくちん環境のつくり方

1. Dropboxアプリをインストールします
   • https://www.dropbox.com/
   • インストール方法はこちらなどを参考に「Dropboxの使い方: 公式ソフトをMac/PCにインストールする方法 - たのしいiPhone！ AppBank」
2. パソコン上にできたDropboxのパブリックフォルダにCSSファイルを置きます
   • Dropbox ウェブサイト側にもCSSファイルが自動的に保存されます
   • LESSの出力先をパブリックフォルダにしてもいいですねー
   • 
3. Dropbox ウェブサイトにいってCSSファイルの「公開リンク」をコピーします
   • https://www.dropbox.com/home/Public
   • 
4. コピーした「公開リンク」をはてなブログの管理画面に貼って「変更を保存する」をクリック
   • 管理 > デザイン > カスタマイズ > デザインCSS に貼ります
   • 公開リンクが

     http://dl.dropbox.com/u/********/blog.css

     の場合は

     @import url(http://dl.dropbox.com/u/********/blog.css);

     と記述します
   • 

です。
これを最初にするだけで、パソコン上にあるCSSファイルを保存するたびにブログに変更内容が反映されます。

らくちん。

コレするとなにがいいかというと

• 手元のファイルを保存するだけでweb上に反映されるってスバラシイ
• CSSファイルの保存し忘れがなくなる
• 管理画面だと確認が難しいAboutページやarchiveページも確認できる
  • はてなブログのページ構成はこちら「はてなブログテーマ制作の手引き」
• 本番環境の動的データを対象にデザインの調整ができる
  • HTMLソースをコピーして、パソコン上に静的データ作って、URLの読み込み先調整して、うんぬん、しなくていい

よいですよ。この環境。