AwAlog

めもちょー

Octopressカスタマイズ2

| Comments

主にテーマの改造など。

色々設定変更してみた2

サイトの言語を日本語に変更

HTMLのlang属性が英語 (en) になっているのを日本語 (ja) に変更する。

octopress/source/_includes/head.html

<html class="no-js" lang="en">

を

<html class="no-js" lang="ja">

に変えるだけ。

日本語しか書かないならやっておいていいと思います。英語ページになってると、Chromeさんの翻訳するかの確認とか出てきたりして地味にうざったかったです。

スタイル変更など

octpress/sass/ 以下の各 *.scss ファイルを修正するだけ。sass については、ぐぐればもっと詳しいサイトが出てくると思うので詳細は割愛します。

デフォルトのテーマを使っているので、以下はデフォルトのテーマについてのみ。だけどおそらく他のテーマでもおおよそ同じはず。

読み込み順

最初に読み込まれるのは screen.scss ファイルで、このファイルを基点に、他の scss ファイルが読み込まれる。この screen.scss に定義されている読み込み順序はカスタマイズする上で重要になる。

scss ファイルには、多くの値に変更できるデフォルト値が定義されている。そして、custom/ 以下の scss ファイルでデフォルト値を上書きできるようになっている。そのため、殆どのスタイル設定変更は custom/ 以下のファイルを修正するだけで行える。

_styles.scss は独自スタイル設定を追加するためのファイルで、最初は何も記載されていない。見た目を変更するようなスタイルをここで定義できる。読み込み順序は一番最後なので、優先度を変えたりして、他かのスタイル設定を上書きしたりする事が可能になる。

何処のスタイルが修正されるかが分かり辛いものが多いのが難点。私は、Chromeの開発者ツール(F12キー)を見ながら、要素に適用されているスタイルを追っかけ、スタイルセレクタを確認して、scssから探し出して…とやりましたが、ちょっとめんどくさかったです…。

とりあえず、以下のように設定してみました。

_colors.scss

$header-bg: #520;

_fonts.scss

$sans: "MeiryoKe_PGothic", "メイリオ", sans-serif;
$serif: "MeiryoKe_PGothic", "メイリオ", sans-serif;
$mono: "MeiryoKe_Gothic", monospace;
$heading-font-family: "MeiryoKe_PGothic", "メイリオ", sans-serif;
$header-title-font-family: "Tekton Pro Ext", "MeiryoKe_PGothic", "メイリオ", sans-serif;
$header-subtitle-font-family: "MeiryoKe_PGothic", "メイリオ", sans-serif;

_layout.scss

$header-font-size: 1em;
$header-padding-top: 1.5em;
$header-padding-bottom: 1.5em;
$indented-lists: true;

_styles.scss

.entry-title {
    padding-left: 5px;
    padding-bottom: 3px;
    border-left: 15px solid #520;
    border-bottom: 3px solid #520;
}
.blog-index > article > header p.meta {
    margin-left: -15px;
    a {
        font-size: 60%;
    }
}
.entry-content h1 {
    margin-left: 5px;
    margin-right: 5px;
    border-top   : 2px dotted #ccc;
    border-bottom: 2px dotted #ccc;
}

MeiryoKe勢です。デフォメイリオの文字間落ち着かない、他OSのデフォフォントを華麗にスルーしちゃってますが、その手のOS使いは自分で解決してるはずなので気にしないことに。どうせ確認する環境ないし。

他にもなにか変えたとこあった気もするけど、忘れちゃったのでここまで。

Comments