SWELLの始め方ガイド|これからSWELLを使い始める方はこちら→SWELLの始め方ガイド→クリックタップ

WordPressテーマSTORK19のブロックエディターの使い方や機能まとめ

WordPressテーマSTORK19のブロックエディターの使い方や機能まとめ
  • URLをコピーしました!

WordPressテーマ「STORK19」のブロックエディターの使い方や機能をまとめて紹介します。

STORK19のブロックエディターは、オリジナリティよりも他テーマで採用されている人気機能を積極的に取り入れながら開発が進められている印象です。

この記事では、画像を多めに使いながらそれぞれのブロック機能を紹介していきます。

STORK19の公式サイトでも以下のような解説記事が準備されているので参考にしてください。

公式


執筆時の環境 ※初回執筆:2022/11/26
WordPress

v6.1.1

STORK19

v3.16.1

記事はできる限り最新情報に更新していきますが、キャプチャ等は執筆時点の物が多くなると思います。

最終確認日:2023/1/21 STORK19 Ver.3.17

目次

WordPressテーマSTORK19のブロックエディター機能まとめ

WordPressテーマSTORK19では、ブロックエディターの機能に以下の独自機能が追加されています。

STORK19の独自機能を使いこなすためには、まずWordPress標準のブロックエディターの使い方を把握することも大切です。以下の記事にまとめているので参考にしてください。

それでは、STORK19のブロックエディターオリジナル機能を紹介していきます。

STORK19専用のオリジナルブロック

WordPressテーマSTORK19で独自に用意されているオリジナルのブロックは以下です。

  1. ボックスブロック
  2. 補足説明ブロック
  3. 吹き出しブロック
  4. アコーディオンブロック
  5. FAQ(Q&A)ブロック
  6. ステップブロック
  7. 関連記事ブロック
  8. グリッドブロック
  9. 記事リストブロック

それぞれ紹介していきます。

ボックスブロック

ボックスブロックは、囲み枠の中にテキストや画像を自由に配置できるブロックです。

STORK19のボックスブロックでできることは以下のとおりです。

  • ボックスブロックは2種類のタイプから選択できる
  • ボックスのデザインを計5種類から選択できる
  • ボックスの中には、画像やリストなど段落ブロック以外も配置できる

ボックスブロックには、タイトルの有無で2種類のブロックに分かれています。

タイトルが無いボックスブロックでは、2種類のデザインから選択できます。

STORK19のボックスブロック-1
STORK19のボックスブロック-2
ノーマル
STORK19のボックスブロック-3
シンプル

ボックス(タイトル付き)ブロックでは、3種類のデザインから選択できます。

STORK19のボックスブロック-4
スクロールできます
STORK19のボックスブロック-5
ノーマル
STORK19のボックスブロック-6
シンプル
STORK19のボックスブロック-7
タイトル

ボックスのカラーの変更もできるようになっています。

STORK19のボックスブロック-8

補足説明ブロック

補足説明ブロックは、アイコンの付いた囲み枠の中にテキストや画像を自由に配置できるブロックです。

STORK19の補足説明ブロックでできることは以下のとおりです。

  • スタイルを4種類から選択できる
  • ボックスの中には、画像やリストなど段落ブロック以外も配置できる

スタイルは4種類から選択できます。

STORK19の補足説明ブロック-7
スクロールできます
STORK19の補足説明ブロック-2
default
STORK19の補足説明ブロック-3
サクセス
STORK19の補足説明ブロック-4
Warning
STORK19の補足説明ブロック-5
シンプルな枠

v.3.17のアップデートで「メモ」と「ヒント」スタイルが追加されました。

STORK19の補足説明ブロック-8
メモ
STORK19の補足説明ブロック-9
サクセス

STORK19では、段落ブロックにも補足説明用のスタイルがありますが、補足説明ブロックでは、箇条書きや画像など自由にブロックを配置できる点がメリットになります。

STORK19の補足説明ブロック-6

吹き出しブロック

