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

だるろぐ

とてもだるだるした日記です http://about.daruyanagi.jp/

お知らせ

WebMatrix 3: はてなブログをデザインする

WebMatrix はてな

f:id:daruyanagi:20130611221104p:plain

今回は WebMatrix 3 ではてなブログのデザインをいじってみた。みんな、はてなブログのデザインを作るときってどうやってるのかなぁ。あんまり効率のいい方法って思いつかなかったのだけど、こんなのはどうかな、というのを考えてみた。

テーマ確認用のブログを開設する

上記リンクを参考に、テーマ確認用のブログを開設。サンプルエントリーをコピーして、ひととおりの HTML タグをテストできるようにする。自分の場合は、それに追加して、

  • /about
  • /archive

へのリンクを含むページを作っておいた。そうすると、次のステップではかどる。

テーマ確認用のブログをローカルにダウンロードする

この手のソフトはいろいろあると思うのだけど、たまたまこういうのを目にしたので、今回はそれを使ってみた。

f:id:daruyanagi:20130611221741p:plain

まぁ、悪くはないかな。

サンプルエントリーには /archive へのリンクがないと思うので、ひと手間かけてリンクを足しておくと、こういったソフトで一気にダウンロードできて便利。

ローカルフォルダを WebMatrix 3 で開く

f:id:daruyanagi:20130611222051p:plain

ダウンロードしたサイトを保存したフォルダを WebMatrix 3 で開く。コンテキストメニューから開けるよ。実行すれば、ローカルサーバーでホストされ、ちゃんとサイトが表示されるはず。

わざわざ WebMatrix 3 を利用する理由は、いくつかある。

  • テキストエディター:HTML/CSS の入力補完が効く
  • LESS:構造的に CSS が書ける。はてなでも採用しているみたい(WebMatrix で LESS を使おう! - だるろぐ
  • テスト:システムにインストール済みのブラウザーでテストできる(iOS エミュレーターもある)
  • ASP.NET Web Page 2:ページを分割できる(後述)
  • レポート:ダメなマークアップを指摘してくれる(参考程度)
  • セットアップ:IIS とか Apache とか用意するの面倒じゃね?

まぁ、こだわればいくらでもいいツールはあると思うのだけど、オールインワンでめんどくさくないのが WebMatrix のいいところだと思う。

ASP.NET Web Page 2

たとえば、はてなブログにはヘッダーやフッター、記事の下にカスタム HTML が挿入できる。まぁ、それをソースにべた書きしてもいいのだけれど、できれば別ファイルに分離した方がいいよね。

そういうときに ASP.NET Web Page 2 の美味しい部分を使ってやるといい。

まず、index.htm を index.cshtml へリネーム。

f:id:daruyanagi:20130611223237p:plain

これだけでも ASP.NET Web Page が使えるのだけど、そのままだと v1 をつかう羽目になるので、アップデートしておく。

f:id:daruyanagi:20130611223333p:plain

次に、#top-editarea 内を以下のように書き換え。

<div id="top-editarea">
    @RenderPage("~/Header.cshtml")
</div>

これでヘッダーに挿入できるカスタム HTML を Header.cshtml へ分離できた。

ほかにもこんな使い方はどうかな。

スタイルが膨大になると、役割ごとに CSS ファイルを分割したくなる。けれど、はてなのデザイン画面に貼り付けるときは、それを一つに統合しなきゃいけない。

ので。

# ~/StyleSheet.cshtml

@{
    var path = Server.MapPath("~/");
}

<pre>
    @File.ReadAllText(path + "Content/HatenaBase.css")
    @File.ReadAllText(path + "Content/Site.css")
    @File.ReadAllText(path + "Content/Hatena.css")
</pre>

こんな感じのコードを書いてやる。

f:id:daruyanagi:20130611223855p:plain

すると、/StyleSheet を叩くだけで結合済みの CSS が得られる。たいしたことじゃないけど、こういう使い方もありかな。

ちょっとイレギュラーな使い方かもしれないけど、こういうのもあるということで。