# VuePressメモ. 03. カスタマイズ. スタイル関連

# 検索ボックスでズームされるのを防ぎたい

src/.vuepress/styles/index.styl で CSS カスタマイズ

.search-box input {
  font-size: 16px !important;
}

# h1, h2 辺りのフォントをもうちょい小さくしたい

  • h1: 2.20rem → 1.45rem
  • h2: 1.65rem → 1.35rem
  • h3: 1.35rem → 1.30rem
  • h4: 1.25rem → そのまま
h1 {
  font-size: 1.65rem;
}
h2 {
  font-size: 1.5rem;
}

# テーブルの背景色は交互にしたくない

  • テーブルの背景色は交互にしたくない
  • 代わりにヘッダに色をつける
  • ついでに ヘッダを中央寄せに
th {
  background-color: #f6f8fa;
  text-align: center !important;
}
tr:nth-child(2n) {
  background-color: inherit;
}

# シンタックスハイライトの背景を白ベースにする

  • デフォルトだと黒ベースなので、白ベースにしたい。
  • Prism というライブラリが使われているので、それのテーマを変更する
  • 細かいところは css で設定

# Prism の標準テーマを使う

  • index.styl で prism のデフォルト css (prism.css) を読み込む
  • 文字色は どこかで白に設定されてしまうので これも index.styl で明示する
  • 背景色は pallete.styl に書かれたものが優先されるので、こちらも書き換える

index.styl

@import "~prismjs/themes/prism.css"

.theme-default-content code {
  color: #476582 !important;
}

pallete.styl

$codeBgColor = #f6f8fa

# Prism のサードパーティ?のテーマを使う

  • prism-themes パッケージの prism-ghcolors というスタイルを使ってみる
  • index.styl で細かいとこだけカスタマイズ
    • コードブロックのコメントの書体: イタリック → 標準
    • コードブロックのコメントの文字色: グレー → 緑
    • コードブロックの関数の文字書式: 太字 → 標準
    • インラインコードの背景色: ちょっと薄く (alpha 0.5 → 0.2)
    • インラインコードの文字サイズ: ちょっと大きく (0.85em → 0.9em)
yarn add -D prism-themes

index.styl

@import "~prism-themes/themes/prism-ghcolors.css"

.theme-default-content code {
  color: #476582 !important;
  font-size: 0.9em !important;
  background-color: #1b1f2305;
}
.token.comment {
  color: green !important;
  font-style: inherit !important;
}
.token.function {
  font-weight: inherit !important;
}

pallete.styl

$codeBgColor = #f6f8fa

# メニューは右側にしたい (未解決)

PC幅の場合は index.styl で、この辺いじれば良さそうだけど、
スマホ幅の場合にこの方向で上手くいくのかは不明

.sidebar {
  left: inherit;
  right: 0;
}
.page {
  padding-left: 0;
}

# スタイルをカスタマイズする > eject (未解決)

  • よく分からなかった
  • これを調べたあと、やりたいことは index.styl だけで事足りたので放置
vuepress eject src

src/.vuepress/theme フォルダが作られる

→ 変なエラー出たので 今日はいったん諦めよう。 can't resolve '@AlgoliaSearchBox'

[ 📩 ご意見 ]