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

ファイヤードブログ

ディジタル・パブリッシングという観点から、Webサイト制作、電子書籍制作などを。※ブログリニューアル中

はてなブログオリジナルテーマ開発のSassボイラープレート作ったよ

WebDev

github.com

なにこれ?

 はてなが公開している、はてなブログオリジナルテーマのためのボイラープレートのSass版です。元はLESSで書かれているのだけれど、自分はSassを使うので、勝手に改変しました。

ポイント

 基本的にはLESS記法をSass記法に改めただけなのですが、2つポイントがあります。まず、要素をファイルに分けてimportで束ねました。CSSにする際は、このファイルをコンパイルしてください。なんで分けて束ねたかというと、どんな要素がどれだけあるのかが分かりにくかったからです。分ける基準は、元のファイルのコメントに沿っただけで、独自の編集視点はありません。

@charset "utf-8";
/*
  Theme: Hatena Blog Sass Boilerplate
  Author: Phiyard
  Description: はてなブログのボイラープレート
  Licensed under the MIT license.
*/

/*  import normalize */
@import "sass/_normalize.scss";
/*  import mixin */
@import "sass/_mixin.scss";
/*  import variable */
@import "sass/_variables.scss";
/* common */
@import "sass/_common.scss";
/* buttons */
@import "sass/_buttons.scss";
/* layouts */
@import "sass/_layouts.scss";
/* breadcrumbs */
@import "sass/_breadcrumbs.scss";
/* entry */
@import "sass/_entry.scss";
/* comment */
@import "sass/_comment.scss";
/* sidebar */
@import "sass/_sidebar.scss";
/* pager */
@import "sass/_pager.scss";
/* footer */
@import "sass/_footer.scss";
/* aboutpage */
@import "sass/_aboutpage.scss";
/* archive */
@import "sass/_archive.scss";
/*  import media queries */
@import "sass/_media-queries.scss";

 あと一つは、変数をBootstrapのSass版を元に足しています。ただ、作業中なのでまだ完全ではありません(なので今はβ扱い)。ベータ版とは言いましたが、もちろんコンパイルした時にエラーは出ずちゃんとCSSは生成されます。

どこにある?

 GitHubにあげたよ。繰り返しになりますが、まだ変数管理が微妙なので、β扱いです。それにもかかわらずアップロードしてしまったのは、初めての自作リポジトリだったからなんです。舞い上がってしまったんですね。この辺、まだまだ可愛いというか幼いですな、自分。github.com

今後

 まずこれとは別に、私が作った面白い(はず)オリジナルテーマを2つから7つ公開しますので、楽しみにしてください(どうしてこういう数の指定になるかは、いずれわかります)。このボイラープレート自体の方向性はちゃんと定まっていません(元のボイラープレートに不備があると感じている部分を補うべきか、あるいは忠実なSass版として原型を止めておくか)。