STORK19で使えるオリジナルブロック

アイキャッチ画像

STORK19で使えるブロックエディタ(Gutenberg)用のオリジナルブロックをご紹介します。

各ブロックの詳しい使い方は、ブロックエディタの記事一覧ページで確認できます。

関連記事ブロック

記事リンクをブログカードで表示できます。

アイキャッチ画像

FAQ(Q&A)ブロック

FAQ形式のコンテンツを簡単に設置できるブロックです。

v3.12よりFAQ構造化データの出力にも対応しています。

枠や背景は変更できますか?

はい。表示スタイルを変更できます。

表示スタイルの種類は?

ver3.16時点では6種類あります。

QとAのアイコンデザインも変更できますか?

はい。アイコンデザインも変更できます。

Q&Aアイコンのデザインの種類は?

ver3.16時点では4種類あります。

アイコンの形状は変更できますか?

はい。角丸、角丸なし、円形に変更できます。

FAQブロック(開閉式)

ブロックの追加で「FAQ(開閉式)」を選択します。また、従来のFAQブロックを開閉式のFAQブロックに変換することもできます。(その逆も可能です)

編集画面(ブロックエディタ上)では、展開したものが表示されます。(開閉操作はできません)

はい。従来のFAQブロック同様、構造化データの出力に対応しています。また、FAQブロック同士を変換した際も設定はそのまま引き継がれます。

ボックスブロック

ボックス枠内にコンテンツを表示できるブロックです。

タイトル付きボックス

タイトル付きのボックスです。(デフォルトスタイル)

タイトル付きボックス

タイトル付きのボックスです。(シンプルスタイル)

タイトル付きボックス

タイトル付きのボックスです。(タイトルスタイル)

タイトル無しのボックスです。(デフォルトスタイル)

タイトル無しのボックスです。(シンプルスタイル)

色もいろいろ変えれます。

色もいろいろ変えれます。

色もいろいろ変えれます。

アコーディオンブロック

開閉式のコンテンツ(アコーディオンメニュー)を表示できます。

  1. タップ(クリック)することで内容が表示されます。
  2. CSSを利用した動作であるため、非常に軽量に動作します。
  3. サイトの見出しの背景色(すこし薄くしたもの)が適用されます。
  4. エディタ画面(編集画面)ではクリックしても開閉しません。(※開閉可能にすると編集中に入力欄が隠れてしまい操作しづらいため)

使い所は様々あるかとは思いますが、例えば「全員が見る必要のないような、簡易的な補足説明」で利用すると便利だと思います。

ブロック設定パネルでスタイルを変更できます。

ブロック設定パネルでスタイルを変更できます。

ブロック設定パネルでスタイルを変更できます。

ブロック設定パネルでスタイルを変更できます。

吹き出しブロック

会話形式の吹き出しコンテンツを表示できます。

ドッグくん

吹き出し文章を簡単に作ることができる〜♪

キャットさん

アイコン画像の設定もらくらく〜♪マイセット登録もできるから超便利!

補足説明ブロック

補足説明として、記事内の文章やコンテンツを目立たせることができます。

デフォルト:目立たせたい文章をここに表示できます。

  • 補足ブロックの中にリストなどを追加することもできます。
  • 補足ブロックの中にリストなどを追加することもできます。

サクセス:目立たせたい文章をここに表示できます。

  • 補足ブロックの中にリストなどを追加することもできます。
  • 補足ブロックの中にリストなどを追加することもできます。

Warning:目立たせたい文章をここに表示できます。

  • 補足ブロックの中にリストなどを追加することもできます。
  • 補足ブロックの中にリストなどを追加することもできます。

メモ:目立たせたい文章をここに表示できます。(ver.3.17〜)

  • 補足ブロックの中にリストなどを追加することもできます。
  • 補足ブロックの中にリストなどを追加することもできます。

ヒント:目立たせたい文章をここに表示できます。(ver.3.17〜)

  • 補足ブロックの中にリストなどを追加することもできます。
  • 補足ブロックの中にリストなどを追加することもできます。

目立たせたい文章をここに表示できます。(シンプルな枠)

  • 補足ブロックの中にリストなどを追加することもできます。
  • 補足ブロックの中にリストなどを追加することもできます。

ステップブロック

ステップ形式で手順や流れなどを表現するコンテンツを作成できます。

デフォルトデザイン

STEP

まずはステップブロックを設置します。デザインスタイルは3種類あります。

STEP

ステップブロック内に文章を入力します。STEPのラベル名も変更できます。

STEP

ステップ2以降はステップパーツを追加します。ラベル色も変更できます。

デザイン1

STEP

まずはステップブロックを設置します。デザインスタイルは3種類あります。

STEP

ステップブロック内に文章を入力します。STEPのラベル名も変更できます。

STEP

ステップ2以降はステップパーツを追加します。ラベル色も変更できます。

デザイン2

STEP

まずはステップブロックを設置します。デザインスタイルは3種類あります。

STEP

ステップブロック内に文章を入力します。STEPのラベル名も変更できます。

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またはタブレットでご覧になられていると思いますので「モバイルで表示」のボックスは表示されていないはずです。

今あなたは、このページをモバイル端末でご覧になられていると思いますので「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]