スタイルをカスタマイズする

投稿日 編集日

Nlviのデフォルトのままだといくつかしっくり来ないところがあるのでカスタマイズした。

Webフォントの導入

せっかくさくらインターネットは綺麗なWebフォントが使えるというので導入した。
まずはさくらインターネットのコントロールパネルからWebフォントを使用しますよという設定をした。
次に /themes/Nlvi/layout/_partial/head.swig に<script defer src="//webfonts.sakura.ne.jp/js/sakurav3.js"></script>を追加した。
最後に /themes/Nlvi/source/style/_custom/custom.styl に

custom.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
 
body { 
  font-family: 'Hiragino Maru Gothic W4 JIS2004', 'BIZ UDPゴシック', sans-serif !important;
  font-feature-settings: "palt" 1;
}

.logo, .post-title, h1, h2, h3, h4, h5, h6 {
  font-family: 'Midashi Go MB31', sans-serif !important;
}

.mobile-header-title a {
  font-family: 'Midashi Go MB31', sans-serif !important;
  font-size : 20px !important;
}

を追加した。本当は!importantしないで根本的なところをいじるべきなんだろうけど、とりあえずはこれでいいかな…といったところ。

archivesページの見た目

archivesのスタイルがはっきり言って見づらすぎたので

custom.styl
1
2
3
4
5
6
7
 
.archive-post-content {
  display: none !important;
}

.archive-post {
  height: 5em;
}

のように追加した。これもdisplay: noneで見えなくするんじゃなくて、そもそも出力されないようにいじるべきなんだろなぁ。

リンクが見えない問題

文章中のリンクが全く分からなかったので

custom.styl
1
2
3
4
5
6
7
 
p a {
  background-color: #eeeeee !important;
}

a:hover {
  background-color: #dddddd !important;
}

を追加した。背景色を付けた形でコード表示と見た目が被るんだけど支障ないでしょう多分。