吹き出しブロックでは、テキストを会話風の装飾で表現することができます。

STORK19の吹き出しブロックでできることは以下のとおりです。

  • 良く使う吹き出しを登録できる
  • 吹き出しのカラーと配置を変更できる

良く使う吹き出しの画像やデザイン、配置を最大10個まで登録しておくことができるマイセット登録機能があります。

登録した吹き出しはサイドバーから簡単に記事内に配置できます。

STORK19の吹き出しブロック-1

吹き出しの登録は簡単で、実際の記事の編集画面でお好みのふきだしを作成して「マイセットを登録する」ボタンをクリックするだけでOKです。

吹き出しとアイコン枠のカラーと吹き出しの配置を設定できる仕様になっています。

STORK19の吹き出しブロック-2

アコーディオンブロック

アコーディオンブロックは、コンテンツを折り畳んで隠しておくことができるブロックです。うまく活用するとページをすっきりさせることができます。

STORK19のアコーディオンブロックでできることは以下のとおりです。

  • スタイルを3種類から選択できる

アコーディオンのスタイルを3種類から選択できます。

STORK19のアコーディオンブロック-1
スクロールできます
STORK19のアコーディオンブロック-2
サイトカラー
STORK19のアコーディオンブロック-3
ボーダー
STORK19のアコーディオンブロック-4
シンプル

FAQブロック

FAQブロックでは、「良くある質問」のような質問と回答がセットになったコンテンツを配置できます。

STORK19のFAQ(Q&A)ブロックでできることは以下のとおりです。

  • 構造化データ出力ができる
  • スタイルを6種類から選択可能
  • アイコンデザインを変更可能

それから、STORK19には2種類のFAQブロックがあります。

  1. FAQ(Q&A)ブロック
  2. FAQ(開閉式)ブロック

2種類は基本機能は同じですが、FAQ(開閉式)ブロックでは、アコーディオンのようにFAQのA(回答)部分をクリックで開閉できるようになります。

STORK19のFAQ(Q&A)ブロック-10
FAQが閉じた状態
STORK19のFAQ(Q&A)ブロック-12
FAQを開いた状態

サイドバーの構造化データ設定欄の「構造化データ利用する」をオンにすることで、よくある質問(FAQ)の構造化データを出力することができます。

STORK19のFAQ(Q&A)ブロック-1

構造化データを出力すると、Googleの検索結果にリッチリザルトが表示されることがあります。

スタイルを6種類から選択できます。

STORK19のFAQ(Q&A)ブロック-2
スクロールできます
STORK19のFAQ(Q&A)ブロック-8
シンプル
STORK19のFAQ(Q&A)ブロック-3
STORK19のFAQ(Q&A)ブロック-4
枠(ドット)
STORK19のFAQ(Q&A)ブロック-5
背景(テーマ)
STORK19のFAQ(Q&A)ブロック-6
背景(グレー)
STORK19のFAQ(Q&A)ブロック-6
背景(ホワイト)

メインカラーは、STORK19テーマカスタマイザーの設定に連動しています。

QAアイコンもサイドバー内で設定できます。

STORK19のFAQ(Q&A)ブロック-9

ステップブロック

ステップブロックは、物事を時系列順や手順ごとに並べて紹介する時に便利なブロックです。

STORK19のステップブロックでできることは以下のとおりです。

  • スタイルを3種類から選択可能
  • STEPのテキストを変更できる

ステップのデザインを3種類から選択できます。

STORK19のステップブロック-1
スクロールできます
STORK19のステップブロック-2
STORK19のステップブロック-3
デザイン1
STORK19のステップブロック-4
デザイン2

STEP部分のラベルも自由に変更が可能です。

STORK19のステップブロック-5

関連記事ブロック

関連記事ブロックは、ブログカード形式でリンクを貼ることができるブロックです。

STORK19の関連記事ブロックでできることは以下のとおりです。

  • デザインを3種類から選択できる
  • 内部リンクのみで使える

デザインは3種類から選択できます。

