デザインを選ぶ

6 種類のデザインから選べます。どれを選んでも出力される HTML の構造と HowTo 構造化データは同じで、変わるのは見た目だけです。

デザインは 2 段階で決まります。まず管理画面でサイトの既定デザインを決め、個別に変えたいブロックだけブロックの設定で上書きします。ブロック側を「サイトの既定」にしておけば、あとから既定を変更したときに全ページへ一括で反映されます。

1. タイムライン

丸いバッジを縦の線でつなぐ、手順表示の定番です。説明文が長くなっても読みやすく、ステップ数が多い手順にも向きます。迷ったらこれを選べば失敗しません。

ステップごとに枠線と影のあるカードで区切り、カードの間を下向きの矢印でつなぎます。1 ステップずつ独立して読ませたいとき、ステップの中身が長めのときに向きます。

大きな数字を主役にした、雑誌の記事のような落ち着いたレイアウトです。装飾が少なく、本文の文字組みと馴染みやすい形です。

矢羽根型のリボンにステップ番号を載せ、上から下への流れの向きを強調します。「この順番で進む」ことを強く見せたい手順に向きます。

番号を横一列に並べ、丸と丸を線でつなぐ進行表示です。ステップ数が少なく、説明文が短い手順に向きます。表示幅が足りないときは自動で縦並びに切り替わります（後述）。

装飾を抑え、細い罫線と文字だけで構成したシンプルな表示です。すでに装飾の多い記事の中に手順を差し込むとき、全体をうるさくしたくない場合に向きます。

デザイン	番号の書式	向いている場面
タイムライン	01、02 …	迷ったときの標準。ステップ数が多い手順、説明文が長い手順
カード	01、02 …	1 ステップずつ区切って読ませたいとき
ビッグナンバー	01、02 …	落ち着いた誌面のような見た目にしたいとき
アローリボン	1、2 …	順番どおりに進むことを強調したいとき
ホリゾンタル	1、2 …	3〜4 ステップ程度で、説明文が短いとき
ミニマル	01、02 …	装飾を足したくないとき、本文に溶け込ませたいとき

番号の書式（01 か 1 か）はデザインごとに決まっており、設定項目はありません。ラベル（STEP など）だけを変更できます。

ステップフローは「画面の幅」ではなく「ブロックが置かれた場所の幅」を見てレイアウトを調整します。サイドバーのある記事や、カラムブロックの中に入れた場合でも、その欄の幅に合わせて自動で整います。

デザイン	幅が狭いときの動き
ホリゾンタル	横並びをやめて縦並びになります。切り替わる幅はステップ数に応じて変わり、1〜3 ステップは約 34em、4 ステップは約 42em、5 ステップは約 52em、6 ステップ以上は約 62em を下回ると縦並びです
カード	約 30em より狭いと、ラベルとステップ名を上下に積みます
ビッグナンバー	約 26em より狭いと、数字を一回り小さくして余白を詰めます
その他のデザイン	もともと縦並びのため、幅による切り替えはありません

5 ステップのホリゾンタルを本文幅が狭い記事（サイドバーのある 3 カラムなど）に置くと、縦並びで表示されます。横一列で見せたい場合は、ステップ数を減らすか、本文幅の広いページで使ってください。

デザインと同じく、色とラベルも「サイト全体」と「ブロックごと」の 2 段階で指定できます。

項目	サイト全体	ブロックごと
アクセントカラー	管理画面「デザイン設定」タブのカラーピッカー	設定パネルの「アクセントカラー」。クリアすると既定色に戻る
ステップのラベル	管理画面「デザイン設定」タブの入力欄（空欄でラベルなし）	設定パネルの「ステップのラベル」（空欄で既定に従う）

アクセントカラーを決めると、そこから濃い色・淡い色・影の色が自動で作られ、番号バッジの文字色も背景の明るさに応じて白か濃い灰色が選ばれます。1 色決めるだけで全体の配色が整う形です。