目次
はじめに
当ブログはGatsby.jsをカスタマイズしてつくられています。
この記事ではこのブログで記事を書く時に使えるパーツを紹介します。
Front Matter(記事の設定値)
マークダウンファイルの1行目から記載します。
一番上の「---」が1行目じゃないとエラーになります。
FrontMatter
---
title: 'ブログの書き方' #記事のタイトル
date: '2023-02-15' #作成日
update_at: '2023-02-15' #更新日 無いとエラーになるので更新日ないときはdateと揃えてください。
slug: 'read-me' #url ファイル名と合わせてください
hero_image: '../images/gatsby-icon.png' #アイキャッチ画像
tags: ["その他","マニュアル"] #タグ カテゴリとして使ってもOK
---
目次
h2~h4で書かれた項目を自動で目次として掲載します。
※この記事のTOPの目次が作成されます。
HTML+Markdown
<div class="toc-title">目次</div>
\```toc
\```
※\はなくていいです
ボックスパーツ
参考
本文
HTML
<div class="boxparts ref">
<div class="title"></div>
本文
</div>
POINT
本文
HTML
<div class="boxparts point">
<div class="title"></div>
本文
</div>
MEMO
本文
HTML
<div class="boxparts memo">
<div class="title"></div>
本文
</div>
注意
本文
HTML
<div class="boxparts caution">
<div class="title"></div>
本文
</div>
コードブロック
javascript
console.log('');
\```javasctrpt:title=javasctrpt
console.log('');
\```
※\はなくていいです
マークダウンファイルでの画像読み込み
- 「./src/images/posts」フォルダに画像格納
- 以下のようにマークダウン形式で読み込み
MarkDown
※HTMLのimgタグでもOKプロフィール画像+吹き出し
ここにセリフを書く
HTML
<div class="balloon">
<div class="icon"></div>
<div class="talk">
ここにセリフを書く
</div>
</div>
※このパーツの画像はプロフィール画像が反映します。