STORK19の関連記事ブロック-1
スクロールできます
STORK19の関連記事ブロック-4
シンプル
STORK19の関連記事ブロック-2
カード
STORK19の関連記事ブロック-3
テキスト

カード型の場合は、パソコン、モバイル、タブレットの画面サイズごとに表示するカラム数を設定できます。

記事のURLかIDを入力することでブログカードを表示できます。

STORK19の関連記事ブロック-5

外部リンクには関連記事ブロックを使用できない点は注意が必要です。

グリッドブロック

グリッドブロックは、WordPress標準のカラムブロックに機能を追加したようなブロックです。

STORK19のグリッドブロックでできることは以下のとおりです。

  • PCとスマホでカラム数を設定できる
  • グリッド同士の余白を調整できる

グリッド同士の余白と、カラム数(列の数)をPCとモバイルでそれぞれ設定できます。グリッドの中には自由にブロックを配置可能です。

STORK19のグリッドブロック

記事リストブロック

記事リストブロックでは、記事を新着順やカテゴリーごとにまとめて表示させることができます。

STORK19の記事リストブロックでできることは以下のとおりです。

  • ブロックは3種類から選択できる
  • 表示タイプを3種類から選択できる

記事リストブロックには3種類のブロックが用意されています。

  • 記事リストブロック(新着)
  • 記事リストブロック(カテゴリー)
  • 記事リストブロック(タグ)

名称のとおりですが、新着順に表示するか、カテゴリー、タグごとに記事を絞り込んで表示するか、用途に合わせてブロックを使い分けます。

表示タイプ(デザイン)は3種類から選択できます。

STORK19の記事一覧ブロック-1
スクロールできます
STORK19の記事一覧ブロック-4
カード
STORK19の記事一覧ブロック-2
シンプル
STORK19の記事一覧ブロック-3
テキスト

カード型の場合は、パソコン、モバイル、タブレットの画面サイズごとに表示するカラム数を設定できます。

その他、表示する内容や除外する記事の設定などもできるようになっています。

STORK19の記事一覧ブロック-5

WordPress標準ブロックの機能拡張

WordPressテーマSTORK19では、以下のWordPress標準ブロック(コアブロック)に対して独自の拡張機能が追加されています。

  1. 段落ブロック
  2. 見出しブロック
  3. リストブロック
  4. テーブルブロック
  5. ボタンブロック
  6. 画像ブロック
  7. 動画ブロック
  8. グループブロック
  9. カバーブロック

それぞれ紹介していきます。

段落ブロック

WordPress標準ブロックの段落ブロックにデザイン面で機能が追加されています。

STORK19の段落ブロックでできることは以下のとおりです。

スタイルを15種類から選択できる

12種類のオリジナルスタイルが追加されていて、デフォルトと合わせると15種類から選択できるようになっています。

STORK19のコアブロック機能拡張-1

デザインの数が多いので動画にまとめました。

動画内ではスタイルが13種類しかありませんが、v.3.17のアップデートで「メモ」と「ヒント」のスタイルが追加されて計15種類になっています。

見出しブロック

WordPress標準ブロックの見出しブロックにデザイン面で機能が追加されています。

STORK19の段落ブロックでできることは以下のとおりです。

  • デザインはカスタマイザーで設定できる
  • 良く使う見出しのバリエーションが登録されている

テーマカスタマイザーで基本的な見出しのデザインを設定できます。

WordPress管理画面→「外観」→「カスタマイズ」→「投稿・固定ページ設定」→『見出しデザイン』

STORK19のコアブロック機能拡張-2

また、見出しブロックのスタイルには、記事で主に使う「デフォルト」以外に「スタイルなし」、「セクション見出し」が用意されています。

これらは、トップページなどで活用することが多くなりますが、ブロックバリエーションとしても登録されています。

STORK19のコアブロック機能拡張-3

リストブロック

WordPress標準ブロックのリストブロックにデザイン面で機能が追加されています。

STORK19のリストブロックでできることは以下のとおりです。

