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

kyabana's blog

ユルいめのブログ

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

はてなブログ

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

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

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

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

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

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

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

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

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

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

だけです!

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

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

らくちん環境のつくり方

  1. Dropboxアプリをインストールします
  2. パソコン上にできたDropboxのパブリックフォルダにCSSファイルを置きます
    • Dropbox ウェブサイト側にもCSSファイルが自動的に保存されます
    • LESSの出力先をパブリックフォルダにしてもいいですねー
  3. Dropbox ウェブサイトにいってCSSファイルの「公開リンク」をコピーします
  4. コピーした「公開リンク」をはてなブログの管理画面に貼って「変更を保存する」をクリック

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

らくちん。

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

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


よいですよ。この環境。