はてなブログでデザインテーマコンテストが開催中なので
ひとつ前の記事ではブログを構成するidやclassの紹介をしました。
今回はブログテーマデザインのらくちん制作環境の紹介を。
はてなブログに限らず、ブログのテーマデザインを念入りにつくろうと思うと
- 慣れたエディタでCSSファイルを編集する
- 全て選択してコピー
- ブログの管理画面にペースト
- 変更をブログに反映
- ブログページの表示を更新
の繰り返しになると思います。
カリカリカリ、コマンドエー、コピー、ペースト、コマンドアール。うーん。
カカリカ、コマンドエー、コピー、ペースト、コマンドアール。う、うーん。
うーん。。。
なかなか大変ですよね。
エディタで保存するのを忘れてデータが先祖返りなんてのもしばしば。。。
そこで！もっとらくちんにテーマのデザインをつくる方法を紹介します。
Dropboxのパブリックフォルダを使うとらくちん
DropboxのパブリックフォルダにCSSファイルを置いて
それをはてなブログに読み込むことで
らくちんにテーマデザインの制作をすすめることができます。
これをすると
- 慣れたエディタでCSSファイルを編集する
- エディタで保存する
- ブログページの表示を更新
だけです！
カリカリカリ、コマンドエス、コマンドアール。うーん。
カカリカ、コマンドエス、コマンドアール。う、うーん。
手数が減って、らくちん。
らくちん環境のつくり方
- Dropboxアプリをインストールします
- https://www.dropbox.com/
- インストール方法はこちらなどを参考に「Dropboxの使い方: 公式ソフトをMac/PCにインストールする方法 - たのしいiPhone！ AppBank」
- パソコン上にできたDropboxのパブリックフォルダにCSSファイルを置きます
- Dropbox ウェブサイトにいってCSSファイルの「公開リンク」をコピーします
- コピーした「公開リンク」をはてなブログの管理画面に貼って「変更を保存する」をクリック
- 管理 > デザイン > カスタマイズ > デザインCSS に貼ります
- 公開リンクが
http://dl.dropbox.com/u/********/blog.css
の場合は@import url(http://dl.dropbox.com/u/********/blog.css);
と記述します 
です。
これを最初にするだけで、パソコン上にあるCSSファイルを保存するたびにブログに変更内容が反映されます。
らくちん。
コレするとなにがいいかというと
- 手元のファイルを保存するだけでweb上に反映されるってスバラシイ
- CSSファイルの保存し忘れがなくなる
- 管理画面だと確認が難しいAboutページやarchiveページも確認できる
- はてなブログのページ構成はこちら「はてなブログテーマ制作の手引き」
- 本番環境の動的データを対象にデザインの調整ができる
- HTMLソースをコピーして、パソコン上に静的データ作って、URLの読み込み先調整して、うんぬん、しなくていい
よいですよ。この環境。