【開発用】ブロック表示確認ページ
JSON ベースのブロックエディタが扱う全 10 種類のブロックと Mark を 1 ページに並べたサンプル記事です。
このページは全ブロック種類のレンダリングを 1 画面で確認するためのサンプルです。
以降、各ブロックを見出し付きで並べます。
見出しブロック（heading）
見出しは level 2 / 3 / 4 の 3 段階です。以下に順に並べます。
これは level 2(h2)の見出しです
これは level 3(h3)の見出しです
これは level 4(h4)の見出しです
段落ブロック(paragraph)
これは何の装飾もない素のパラグラフです。日本語と English と数字 12345 が混じります。
次は Mark を適用したパターンです。Mark はオフセット指定で範囲に装飾を当てます。
これは太字、イタリック、code 装飾、リンクが混ざった文です。最後にもう一個リンクを置きます。
重なる Mark もサポートされます。bold と italic を同じ範囲にかけると太字斜体になります。
リストブロック(list)
箇条書き(bullet)
- 1 つ目の項目
- 2 つ目の項目(少し長めの文章にして折返しの挙動も確認するため、ここでは意図的に文を伸ばしています)
- 3 つ目の項目
番号付きリスト(number)
- Step 1: 候補者を検索する
- Step 2: プロフィールを読み込む
- Step 3: AI で文章を生成する
- Step 4: 送信前に確認・調整する
引用ブロック(quote)
良い文章は短いほど良い。しかし、短すぎる文章は良くない。
上は cite 無しの引用。下は cite 付きの引用です。
丁寧に書いた文章の方が返信率が上がる。
コードブロック(code)
言語指定なしのコードブロック:
const greeting = "hello world";
console.log(greeting);lang 指定ありのコードブロック(v1 はラベルのみ、ハイライト無し):
export function add(a: number, b: number): number {
return a + b;
}区切り線(divider)
以下に divider を 2 つ並べます。
上の 2 本が divider ブロックです。
コールアウト(callout)
info バリアント。補足情報や重要ポイントの強調に使います。
warn バリアント。注意喚起・落とし穴の説明に使います。
tip バリアント。実践的なコツや小ネタの提示に使います。
FAQ ブロック(faq)
Q/A の組を並べて表示します。Phase 4 で FAQPage の JSON-LD も出力する予定。
Athena Scout は無料で使えますか?
はい、無料プランから始められます。クレジットカード不要で、今日から月10回まで生成機能を使えます。
対応している媒体はありますか?
特定のスカウト媒体との連携はあえて持たせていません。どの媒体を使っていてもお使いいただけます。
AI が勝手にスカウトを送ることはありますか?
ありません。自動送信はせず、送る判断は担当者が持つ設計です。
画像ブロック(image)
記事内の画像。imageId で article_images テーブルを参照します。
２カラムブロック
セクション１
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
セクション２
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
ネスト左
ネスト右
右
CTA ブロック(cta)
primary(塗りつぶし)と secondary(線のみ)の 2 variant があります。
以上
全 10 種類のブロックと Mark のレンダリング確認は以上です。デザイン調整時のリファレンスとしてご利用ください。
