STORK19で使えるブロックエディタ（Gutenberg）用のオリジナルブロックをご紹介します。
各ブロックの詳しい使い方は、ブロックエディタの記事一覧ページで確認できます。
FAQ（Q&A）ブロック
FAQ形式のコンテンツを簡単に設置できるブロックです。
v3.12よりFAQ構造化データの出力にも対応しています。
FAQブロック（開閉式）
ボックスブロック
ボックス枠内にコンテンツを表示できるブロックです。
タイトル付きのボックスです。（デフォルトスタイル）
タイトル付きのボックスです。（シンプルスタイル）
タイトル付きのボックスです。（タイトルスタイル）
タイトル無しのボックスです。（デフォルトスタイル）
タイトル無しのボックスです。（シンプルスタイル）
色もいろいろ変えれます。
色もいろいろ変えれます。
色もいろいろ変えれます。
アコーディオンブロック
開閉式のコンテンツ（アコーディオンメニュー）を表示できます。
- タップ（クリック）することで内容が表示されます。
- CSSを利用した動作であるため、非常に軽量に動作します。
- サイトの見出しの背景色（すこし薄くしたもの）が適用されます。
- エディタ画面（編集画面）ではクリックしても開閉しません。（※開閉可能にすると編集中に入力欄が隠れてしまい操作しづらいため）
使い所は様々あるかとは思いますが、例えば「全員が見る必要のないような、簡易的な補足説明」で利用すると便利だと思います。
ブロック設定パネルでスタイルを変更できます。
ブロック設定パネルでスタイルを変更できます。
ブロック設定パネルでスタイルを変更できます。
ブロック設定パネルでスタイルを変更できます。
吹き出しブロック
会話形式の吹き出しコンテンツを表示できます。
吹き出し文章を簡単に作ることができる〜♪
アイコン画像の設定もらくらく〜♪マイセット登録もできるから超便利！
補足説明ブロック
補足説明として、記事内の文章やコンテンツを目立たせることができます。
デフォルト：目立たせたい文章をここに表示できます。
サクセス：目立たせたい文章をここに表示できます。
Warning：目立たせたい文章をここに表示できます。
メモ：目立たせたい文章をここに表示できます。（ver.3.17〜）
ヒント：目立たせたい文章をここに表示できます。（ver.3.17〜）
目立たせたい文章をここに表示できます。（シンプルな枠）
ステップブロック
ステップ形式で手順や流れなどを表現するコンテンツを作成できます。
デフォルトデザイン
まずはステップブロックを設置します。デザインスタイルは3種類あります。
ステップブロック内に文章を入力します。STEPのラベル名も変更できます。
ステップ2以降はステップパーツを追加します。ラベル色も変更できます。
デザイン1
まずはステップブロックを設置します。デザインスタイルは3種類あります。
ステップブロック内に文章を入力します。STEPのラベル名も変更できます。
ステップ2以降はステップパーツを追加します。ラベル色も変更できます。
デザイン2
まずはステップブロックを設置します。デザインスタイルは3種類あります。
ステップブロック内に文章を入力します。STEPのラベル名も変更できます。
ステップ2以降はステップパーツを追加します。ラベル色も変更できます。
グリッドブロック
カラム（横並び）のコンテンツを作成できます。
ブロックエディタ標準のカラムブロックよりもレイアウトの自由度が高く、モバイルとPCでカラム数を変更できるのが特徴です。
グリッド1
グリッド2
グリッド3
グリッド4
グリッド5
グリッド6
上記のように、PCは3列で表示、モバイルは2列で表示といった設定が可能です。また、グリッド同士の間隔も細かく調整できます。
アイコンサークル
あらかじめ、FontAwesomeのアイコンが配置されたブロックを用意しています。
アイコンサークル
アイコンサークル（暗）
アイコンサークル（影）
アイコンサークル（影・暗）
FontAwesomeのクラス名を入力してアイコンを変更することができます。
フルワイドセクション
背景色付きのコンテンツを画面幅いっぱいに表示できるブロックです。サイト型トップページやLPなどのフルワイドページで使用すると効果的です。
フルワイドセクション（見出し色背景）
背景色付きのコンテンツを画面幅いっぱいに表示できるブロックです。こちらのフルワイドセクションには、見出しと同じ背景色が反映されます。
便利なブロックオプションも実装しています
STORK19では、各ブロックに設定できる独自のブロックオプションも追加しています。
各ブロックをアニメーション効果で演出したり、形状でレイアウトに変化をつけるなど、魅せるページを作成するのに役立ちます。
ブロックアニメーション
各ブロックに、フェードインアニメーションを設定するオプションです。
アニメーション設定：fadeIn
アニメーション設定：fadeInUp
アニメーション設定：fadeInDown
ブロックの形状
グループブロックまたはカバーブロックの形状を変更することができます。
ランディングページなどでデザイン表現を高めることができます。
ブロックの形：down
ブロックの形：upscale
ブロックの形：up
ブロックの表示コントロール
メディアクエリ（ブレイクポイントの設定）によって、各ブロックを、PC・タブレット、そしてモバイル端末ごとに表示・非表示を切り替えることができます。
こちらは、すべての端末で表示されるブロックです。
こちらは、PCまたはタブレットのみで表示されるブロックです。
こちらは、スマートフォンなどのモバイル端末でのみ表示されるブロックです。
今あなたは、このページをPCまたはタブレットでご覧になられていると思いますので「モバイルで表示」のボックスは表示されていないはずです。
今あなたは、このページをモバイル端末でご覧になられていると思いますので「PC / タブレットで表示」のボックスは表示されていないはずです。
ブロック上下の余白設定
各ブロックの上下の余白を変更できます。
ブロックごとに上と下の余白（マージン）を指定できるため、ブロックの間隔を空ける場合に便利です。余白オプションのサイズ設定は下記の通りです。
- 0 … マージンなし
- SS … 0.8em（フォントサイズの0.8倍）
- S … 1.6em（フォントサイズの1.6倍）
- M … 3.2em（フォントサイズの3.2倍）
- L … 4.8em（フォントサイズの4.8倍）
ブロック上の余白［M］ブロック下の余白［0］
ブロック下の余白［0］
ブロック下の余白［L］
ブロックの追加で「FAQ（開閉式）」を選択します。また、従来のFAQブロックを開閉式のFAQブロックに変換することもできます。（その逆も可能です）
編集画面（ブロックエディタ上）では、展開したものが表示されます。（開閉操作はできません）