ショートコード

クラシックエディターなどブロックが使えない場所や、本文中にショートコードを書きたい場合は [ks_stepflow] で設置できます。出力される見た目と HowTo 構造化データは、ブロックで置いた場合とまったく同じです。

基本の書き方

開始タグと終了タグで囲み、その中に 1 行 1 ステップで書きます。ステップ名と説明文は「｜」「|」「：」のいずれかで区切ります。

[ks_stepflow design="timeline" title="記事制作と公開のフロー"]
企画｜狙うキーワードに対する切り口を決定し、競合記事を分析
構成作成｜見出し構成を設計し、論理的な流れで情報を整理
執筆｜構成に沿って本文を作成し、専門用語には解説を追加
編集｜誤字脱字チェック、表現の統一、読みやすさの向上
公開｜メタタグ設定、内部リンク追加、公開後の動作確認
[/ks_stepflow]

ブロックエディターで使う場合は「ショートコード」ブロックに貼り付けます。

ショートコードブロックに入力した状態
「ショートコード」ブロックに貼り付けた例。1 行 1 ステップで書きます

属性の一覧

すべて省略できます。省略した属性はサイト全体の設定に従います。

属性値内容
design timeline / card / number / arrow / horizontal / minimal デザイン。省略または未知の値のときはサイトの既定デザイン
title 任意のテキスト ステップの上に表示するタイトル。HowTo の名前にも使われます
accent #rrggbb または #rgb アクセントカラー（例: #d97706）。16 進数として解釈できない値は無視され、サイトの既定色になります
label 20 文字までのテキスト 番号の前のラベル（例: 手順）。省略するとサイトの既定
howto true / false false（0 / no / off も同じ）にすると、このフローを HowTo 構造化データに含めません
id 半角英数字・ハイフン等 外側の要素に付ける HTML の id。ページ内リンクの飛び先にできます
class クラス名（空白区切り） 外側の要素に追加するクラス名。テーマ側で追加の装飾をしたいときに使います

区切り文字のルール

書き方結果
企画｜説明文「企画」＋「説明文」に分かれる（全角の縦棒）
企画|説明文「企画」＋「説明文」に分かれる（半角の縦棒）
企画：説明文「企画」＋「説明文」に分かれる（全角のコロン）
企画:説明文分かれない。行全体がステップ名になる（半角コロンは区切りではない）
企画ステップ名だけのステップになる（説明文は空）

縦棒（｜・|）はコロン（：）より優先されます。そのため「企画｜目的：集客」のように書くと、ステップ名が「企画」、説明文が「目的：集客」になり、説明文の中にコロンを含められます。

自動で取り除かれるもの

他の場所で作った番号付きリストをそのままコピーして貼り付けても、番号は自動で取り除かれ、ステップの番号として振り直されます。

説明文に使える書式

説明文にはインラインの HTML を書けます。使えるタグは次のとおりです。

[ks_stepflow label="手順"]
確認｜<strong>必ず</strong>バックアップを取ってから進めます
申請｜<a href="https://example.com/form/">申請フォーム</a>から送信します
[/ks_stepflow]
使えるタグ用途
a（href / target / rel / title）リンク
strong / b / em / i強調
codeコード表記
mark / span（class / style）マーカー・文字色
br / sub / sup / s改行・下付き・上付き・打ち消し

上の一覧にないタグ（div、img、script など）は出力時に取り除かれます。画像や表を手順の中に入れることはできません。

ショートコードを書いたのに表示されないとき

詳しくは「トラブル・FAQ」を参照してください。