見た目を整える

1 テーマ

Quartoではテーマを変更することができます。Bootswatchから気になるテーマを選択して、_quarto.ymlに反映させましょう。

format:
  html:
    ...
    theme: ...
    ...

ナビゲーションバーの色を変更したい場合は_quarto.ymlを次のように書き換えます。

website:
  ...
  navbar:
    background: primary
  ...

2 フォント

また、フォントも変更できます。フォントを適切に設定しないと、厄介なことをが起こるときがあります。

きれいなウェブサイトを作ることが主眼ではないので、“font-family おすすめ”で出てくるウェブサイトで適当なものをコピペしてしまいましょう（例えば、こちら）。

_quarto.ymlを変更します。

format:
  html:
    ...
    mainfont: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN" "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif
    ...
  • fontsizeでフォントの大きさも変えられます。

また、ウェブサイトの言語を指定しないと適切なフォントが使用されない可能性があるので、lang属性を設定しておくとよいでしょう。

  • 例えば、日本語表示をする場合は_quarto.ymlの末尾に次のように追記します。
lang: ja

2.1 ウェブフォントの利用 (optional)

どのようなデバイスでも同じフォントで表示したい！という場合はウェブフォントを使うのが一つの選択肢です。例えば、Noto Sans Japaneseを使おうとします。

  1. font.htmlというファイルを作り、次のように記述します。
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&display=swap" rel="stylesheet">
  1. _quarto.ymlのhtml:の配下に次のように記述します。
format:
  html:
    ...
1    include-in-header: font.html
2    mainfont: Noto Sans JP, Helvetica Neue, Arial, Hiragino Kaku Gothic ProN, Hiragino Sans, BIZ UDPGothic, Meiryo, sans-serif
    ...
1
font.htmlの読み込み
2
フォントの追加

3 レイアウト (optional)

3.1 幅の調整

文字などを表示する幅を広げたい場合はレイアウトを変更します。

3.2 グリッド

複数の要素を横に並べたい場合はグリッドを指定します。

::: {.grid}

::: {.g-col-4}
This column takes 1/3 of the page
:::

::: {.g-col-8}
This column takes 2/3 of the page
:::

:::

This column takes 1/3 of the page

This column takes 2/3 of the page

ポイントは合計して12になるようにそれぞれの要素の幅を指定します。

  • 上記の例では左側の幅が4なので、4/12=1/3となります。同様に、右は2/3になります。

予断ですが、ディスプレイのサイズに合わせてレイアウトを変更することをレスポンシブ・デザインと呼びます。QuartoではBootstrapのレスポンシブ・デザインを使っています。これにより、PCでもスマホでも適切に表示されます。

3.3 余白

右の余白にコンテンツを表示させることができます。

4 色

4.1 ナビゲーションバー

ナビゲーションバーの色を変える場合は、_quarto.ymlのnavbar:の設定を変えます。

  • background：背景
  • foreground：文字などの色

色はテーマで設定されている色（“primary”, “secondary”, “success”, “danger”, “warning”, “info”, “light”, “dark”）やHEXカラーで設定できます。

4.2 フォントや背景 (optional)

フォントや背景の色も変更できます。

  • fontcolor
  • linkcolor
  • backgroundcolor

ただし、ナビゲーションバーと異なり、テーマで設定されている色は使えません。

4.3 カスタムCSS (optional)

linkcolorを変更してもマウスをホバーしたときの色は変更されないので、カスタムCSSで上書きする方がよいと思います。

まず、custom.scss（.cssではない）を作成します。そして、その中で次のように記入します。

/*-- scss:defaults --*/
$primary: ...;

ここで、メインで使いたい色をHEXカラーで指定します。

  • 色はこのようなサイトから選んだり、スクールカラーを使ったり、気に入ったカラーパレットから使ったりすればよいでしょう。

他に個別に色を指定したい要素がある場合は適当なSass変数を上書きします。

5 アクセシビリティ

ウェブサイトやスライドは自分が見えているように他者にも見えているとは限りません。

他の人にはどのように見えるのかを確認しましょう。

  • FirefoxではMore toolsのWeb Developer Toolsを開き、AccessibilityのSimulateで見え方を選択します。
  • ChromeやEdgeではMore toolsのRenderingのEmulate vision deficienciesで見え方を選択します。