ブロックエディタで使えるSTORK19の専用機能

エディタ機能

WordPress5.0より追加されたブロックエディタ(Gutenberg)で使うことができる、STORK19だけのオリジナル機能を紹介します。

ボックスや関連記事、記事リストなどのオリジナルブロックはもちろん、標準ブロックやツールバーの機能拡張も施し、使いやすさを追求しています。

簡単にデザイン性の高い装飾を追加することが可能です。

各ブロックの詳しい使い方は、ブロックエディタ機能の記事一覧ページにてご覧ください。

FAQ(Q&A)ブロック

FAQ形式のコンテンツを簡単に設置できるブロックです。(ver.1.5.0〜)

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

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

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

表示スタイルの種類は?

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

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

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

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

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

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

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

v3.18より開閉式のFAQブロックに変換できるようになりました。

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

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

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

ボックスブロック

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

タイトル付きボックス

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

ユーザーカラー(v3.22〜)

ボックスカラーとしてユーザー設定カラーを使用できるようになりました。

  • 箇条書きリスト
  • 箇条書きリスト
  • 箇条書きリスト
タイトル付きボックス

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

タイトル付きボックス

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

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

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

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

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

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

アコーディオンブロック

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

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

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

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

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

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

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

吹き出しブロック

会話形式の吹き出しコンテンツを表示できます。(ver.1.0.5〜)

ドッグくん

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

キャットさん

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

v3.28.1時点では、マイセット登録のオプションはデフォルトで非表示にしています。
STORK19の吹き出しマイセット機能(β版)について

補足説明ブロック

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

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

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

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

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

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

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

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

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

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

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

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

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

ステップブロック

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

デフォルトデザイン

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では、段落ブロックや画像ブロックなど、WordPressの標準ブロックも機能拡張しているので、様々なデザインスタイルを適用できます。

これらのスタイルは、テーマアップデートで随時追加されています!

見出しスタイル

全ページ共通の見出しデザインについては、テーマカスタマイザーから変更します。

見出しデザインサンプル

上記のデザインが基本となりますが、見出しブロックの設定で下記のスタイルに変更できます。

見出しスタイル

段落スタイル

標準の段落ブロックで、STORK19オリジナルスタイルを適用できます。

段落スタイル:補足

段落スタイル:注意

段落スタイル:サクセス

段落スタイル:メモ(ver.3.17〜)

段落スタイル:ヒント(ver.3.17〜)

段落スタイル:見出し背景色

段落スタイル:見出し背景色(薄)

段落スタイル:グレー

段落スタイル:ストライプ

段落スタイル:ステッチ

段落スタイル:付箋(ふせん)(ver.4.1〜)

段落スタイル:ボーダー1

段落スタイル:ボーダー2

段落スタイル:吹き出し1(ver.4.1〜)

段落スタイル:吹き出し2(ver.4.1〜)

段落スタイル:マイクロコピー1

段落スタイル:マイクロコピー2

画像スタイル

画像を装飾するためのオリジナルスタイルを適用できます。

画像スタイル:影(小)
画像スタイル:角丸
画像スタイル:枠線
画像スタイル:ブラウザ風
画像スタイル:傾き右
画像スタイル:トライアングル
画像スタイル:ヘキサゴン
画像スタイル:ランダム1

リストスタイル

リストブロックで、箇条書きリストのアイコンを変更できます。

  • ノーマル
  • ノーマル
  • ノーマル
  • チェック1
  • チェック1
  • チェック1
  • チェック2
  • チェック2
  • チェック2
  • 矢印1
  • 矢印1
  • 矢印1
  • 矢印2
  • 矢印2
  • 矢印2
  • スター
  • スター
  • スター
  • ベル
  • ベル
  • ベル
  • コメント
  • コメント
  • コメント
  • ライト
  • ライト
  • ライト
  • マップ
  • マップ
  • マップ
  • 注意1
  • 注意1
  • 注意1
  • 注意2
  • 注意2
  • 注意2
  • GOOD
  • GOOD
  • GOOD
  • BAD
  • BAD
  • BAD

テーブルスタイル

標準のテーブルブロックで、STORK19オリジナルスタイルやオプションを適用できます。

