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ブロック」の解説

ボックス

TITLE

ノーマルデザインのボックスです。

TITLE

シンプルデザインのボックスです。

TITLE

タイトルデザインのボックスです。

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

色もいろいろ変えれます

色もいろいろ変えれます

詳しくはこちらの記事で解説しています。

「ボックス」ブロックの使い方

アコーディオン

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

アコーディオンブロックの使用イメージ

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

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

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

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

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

吹き出し

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

サイくん

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

トリくん

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

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

詳細は以下のページで紹介しています。

会話形式の表現ができる「吹き出しブロック」

ボタンスタイル

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

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

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

ツールバーのテキスト装飾

ツールバーでの文字装飾
  • テキストに
    • マーカー(アンダーライン)を引いたり
    • ラベルをつくったり
    • フォントサイズの変更(パーセント指定)

することができます。

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

補足説明ブロック

補足説明ブロック

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

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

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

サイくん

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

CTAを設置しよう!

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

ABOUT US

OPENCAGEサブテキストがはいります!
ライターのプロフィールが入ります。このライター情報を入れたくない場合は管理画面の ユーザー > あなたのプロフィールの「プロフィール情報」を未入力にすれば表示されません。逆に「プロフィール情報」を入力することでライター情報を表示できます。