# h1タグ（コンテンツ内では使わない）
## h2タグ
### h3タグ
#### h4タグ
##### h5タグ
###### h6タグ
↑これが、こう↓
h1タグ（コンテンツ内では使わない）
h5タグ
h6タグ
#の後ろに半角スペースが必要
[外部サイトへのリンク](https://www.google.co.jp/maps/?hl=ja)
[内部ページへのリンク](/services/training)
↑これが、こう↓
外部サイトへのリンク
内部ページへのリンク
* リスト1
* リスト2
* タグでネスト
* リスト3
↑これが、こう↓
- ハイフンでもリスト1
- ハイフンでもリスト2
- ハイフンでもタグでネスト
- ハイフンでもリスト3
↑これが、こう↓
- ハイフンでもリスト1
- ハイフンでもリスト2
- ハイフンでもリスト3
1. リスト1
1. リスト2
1. タグでネスト
1. リスト3
↑これが、こう↓
- リスト1
- リスト2
- タグでネスト
- リスト3
現時点で>記法に対応していないので、以下のように書く。
対応しました🎉
> 引用する文章をここに記載する。引用する文章をここに記載する。引用する文章をここに記載する。引用する文章をここに記載する。引用する文章をここに記載する。引用する文章をここに記載する。
> 引用する文章をここに記載する。引用する文章をここに記載する。
↑これが、こう↓
引用する文章をここに記載する。引用する文章をここに記載する。引用する文章をここに記載する。引用する文章をここに記載する。引用する文章をここに記載する。引用する文章をここに記載する。
引用する文章をここに記載する。引用する文章をここに記載する。
脚注[^1]をつけることができる
[^1]: 脚注はどこに書いてもよく、最後にまとめて表示される
日本語[^日本語]で脚注をつける事もできるが、番号は自動で振られるので、
そのあとの脚注の番号[^2]に気をつけないといけないのでめんどくさい
[^日本語]: 日本語でもかけるけど、
[^2]: そのあとの番号がずれるよ。（この脚注の番号は3と表示されている）
↑これが、こう↓
脚注1をつけることができる
日本語2で脚注をつける事もできるが、番号は自動で振られるので、
そのあとの脚注の番号3に気をつけないといけないのでめんどくさい
~ゲフンゲフン~
↑これが、こう↓
ゲフンゲフン
::コンポーネント名
::
のように書くとコンポーネントを設置できます。
コンポーネントにリンク先アドレスやボタンのラベルに表示したい文字を指定する際には以下のようにして各プロパティを指定します。
::コンポーネント名
---
property1: value-for-prop1
property2: value-for-prop2
---
::
例えば以下のボタンコンポーネントではtoプロパティに/path/to/inner/link/という値が、labelプロパティに内部リンクはパスのみという値が渡されます。
::primary-button
---
to: /path/to/inner/link/
label: 内部リンクはパスのみ
---
::
Primaryなボタンを配置する場合は
::primary-button
---
to: /path/to/inner/link/
label: 内部リンクはパスのみ
---
::
::primary-button
---
to: https://some.outer.link.com/needs/full/path/
label: 外部リンクはフルパス
---
::
↑これが、こう↓
primary button
microcms
と書きます。
Outlineボタンを配置する場合は
::outline-button
---
label: outline button
to: /path/to/link/
---
::
::outline-button
---
label: 外部リンクはフルパス
to: https://some.outer.link.com/
---
::
↑これが、こう↓
outline button
Nuxt Content
ドメイン内のリンクを貼る場合、pathはドメイン以下のみ記述します。
https://achievement-hrs.co.jp/services/
→ /services/
ドメイン部分を記載しなくても良い、ではなく、記載しないでください。
ドメイン外のリンクを貼る場合、pathは完全なURLを記述します。
https://hrs-corp.microcms.io/
→ https://hrs-corp.microcms.io/
渡されたpathによって内部リンクと外部リンクを自動で判別します。
画像を配置する場合は
::image-on-content
---
src: https:://画像のURL
alt: altテキスト
---
::
↑これが、こう↓
と書きます。
altテキストも可能な限り指定するようにしてください。
microcmsにアップロードした画像URLと::image-on-content::を使用すれば、デバイスによる画像のリサイズ（大小の出し分け）、Webp対応など自動で完了します。
画素数や拡張子別に複数用意する必要はありません。
contain
::image-on-content
---
src: https:://画像のURL
alt:
contail: true
---
::
のようにcontain: trueを追加すると、画像全体を表示するように画像が縮小されます。
同じ画像で比べてみると
::image-on-content
---
src: https://images.microcms-assets.io/assets/f694f81238f34175a0fcddcd2c318406/05e5e921667e4a598abc498c9e249c73/placekitten.jpg
alt: containなし
---
::
↑これが、こう↓
::image-on-content
---
src: https://images.microcms-assets.io/assets/f694f81238f34175a0fcddcd2c318406/05e5e921667e4a598abc498c9e249c73/placekitten.jpg
alt: containあり
contain: true
---
::
↑これが、こう↓
概念図など全体を見せたい画像を記載する場合などはcontainを含めた方が良いでしょう。
book-image
書籍用に小さな画像を表示するコンポーネント。
同じ画像で比べてみると
::image-on-content
---
src: https://images.microcms-assets.io/assets/f694f81238f34175a0fcddcd2c318406/05e5e921667e4a598abc498c9e249c73/placekitten.jpg
alt: image-on-content
---
::
↑これが、こう↓
::book-image
---
src: https://images.microcms-assets.io/assets/f694f81238f34175a0fcddcd2c318406/05e5e921667e4a598abc498c9e249c73/placekitten.jpg
alt: book-image
contain: true
---
::
↑これが、こう↓
/content/ritori/配下に.mdファイルを作成する。ファイル名は記事の内容を表す短いフレーズで、単語をハイフン区切りで作成する。
例えばこの記事のファイル名はreadme-ritori.md。
このファイル名に相当する部分がweb上のパスとして使用されます。ブラウザのアドレスバーが以下のようになっているはず。
ドメイン/ritori/readme-ritori