デフォルトスタイルデフォルトのテーブルデザイン
スタイルデフォルトのテーブルデザイン
スタイルデフォルトのテーブルデザイン
ストライプスタイルストライプのテーブルデザイン
ストライプスタイルストライプのテーブルデザイン
ストライプスタイルストライプのテーブルデザイン
ボーダースタイルボーダーのテーブルデザイン
ボーダースタイルボーダーのテーブルデザイン
ボーダースタイルボーダーのテーブルデザイン
先頭セルをthデザインに先頭のtdをth風のデザインにします。
先頭セルをthデザインに先頭のtdをth風のデザインにします。
先頭セルをthデザインに先頭のtdをth風のデザインにします。
表のスクロール表を横スクロールできるようにする。(デバイス幅480px以下の場合のみ)
表のスクロールスマートフォン表示で確認してみてください。
表のスクロールテーブルを横にスクロールできます。

引用スタイル

標準の引用ブロックで、STORK19オリジナルスタイルを適用できます。

引用スタイル:プレーン

オープンケージは「誰もが簡単に美しいデザインのサイトを」をテーマにデザイン性に優れたテーマを配信しています。

引用元:OPENCAGE

引用スタイル:サイトカラー

オープンケージは「誰もが簡単に美しいデザインのサイトを」をテーマにデザイン性に優れたテーマを配信しています。

引用元:OPENCAGE

テキスト装飾(ツールバーの機能拡張)

STORK19では、ブロックツールバーの機能も拡張しているので、インラインテキストの装飾も直感的に行うことができます。

マーカー

マーカー(イエロー) マーカー(ピンク) マーカー(ブルー) マーカー(グリーン)

ラベル

テキストラベル ラベル ラベル ラベル ラベル ラベル ラベル ラベル

フォントサイズ

フォントサイズ70% フォントサイズ90% フォントサイズ120% フォントサイズ150% フォントサイズ180%

Googleフォントを適用

テキストにGoogleFontを適用できます。

太字テキスト(CSS)

テキストにstrongタグではないBOLD(CSS)を適用できます。

FontAwesomeアイコン

FontAwesomeのアイコンを挿入できます。クラス名の入力で様々なアイコンを使用可能!

ふりがな(ルビ)

STORK19ストーク19では、テキストにルビを振ることができます。

ツールバーの機能

ブロック設定オプション

STORK19では、各ブロックに設定できる独自のブロックオプションも追加しています。

各ブロックをアニメーション効果で演出したり、形状でレイアウトに変化をつけるなど、魅せるページを作成するのに役立ちます。

ブロックアニメーション

各ブロックに、フェードインアニメーションを設定するオプションです。

アニメーション設定:fadeIn

アニメーション設定:fadeInUp

アニメーション設定:fadeInDown

ブロックの形状

グループブロックまたはカバーブロックの形状を変更することができます。(ver.3.7〜)

ランディングページなどでデザイン表現を高めることができます。

ブロックの形:down

ブロックの形:upscale

ブロックの形:up

使い方はこちら

ブロックの表示コントロール

メディアクエリ(ブレイクポイントの設定)によって、各ブロックを、PC・タブレット、そしてモバイル端末ごとに表示・非表示を切り替えることができます。(ver.3.8〜)

すべての端末で表示

こちらは、すべての端末で表示されるブロックです。

PC / タブレットで表示

こちらは、PCまたはタブレットのみで表示されるブロックです。

モバイルで表示

こちらは、スマートフォンなどのモバイル端末でのみ表示されるブロックです。

今あなたは、このページをPCまたはタブレットでご覧になられていると思いますので「モバイルで表示」のボックスは表示されていないはずです。

今あなたは、このページをモバイル端末でご覧になられていると思いますので「PC / タブレットで表示」のボックスは表示されていないはずです。

ブロック上下の余白設定

各ブロックの上下の余白を変更できます。(ver.3.7〜)

ブロックごとに上と下の余白(マージン)を指定できるため、ブロックの間隔を空ける場合に便利です。余白オプションのサイズ設定は下記の通りです。

  • 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]

テーマデザインと親和性の高い余白をボタン一つで変更可能になります。

ver.3.10よりツールバーからも操作可能になりました。

今後も便利なブロック機能を追加していく予定です。もちろん、無料アップデートで!