Skip to main content

見た目カスタマイズ - custom.css

どこで設定？​

  • src/css/custom.css を編集
  • custom.css は dinosaurus.config.ts の customCss に設定してある

TODO​

!important とやっている箇所は無理やり反映させているもの。たぶん、それぞれ別の正しいやり方がある。

たとえば --ifm-.. 系の変数は Infima CSS framework に詳しくなると適切な設定方法があったりするかも、、等。

テーブルの調整​

セルの余白を狭める​

css
:root {
  ..
  --ifm-table-cell-padding: 0.05rem 0.75rem;
}

ヘッダ中央寄せ​

css
th {
  text-align: center !important;
  font-weight: normal !important;
}

交互に行背景つけない​

css
tr {
  --ifm-table-stripe-background: transparent;
}

自動で改行させない (br は有効)​

css
table td,
table th {
  white-space: nowrap;
}

横スクロール (overflow-x) が表示されたときに下の罫線が隠れないようにする​

css
table {
  padding-bottom: 5px;
}

環境毎の見え方によって微調整するかも

表示サンプル​

列1列2列3列4列5
あああああーああーああーああーいいいいーいいううエエええええおおおおおおおおおおお
あああああーああーああーああーいいいいーいいうううエエええええおおおおおおおおおおお
あああああーああーああーああーいいいいーいいうう
ううう		エエええええおおおおおおおおおおお

H1, H2, .. の調整​

文字サイズ​

css
h1 {
  font-size: 1.2rem;
}
h2, h3, h4 {
  font-size: 1.1rem;
}

H2 全体に下線​

css
h2 {
  display: block;
  width: 100%;
  border-bottom: 1px solid lightgray;
  padding-bottom: 0.25em;
}

表示例​

(このページを見る)

コードブロックの調整​

等幅にする​

css
code {
  font-family: "Consolas", "Menlo", monospace !important;
  font-size: 14px !important;
}

タイトルの余白と文字を小さくする​

css
div[class*="codeBlockTitle"] {
  padding: 0.2em 0.7em;
  font-size: 0.8em;
  color: gray;
}

タブ幅は 2 にする​

スマホでも見たいし

css
.theme-code-block pre code {
  tab-size: 2;
  -moz-tab-size: 2;
}

表示例​

swift
for x in 1..5 {
	for y in 1..5 {
		...
	}
}

タブ​

タブの背景をカスタマイズ​

css
.tabs-container {
  border: 1px solid #ddd;
  padding: 0.5rem 0.5rem 2rem 0.5rem;
  background-color: #fcfcfc;
}

最適解が分からない。活用する事になったら調整しよう

表示例​

Hello

全体​

ルートのフォントサイズを指定する​

css
html {
  font-size: 14px;
}

1em などと指定したときの基準となる訳です。

メニューのフォントサイズ指定​

css
.theme-doc-sidebar-menu {
  font-size: 0.9em;
}

横幅を制限したくない​

css
.container {
  max-width: 100% !important;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

これは、画面を広げても、コンテンツが広がってくれないことの対策。

折りたたみ (summary/details)​

折りたたみ表示を目立たなくさせる​

css
details {
  border: 0.5px solid lightgray !important;
  background: none !important;
}
div.collapsibleContent_i85q {
  border-top: 1px solid lightgray !important;
}

せっかく折りたたんでるのに、目立って強調したみたいになってしまうのは本意でないので。

表示例​

サマリ

でぃてーる。
詳しい情報をいろいろ書く

キートップ表示​

前提知識​

実は <kbd>A</kbd> という HTML タグがあるので、
これをカスタマイズするだけで良い。(Markdown は関係ない)

高さや文字サイズがガタガタに見えないようにする​

ゴリゴリにした。 TODO: 環境毎の表示は要確認

css
kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 25px;
  height: 20px;
  font-size: 0.8em;
  font-family: "Menlo", "Consolas", monospace;
  line-height: 1;
  vertical-align: middle;
  padding: 0.2em 0.4em;
  margin: 0 0.1em;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f7f7f7;
  box-shadow: inset 0 -1px 0 #aaa;
  margin: 4px 6px;
  padding: 4px 6px;
}
kbd.symbol {
  font-size: 0.9em;
  font-family: system-ui;
  font-weight: normal;
}

表示例​

⇧+⌘+]

マーカー​

前提知識​

これもHTMLタグで、<mark>...</mark> タグを使う。

ハイライトしたいが、そこまで目立たせたくない​

css
mark {
  background-color: #fffbdc;
}

表示例​

これはハイライトのサンプルですよ。