STORK19の購入ページはこちら

【Gutenberg】ブロックエディターへの対応

STORK19のブロックエディタで使うことができる「オリジナルブロック」を紹介します。

WordPress5より追加されたGutenbergブロックエディタにて、簡単にデザイン性の高い装飾を追加することが可能です。

編集画面にて実際に表示されるページと同等の見た目で編集ができるため、ブログ記事はもちろん、ランディングページも素早く作ることができます。

ブロックエディタ(Gutenberg)を使用している場合はぜひご活用ください。

関連記事ブロック

関連記事を表示することができるブロックを用意しています。(v1.6.0〜)

詳しい使い方は下記記事にて紹介しています。

ブログカードが簡単に使える「関連記事」ブロック

記事リストブロック

記事リストを表示することができるブロックを用意しています。(v1.6.0〜)

詳しい使い方は下記記事にて紹介しています。

カテゴリー・タグ・新着ごとの「記事一覧」ブロック

Q&A(FAQ)ブロック

Q&Aブロックを追加しました。(v1.5.0〜)

ここに質問

ここに答え

Q&Aブロックの概要動画

Q&Aブロックについては、下記記事でも詳しく解説しています。

よくある質問ページが簡単に作れる「Q&Aブロック」の解説

ボックス(タイトルなし)

タイトルなしのボックスブロックを追加しました。(v1.4.0〜)

タイトル無しのシンプルなボックスブロックです。

タイトル無しの
シンプルな
ボックスブロックです。

  • タイトル無しの
  • シンプルな
  • ボックスブロックです。

背景色なしのシンプルデザインも選ぶことができます。

入力例

アコーディオン

「アコーディオン」を利用可能になりました!以下のようにコンテンツを格納して補足説明的に使うことができます。(v1.1.0〜)

本文のテストです。このように本文が隠れて表示されます。

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

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

編集画面上(ブロックエディタ上)では、下の画像のように表示されます。(※エディタ画面ではアコーディオンをクリックしても開閉しません。)

ブロックエディタ(編集画面)での表示

ボックス-タイトル付き

「タイトル付きボックス」を利用可能になりました!(v1.0.7〜)

タイトルをここに

タイトル付きボックスの表示例です。

タイトルをここに

タイトル付きボックスの表示例です。

使い所

本文の補足や注意点などを記載する際に利用するとわかりやすいです。

タイトル付きボックス作成イメージ

吹き出し

ショートコードで利用できていた「吹き出し」ブロックを利用可能になりました!(v1.0.5〜)

サイくん

Gutenbergのブロックでも吹き出しが使えるようになったよ!

トリくん

ほんとだね!直感的に操作できるようになって、記事編集が楽しくなりそう!

サイくん

設定できる内容は現時点で3つ!

  1. 吹き出しの全体のデザイン
  2. アイコンの位置
  3. アイコン周りの色だよ

中にリストとかも入れることができるね!

上のような会話風の吹き出しブロックを直感的に作成できます。

吹き出しブロックの作成イメージ

「STORK19 Blocks」という場所から選んで利用してください。

ボタンスタイル

「ボタンブロック」のスタイルを変更

ボタンスタイルを変更できます。Gutenbergデフォルトの「ボタン」ブロックにSTORK19用のスタイルを適用しました。

ボタンブロック変更イメージ

テキストマーカー

アンダーラインの適用画面

テキストにマーカー(アンダーライン)を引くことができます。

目立たせたいテキストなどにご利用ください。

テキストマーカーの使用イメージ

補足説明ブロック

補足説明ブロック

ショートコードで使えた補足説明のブロック版です。文章の補足として利用すると目を引くのでおすすめです。

補足説明ブロックの使用イメージ

ブロックエディタは使いやすい

今後便利なブロックを開発し、ブロックエディタに追加していきたいと思います。

サイくん

新しいエディター、結構使いやすいから試しに使ってみて!

CTAを設置しよう!

ここにリンクさせたい自分の商品やアフィリエイトリンクなどを表示させることが可能です。記事下のCTAは収益化においてかなり重要となるので効果的に使いたいところです。タグを追加してあげれば画像なども表示させることが可能!簡単にサイトの収益化の仕組みを導入することができます。