| categories:web

デカ文字調整

オクトプレスに移行して今度はレイアウトをいじり始めてます。デカ文字調整はsource/stylesheets/screen.css を変更して終了とおもいきや、だぁーーっと、一直線のファイルでてきます。うむむっ、これは警告なのか?一抹の不安がよぎりました。単純に気になる文字の大きさをちょっと変えたいだけなのに何か変んな感じです。 (デフォルトテーマの文字の大きさが、ちと、デカ過ぎやしませんか?いったいどんな液晶を使ってるんでしょうか?開発者殿。)

こちらのOctopressのテーマ - Classicの構成のおかげで、なーんとなく構造はつかめたような気がするが、見た事のないsassファイルでつまずきました。

で、Sass - チュートリアルをよみ、その他のページを流し読み、少し分かった気になる。

で、取りあえずフォントの変更はsass/layput/_typography.sassの40行目のbodyのfont-sizeを変えあげればよし、全体のフォントのサイズが変わり?ます。(1.15emから1.0emで10%程縮小されます。)

h1 {
  font-size: 2.2em; // ここを変えてもなにも変わらない。    
  line-height: 1.2em;
}

@media only screen and (min-width: 992px) {
  body { font-size: 1.0em; } // 全てのフォントの大きさが変わる default:1.15em
  h1 { font-size: 2.2em; line-height: 1.2em; } // 本文でのh1 default:2.6em
}

で、今度は余白が気になり始めました。。ほんとは全体のデザインにも手を付けたいのだけど、、うぅーーーん。来週からインドでアシュラム生活。。

追記:出発前に sass/custom/_colors.scss をアプリで使う色にちょっと変更してみました。

$page-bg: #c0c6c9;      // 灰青
$header-bg: #9ea1a3;    // 錫色
$text-color: #383c3c;   // 羊羹色
comments powered by Disqus