スタイルを15種類から選択できる

リストのスタイルを15種類から選択できます。

STORK19のコアブロック機能拡張-4

デザインの数が多いので動画にまとめました。

テーブルブロック

WordPress標準ブロックのテーブルブロックに機能が追加されています。

STORK19のテーブルブロックでできることは以下のとおりです。

  • ボーダースタイルが追加されている
  • 表の横スクロールができる

サイトを閲覧するデバイスの幅が480px以下の場合のみ、表を横スクロールさせることができます。

STORK19のテーブルブロック-1

それから1列目をth(テーブル見出し)風のデザインにすることができます。1列目がグレーになりますが、色の指定はできません。

STORK19のテーブルブロック-2

画像ブロック

WordPress標準ブロックの画像ブロックにデザイン面で機能が追加されています。

STORK19の画像ブロックでできることは以下のとおりです。

スタイルを15種類から選択できる

画像のスタイルを15種類から選択できます。

STORK19のコアブロック機能拡張-5

デザインの数が多いので動画にまとめました。

グループブロック

WordPress標準ブロックのグループブロックに機能が追加されています。

STORK19のグループブロックでできることは以下のとおりです。

  • ブロック内部の余白設定
  • ブロックの形状を設定できる

ブロックの内部の余白を4段階から選択できます。

STORK19のコアブロック機能拡張-6

ブロックの形状を設定できます。

STORK19のコアブロック機能拡張-7
STORK19のコアブロック機能拡張-8
upscale
STORK19のコアブロック機能拡張-9
uppoint

カバーブロック

WordPress標準ブロックのカバーブロックにデザイン面で機能が追加されています。

STORK19のカバーブロックでできることは以下のとおりです。

ブロックの形状を設定できる

カバーブロック全体の形状を、グループブロック同様に指定できます。

STORK19のコアブロック機能拡張-12
STORK19のコアブロック機能拡張-11
downscale
STORK19のコアブロック機能拡張-10
downpoint

エディター全体の機能拡張

WordPressテーマSTORK19では、WordPress標準のブロックエディター機能に対して以下の独自拡張機能が追加されています。

  1. 文字装飾の追加
  2. アニメーション設定
  3. ブロック上下の余白設定
  4. デバイスごとの非表示設定

それぞれ紹介していきます。

文字装飾の追加

STORK19では、以下のような文字装飾が可能です。

  • マーカー
  • ラベル
  • フォントサイズ
  • ルビ
  • GoogleFontへの変換
  • Strongタグを使わない太字
  • アイコンの設置
STORK19のエディター拡張機能-1

アニメーション設定

STORK19ではブロックごとにアニメーションを設定できます。

各ブロックのサイドバーにある「アニメーション設定」から簡単に6パターンのアニメーションから設定が可能です。

STORK19のエディター拡張機能-2

ブロック上下の余白設定

STORK19では、ブロックごとに上下の余白量を調整できます。

ブロックツールバーかサイドバーの「上下の余白設定(margin)」から設定が可能です。

STORK19のエディター拡張機能-3

デバイスごとの非表示設定

PC、タブレット、モバイルごとにブロックを非表示にすることも可能です。

サイドバーの「表示設定」に3つの選択肢が用意されているので、お好みに合わせて選択するだけでOKです。

STORK19のエディター拡張機能-4

STORK19のブロックエディター機能と使い方まとめ

WordPressテーマSTOK19のブロックエディターについて紹介しました。

STORK19のブロックエディターでできることは以下です。

ブロックエディター機能に関しては、例えばSWELLやSANGOに似たような機能や装飾が用意されています。かなり意識して開発が進められているのかなという印象です。

今後も、STORK19のブロックエディター開発がどのように進んでいくのかチェックしていきたいと思います。

最後まで読んでいただきありがとうございました。


の公式サイトはこちら…!


WordPressテーマのブロックエディター機能一覧

WordPressテーマSTORK19のブロックエディターの使い方や機能まとめ

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次