T.I.D.

Git や GitHub と戯れる、オレオレ的おとなの遊び場

Octopressのスタイル設定とカスタマイズ

Octopress には、スタイル設定に Sass と Compass が導入されているため、カスタマイズには、SCSS（Sassy CSS）に関する知識が必要である。

この際だから覚えてしまうことにする。

Sass 関連の参考資料

たぶん何度も読み直すと思うので、ここにメモ。

Sass

Compass

Octopress の Sass 構成

sass/
├─ screen.scss              # 全ての定義の始まりであり、終わり
├─ _base.scss               # 各 base/* の読み込み
├─ base/
│  ├─ _utilities.scss       # sass の関数など
│  ├─ _solarized.scss       # コードスニペットの色定義
│  ├─ _theme.scss           # テーマカラーに関する定義など
│  ├─ _typography.scss      # 各 HTML 要素のフォントに関する定義
│  └─ _layout.scss          # メディアクエリ、サイドバーの折り畳みなど
├─ custom/
│  ├─ _colors.scss          # テーマカラーのカスタマイズ用
│  ├─ _fonts.scss           # フォント種類のカスタマイズ用
│  ├─ _layout.scss          # パディング、マージンのカスタマイズ用
│  └─ _styles.scss          # その他のスタイルに関するカスタマイズ用
├─ _partials.scss           # 各 partials/* を読み込み
└─ partials/
   ├─ _header.scss          # ヘッダー部に関するスタイル定義
   ├─ _navigation.scss      # ナビゲーションバーに関するスタイル定義
   ├─ _blog.scss            # 記事に関するスタイル定義
   ├─ _sharing.scss         # ソーシャルボタンに関するスタイル定義
   ├─ _syntax.scss          # コードスニペット関連のスタイル定義
   ├─ _archive.scss         # アーカイブ、カテゴリページのスタイル定義
   ├─ _sidebar.scss         # sidebar/* の読み込み
   ├─ sidebar/
   │   ├─ _base.scss        # サイドバーの汎用スタイル定義
   │   ├─ _twitter.scss     # セレクタ "#tweets" の定義
   │   ├─ _googleplus.scss  # セレクタ ".googleplus" の定義
   │   ├─ _pinboard.scss    # セレクタ "#pinboard_linkroll" の定義
   │   └─ _delicious.scss   # セレクタ ".delicious-posts" の定義
   └─ _footer.scss          # フッター部に関するスタイル定義

screen.scss

screen.scss 
1
2
3
4
5
6
7
8
9
10

@import "compass";
@include global-reset;
@include reset-html5;

@import "custom/colors";
@import "custom/fonts";
@import "custom/layout";
@import "base";
@import "partials";
@import "custom/styles";

1〜3行目は、Compass Reset Utilities の Mixin を利用するための設定。5〜10行目の読み込み順が重要。スタイル定義の優先順位が決まる。

カスタマイズ例

sass/custom/ 以下のファイルでカスタマイズする。

_color.scss

まずはテーマカラーの調整。

_color.scss 
1
2
3
4
5
6

// Change colors defined in _theme.scss
$header-bg: #04263e !default;
$nav-bg: desaturate(lighten(#a0bfd6, 18), 5) !default;
$footer-bg: #d1e4f2 !default;
$footer-color: #666 !default;
$footer-link-color-hover: darken($footer-bg, 50) !default;

_styles.scss

その他の細かなスタイルのカスタマイズ。

_styles.scss 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// Change definitions in _typography.scss
@mixin header-text {
  @include text-shadow(-5px -5px 10px #000);
}

body > header h1 {
  @include header-text;
}
body > header h2 {
  @include header-text;
}

@media only screen and (min-width: 992px) {
  h1 { font-size: 2.2em; }
}

// Change definitions in _theme.scss
html {
  @include background(linear-gradient(top, $page-bg, $header-bg));
}
body {
  @include box-shadow(0 0 15px #000);
}

謎の右マージンを直す

サイドバーのツイッターを有効にすると、謎の右マージンが現れる。

原因は、サイドバー内側の幅が 260px に設定されているのに対し、フォローボタンに幅が指定されておらず、デフォルトの 300px となっていること。

source/_include/asides/twitter.html で、フォローボタンの幅を data-width="260px" と指定して解決（auto に設定してもダメ）。

twitter.html 
1
2
3
4
5

  {% if site.twitter_follow_button %}
    <a href="http://twitter.com/{{ site.twitter_user }}" class="twitter-follow-button" data-show-count="{{ site.twitter_show_follower_count }}" data-width="260px">Follow @{{ site.twitter_user }}</a>
  {% else %}
    <p>Follow <a href="http://twitter.com/{{site.twitter_user}}">@{{ site.twitter_user }}</a></p>
  {% endif %}
参考情報
2012年1月11日 追記

おそらく 本家のこのコミット で直ったと思う。

Comments