ブログで使えるコンポーネント一覧
この記事では、ブログで利用できるすべてのコンポーネントを実際に使いながら紹介します。執筆時はdocs/blog-writing-manual.mdもあわせてご参照ください。
目次
基本コンポーネント
BlogParagraph（段落）
BlogParagraphは段落用のコンポーネントです。改行は <br /> で行います。
BlogHeading（見出し）
BlogHeading は level 2〜6 の見出しです。目次（BlogTOC）に自動で反映されます。
BlogIcon（アイコン）
BlogIcon は Google Material Icons を使ったアイコンです。name でアイコン名、size で sm / md / lg を指定できます。
BlogImage（単一画像）
画像は BlogImage で表示します。size や align、caption を指定できます。
注意・ヒント系
BlogCallout
重要情報やヒント・警告を強調するボックスです。type で種類を選べます。
BlogQuote（引用）
引用ブロックです。author と source を指定すると、発言者と出典が表示されます。
レイアウト・カード
BlogCard
タイトル付きの情報カードです。リストや段落を自由に配置できます。
- 項目1
- 項目2
手順・ステップ
BlogSteps + BlogStep
手順の説明をここに書きます。
次の手順の説明を書きます。
最後の手順です。
タイムライン
BlogTimeline + BlogTimelineItem
この時期の出来事やリリース内容を書きます。
次の時期の出来事を書きます。
このコンポーネント紹介記事を公開しました。
コードブロック
BlogCodeBlock
シンタックスハイライトとコピーボタン付きのコードブロックです。language で言語を指定します。
export const frontmatter: BlogFrontmatter = {
title: "ブログで使えるコンポーネント一覧",
date: "2026-02-19",
author: BLOG_AUTHOR.CRENA_PLUGIN_TEAM,
categories: [BLOG_CATEGORY.OTHER],
};
export default function BlogPost() {
return (
<>
<BlogParagraph>本文</BlogParagraph>
</>
);
}画像ギャラリー
BlogImageGallery + BlogImageGalleryItem
複数画像をグリッド表示し、クリックでモーダル拡大できます。子要素は BlogImageGalleryItem で渡します。alt は必須、caption を指定するとモーダルで補足文が表示されます（SEO・アクセシビリティ推奨）。
アコーディオン（折りたたみ）
BlogAccordion
詳細を折りたたんで表示するコンポーネントです。クリックで開閉します。
ここに折りたたまれた内容が入ります。長い補足や FAQ に便利です。
リンク
内部リンクは Next.js の Link を使います。例： ブログ一覧へ。
おわりに
以上がブログで利用できる主なコンポーネントです。新しい記事を書くときは docs/blog-writing-manual.md とあわせてご利用ください。
