わふうの人が書いてます。

iOSアプリケーション開発、BLEのファームウェアとハードウェア試作のフリーランスエンジニア。

Octopressのカスタマイズ

Octopressを使ってブログを書いているのですが、見た目の調整をしたので、その作業メモ。やりたいことは:

  1. サイドバーにアマゾンリンクをのせたい。
  2. 見出しの文字が大きいのを調整したい。

サイドバーにアマゾンリンクをのせたい。

サイドバーは、1.どのファイルをサイドバーに入れるかを _config.yml ファイルに設定、2.読み込むべきファイルを作る、の2ステップです。
まず _config.yml を編集。アマゾンリンクは自己紹介と一緒のファイル custom/asides/about.html に入れることにしました。表示させたくないasidesをコメントアウトしました。

1
2
3
# To add custom asides, create files in /source/_includes/custom/asides/ and add them to the list like 'custom/asides/ custom_aside_name.html'
default_asides: [custom/asides/about.html, asides/recent_posts.html, asides/github.html, asides/twitter.html]
#asides/delicious.html, asides/pinboard.html, asides/googleplus.html]

次に source/_includes/custom/asides/about.html を書きます。

1
2
3
4
5
6
7
8
<section>
<h1>About Me</h1>
<p>A little something about me.</p>
<h1>自己紹介</h1>
<p>iPhone 関連のハードウェア開発の開発者。個人事業主(屋号 リインフォース・ラボ)、合同会社わふう 代表社員。 </p>
<h1>著作紹介</h1>
<iframe src="http://rcm-jp.amazon.co.jp/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=feb-hare-22&o=
</section>

見出しの文字を調整する

H1とH2の見出しの文字サイズを調整しました。 sass/custom/_styles.scss に設定を追加します。 sass はCSSと互換で、変数の使用などを拡張した表記フォーマットでRubyでパースしてCSSを作り出す仕組み、らしいです。ですから、スタイルはoctopressの仕組みではなく、sassで書きます。

参考 : Octopressのスタイル設定とカスタマイズ(http://tokkonopapa.github.com/blog/2012/01/03/customizing-octopress-styles/)

まずタイトルの見出しのフォントサイズを1.8emに設定、2つ目以降の見出しのタイトル下の空白を設定しました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 article {
//タイトル見出し
h1 { font-size: 1.8em;}
// タイトル直下の見出し
h2 {
padding-top: 0.8em; //タイトル直下のスペース
font-size: 1.3em; //記事最初の見出しのフォントサイズ
}
h3 {
font-size: 1.1em;
}
.entry-content & h2:first-child, header + h2 { padding-top: 0; } // その他のタイトルの下余白を0に
h2:first-child, header + h2 { background: none; } //
}

ul {
margin-left: 2em;
}