はじめに 当ブログは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=javasctrptconsole.log('');\```※\はなくていいです マークダウンファイルでの画像読み込み 「./src/images/posts」フォルダに画像格納 以下のようにマークダウン形式で読み込み MarkDown ! [ 画像の説明文 ]( ../images/posts/ファイル名.png ) ※HTMLのimgタグでもOK プロフィール画像+吹き出し ここにセリフを書く HTML < div class = " balloon " > < div class = " icon " > </ div > < div class = " talk " > ここにセリフを書く </ div > </ div > ※このパーツの画像はプロフィール画像が反映します。