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

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

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

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

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

Q&Aブロック

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

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

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

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

表示スタイルの種類は?

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

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

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

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

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

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

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

ボックスブロック

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

タイトル付きボックス

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

タイトル付きボックス

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

タイトル付きボックス

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

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

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

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

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

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

アコーディオンブロック

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

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

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

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

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

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

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

吹き出しブロック

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

ドッグくん

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

キャットさん

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

サイくん

ver.3.15よりアイコン画像や吹き出しスタイルを登録しておけるマイセット登録機能が利用できるようになりました。

補足説明ブロック

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

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

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

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

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

補足ブロックの中に段落を追加することもできます。

ステップブロック

ステップ形式で手順や流れなどを表現するコンテンツを作成できます。(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オリジナルスタイルを適用できます。

段落スタイル:補足

段落スタイル:注意

段落スタイル:サクセス

段落スタイル:グレー

段落スタイル:背景(サイトカラー)

段落スタイル:背景(サイトカラー薄)

段落スタイル:背景(ストライプ)

段落スタイル:ステッチ風

段落スタイル:ボーダー(グレー)

段落スタイル:ボーダー(サイトカラー)

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

段落スタイル:マイクロコピー(吹き出し)

画像スタイル

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

画像スタイル:影(小)
画像スタイル:角丸
画像スタイル:枠線
画像スタイル:ブラウザ風
画像スタイル:傾き右
画像スタイル:トライアングル
画像スタイル:ヘキサゴン
画像スタイル:ランダム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では、ブロックツールバーの機能も拡張しているので、インラインテキストの装飾も直感的に行うことができます。

マーカー

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

ラベル

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

フォントサイズ

フォントサイズ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よりツールバーからも操作可能になりました。

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

CTAを設置しよう!

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

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