まずは作ってみる

それでは、実際に自分のウェブサイトを構築していきましょう。

一般的に、ウェブサイトではindex.htmlが最初に表示されるページになります。したがって、index.qmdを編集していきます。

1 マークダウン

それでは、いよいよ自分紹介を書いていきます。Quartoではマークダウン記法によって見た目や機能を変更することができます。

以下では、ウェブサイト作成において使用する頻度の多いと思われるものを取り上げます。

1.1 見出し

もし、見出しで区切りたい場合は#を使います。#が増えていくと、より細かいレベルの見出しになります。

• Quartoでは##から始めることが多いように思います。
• HTMLにおけるh1などに対応しています。

見出しに番号を振りたい場合は、html:配下で次のように書きます。

format:
  html:
    ...
    number-sections: true
    ...

1.2 箇条書き

箇条書きをする場合、順番がない場合は*や-などの記号を、順番がある場合は1.のように半角数字とピリオドを使います。

• 全てを1.にしても自動で数字が割り振られます。

箇条書きをネストする場合はインデントを入れます。

1.3 リンク

リンクを貼る場合、URLをそのまま表示する場合は<URL>とし、リンク先を直接表示しない場合は[表示されるテキスト](URL)と書きます。

1.4 画像

画像を挿入する場合は![キャプション](path/to/image)と書きます。

1.5 コールアウト・ブロック

コールアウト・ブロックを表示させることもできます。

:::{.callout-...}
## タイトル

ブロックの内容
:::

タイトル

ブロックの内容

• callout-...の...で種類を決めます。
• ブロックにタイトルをつける場合は、ブロック内で##とするか、チャンクオプションで{.callout-... title = "..."}とします。
• ブロックの見た目を変える場合は、_quarto.ymlでcallout-appearance:...とするか、チャンクオプションで{.callout-... appearance = "..."}とします。
• ブロックをタイトルだけ表示させ、クリックした時に内容が見えるようにするには、チャンクオプションで{.callout-... collapse=true}とします。

1.6 強調

強調や打ち消しなど文字列を修飾することができます。

• 強調：**テキスト**

1.7 タブセット

タブセットを使うことで、限られたスペースに複数の情報を載せることができます。

::: {.panel-tabset}
## タイトル1

1つ目の（最初に表示されている）タブの内容

## タイトル2

2つ目のタブの内容

:::

タイトル1

1つ目の（最初に表示されている）タブの内容

タイトル2

2つ目のタブの内容

1.8 脚注 (optional)

脚注をつける場合は2通りのやり方があります。

1. ^[脚注の内容]
2. [^1]で脚注の挿入記号、[^1]: 脚注の内容

脚注を右の余白に表示したい場合は、_quarto.ymlに次のように書きます。

format:
  html:
    ...
    reference-location: margin
    ...

1.9 表 (optional)

表を挿入する場合もテキストで入力します。

| Right | Left | Default | Center |
|------:|:-----|---------|:------:|
|   12  |  12  |    12   |    12  |
|  123  |  123 |   123   |   123  |
|    1  |    1 |     1   |     1  |

Right	Left	Default	Center
12	12	12	12
123	123	123	123
1	1	1	1

• このようなツールを使うと楽かもしれません。

2 フッター

フッターを作成する場合は_quarto.ymlのwebsite:配下で設定します

website:
  title: "..."
  ...
  page-footer: "..."
  ...

3 About Pages

QuartoのウェブサイトではAbout Pagesが、自己紹介用には良い感じのレイアウトを提供しています。

index.qmdの冒頭に---で囲まれた箇所があります。これをyamlヘッダーと呼びます。ページの設定を書く場所になります。まずは、titleを自分の名前にしましょう。

title: "Your Name"

ウェブサイトの設定

Quartoではウェブサイトの設定を記述する箇所が2つあります。

1. _quarto.yml：ウェブサイト全体の設定
2. .qmdファイルのyamlヘッダー：特定のページの設定

さらに、About Pageであることを明示します。

title: "Your Name"
about:
1template: ...

1

5つあるテンプレートから好みのものを設定します。

3.1 画像 (optional)

もし、画像を載せる場合は、次のようにyamlヘッダーに書き加えます。

title: "Your Name"
1image: path/to/image
about:
  template: ...

1

例えば、ウェサイトのフォルダの中にfiguresというフォルダを作成し、そこにprofile.jpgという画像を保存している場合はfigures/profile.jpgと書きます。

• 画像の大きさや形状などを変更できます。

3.2 リンクボタン (optional)

名前の下にメールアドレスやSNSなどリンクを貼りたい場合は、yamlヘッダーを次のように編集します。リンクは複数設定できます。

• ハイフン=の有無に注意してください。

title: "Your Name"
image: path/to/image
about:
  template: ...
  links:
1    - icon: ...
2      text: ...
3      href: ...

1

iconはBootstrap Iconsがデフォルトで利用できます。適当に検索して気に入ったアイコンの名前を入れます。例えばmailで検索するとenvelopeというアイコンがあるので、envelopeと入力します。

2

textはその名の通り表示する文字列を入力します。iconやtextはどちらか一方でも問題ありません。

3

hrefはリンク先を入力します。メールアドレスの場合はmailto:をメールアドレスの前に付けます。例えば、mailto:sdoi@juris.hokudai.ac.jpなど。

ところで、デフォルトでは同じタブでリンク先のページに移動します。リンク先のページを新しいタブで表示したい場合は_quarto.ymlを変更します。

format:
  html:
    ...
1    link-external-newwindow: true
    ...

1

このように変更します。

気に入ったテンプレートがない場合（特に画像が不要な場合）はAbout Pageを使わなくてよいでしょう。