デザインのカスタマイズ

2015-02-14middlemanslimsass

Middleman-Blog-jaのスタイルシートは、Bourbon / Neat を利用しています。デザインのカスタマイズを行うには、source/assets/css 以下のscssファイル群を編集してください。

ファイルツリーはこのようになっています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
├── _normalize.scss
├── _variables.scss
├── all.css.scss
├── base
│   ├── _base.scss
│   ├── _buttons.scss
│   ├── _forms.scss
│   ├── _grid-settings.scss
│   ├── _lists.scss
│   ├── _tables.scss
│   ├── _typography.scss
│   ├── _variables.scss
│   └── extends
│       ├── _button.scss
│       ├── _clearfix.scss
│       ├── _errors.scss
│       ├── _flashes.scss
│       └── _hide-text.scss
└── partials
    ├── _article.scss
    ├── _footer.scss
    ├── _grids.scss
    ├── _header.scss
    ├── _highlight.scss
    ├── _index.scss
    ├── _meta.scss
    └── _sidebar.scss

読み込むscssファイルは、all.css.scss で設定してください。

サイトの色、文字の大きさなどは、_variables.scss で設定可能です。

base/ 以下は、Bittersです。特に編集する必要はないでしょう。

HTMLテンプレートのカスタマイズ

テンプレートエンジンに Slim を採用しています。

テンプレートは、source/layouts 以下です。また、インデックス・ページに関しては、source/index.html.slim, source/calendar.html.slim, source/tag.html.slimを編集してください。