新テーマ「ストークSE」をリリースしました!

STORK19でのGutenbergの使い方【完全ガイド】

STORK19でのGutenbergの使い方【完全ガイド】

STORK19はクラシックエディタでも利用できますが、ブロックエディタ(Gutenberg)に対応したテーマです。

クラシックエディタとは違い、ブロックエディタでは編集画面上でプレビューとほぼ同じデザインが確認できるため、直感的に記事を書くことができます。

ブロックエディタを使ってこそ、ストーク19の性能をより実感できるかと思いますので、この記事ではその使い方をまとめてご紹介します。

OPENCAGE

クラシックエディタを使っている人も、これからはブロックエディタに切り替えてみてはいかがでしょう。きっと慣れれば劇的に便利になりますよ!

この記事は、WordPress(5.8.2) / STORK19(2.9.5)時点の仕様に基づいた解説内容となります。お使いのバージョンによっては仕様が異なる場合がありますのでご注意ください。

※2022年8月30日追記:STORK19(3.13)時点の機能について情報を追加しました。

更に基本的な内容に絞った記事の書き方も紹介しています!

WordPressとテーマは最新にしておきましょう

STORK19では、WordPressの最新バージョンに合わせて検証とアップデートを行っています。ブロックエディタでの不具合を回避するには、WordPressとテーマの両方を常に最新にしておくことをおすすめします。

基本機能:ブロックエディタでの記事作成

ブロックエディタでは、各々のブロック(要素)を追加して記事を構成していきますが、ブロックを追加するには、下記のように3つの方法があります。

ボタンを追加する場合の例

ここでは、ショートカット(「/」と「ブロック名」)でブロックを追加する操作方法を紹介しますが、このやり方を覚えるだけで、記事作成が格段に効率的になると思います。

見出しの挿入

ツールバーから見出しレベル(H1〜H6)を変更できます。また、通常のテキスト(段落ブロック)から見出しへの変換も可能です。

このブロックの追加方法

+を押して「見出し」を検索、もしくはエディタに「/見出し」を入力して選択

リストの挿入

ツールバーから番号付きリストに変換することもできます。また、見出しや段落からリストへの変換も可能です。

このブロックの追加方法

+を押して「リスト」を検索、もしくはエディタに「/リスト」を入力して選択

画像の挿入

新たにアップロードするかメディアライブラリから選択した画像を挿入できます。

このブロックの追加方法

+を押して「画像」を検索、もしくはエディタに「/画像」を入力して選択

太字(強調)にする

文章の中で重要な文言を太字にすることで情報を強調できます。

このツールの適用方法

太字(強調)にするテキストを選択して、ツールバーの「B(太字)」を選択

ただ、この場合<strong>タグが付与されるので、同じページ内で色々な文言に多用するのは、SEOの観点から避けた方が良いです。

装飾として太字にしたのであれば、STORK19の機能 BOLD (CSS)を使いましょう。

テキストの色を変える

文章内の特定のテキストの色を変更して情報を識別し易くできます。

このツールの適用方法

色を変えるテキストを選択して、ツールバーの「」から「ハイライト」を選択

STORK19の機能:オリジナルブロック

STORK19専用のブロック(STORK19 BLOCKS)を利用できます。簡単にデザイン性の高い装飾を追加することが可能です。

記事リスト

記事リスト(カテゴリー)、記事リスト(タグ)、記事リスト(新着)の3種類があり、カテゴリーIDまたはタグID(新着記事の場合は不要)を入力して記事一覧を表示できます。

このブロックの追加方法

+を押して「記事リスト」を検索、もしくはエディタに「/記事リスト」または「/postlist」を入力して選択

https://www.stork19.com/postlist-block/

関連記事

記事のURLまたはIDを入力して、内部リンクをブログカードで表示できます。

このブロックの追加方法

+を押して「関連記事」を検索、もしくはエディタに「/関連記事」または「/kanren」を入力して選択

https://www.stork19.com/blogcard-block/

吹き出し

アイコン画像と吹き出し文章で会話形式の表現を作成できます。ver3.15より吹き出し設定を登録しておけるマイセット機能が利用できるようになりました。

このブロックの追加方法

+を押して「吹き出し」を検索、もしくはエディタに「/吹き出し」または「/hukidashi」を入力して選択

https://www.stork19.com/balloon-block/

Q&A

「よくある質問」などで用いられるQ&A(FAQ)形式の表現を作成できます。

このブロックの追加方法

+を押して「Q&A」を検索、もしくはエディタに「/qa」または「/faq」を入力して選択

https://www.stork19.com/faq-block/

ボックス

記事内に別枠を設けて解説を入れるなど、内容をひと際目立たせることができます。ノーマルのボックスとタイトル付きのボックスの2種類があります。

このブロックの追加方法

+を押して「ボックス」を検索、もしくはエディタに「/ボックス」または「/box」を入力して選択

補足説明

記事内に注釈を入れたいときなど、アクセントとして使うことができます。

このブロックの追加方法

+を押して「補足説明」を検索、もしくはエディタに「/補足」または「/hosoku」を入力して選択

通常の文章(段落ブロック)を補足説明スタイルに変更する方法もあります。

アコーディオン

文章などの内容を格納した状態で表示できます。タイトル部分を押して内容を展開できるので、項目ごとにコンパクトに収めたいときに使います。

このブロックの追加方法

+を押して「アコーディオン」を検索、もしくはエディタに「/アコーディオン」または「/accordion」を入力して選択

ステップ

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

このブロックの追加方法

+を押して「ステップ」を検索、もしくはエディタに「/ステップ」または「/step」を入力して選択

グリッド

カラム(横並び)のコンテンツを作成できます。ブロックエディタ標準のカラムブロックよりもレイアウトの自由度が高く、モバイルとPCでカラム数を変更できるのが特徴です。

最初のグリッド

2番目のグリッド

3番目のグリッド

4番目のグリッド

5番目のグリッド

最後のグリッド

PCは3列で表示、モバイルは2列で表示といった設定が可能です。また、グリッド同士の間隔も細かく調整できます。

このブロックの追加方法

+を押して「グリッド」を検索、もしくはエディタに「/グリッド」または「/grid」を入力して選択

アイコンサークル

あらかじめ、FontAwesomeのアイコンが配置されたブロックを用意しています。


アイコンサークル


アイコンサークル(暗)


アイコンサークル(影)


アイコンサークル(影,暗)

FontAwesomeのクラス名を入力して、好きなアイコンを表示できます。

このブロックの追加方法

+を押して「アイコン_サークル」を検索

フルワイドセクション

背景色付きのコンテンツを画面幅いっぱいに表示できるブロックです。サイト型トップページやLPなどのフルワイドページで使用すると効果的です。

フルワイドセクション(見出し色背景)

背景色付きのコンテンツを画面幅いっぱいに表示できるブロックです。こちらのフルワイドセクションには、見出しと同じ背景色が反映されます。

このブロックの追加方法

+を押して「フルワイドセクション」を検索、もしくはエディタに「/フルワイドセクション」または「/full」を入力して選択

STORK19の機能:標準ブロックも便利に

STORK19ではオリジナルブロックだけではなく、デフォルトのブロックを機能拡張して便利な機能も追加しています。

ブロックの表示設定

ver3.8より各ブロックの端末(画面幅による指定)ごとの表示非表示を切り替え可能になりました。

画面幅によって表示するブロックの切り替えができるので、スマートフォンとパソコンで表示を切り替えるといったことができるようになります。

このブロックの使い方

ブロック設定パネルの「表示設定」から表示端末を選択

ブロックアニメーション設定

STORK19のver3.8より、アニメーションが利用可能になりました。アニメーションオプションは、コアブロックとSTORK19専用ブロックで利用可能です。

アニメーションの設定パネル

このブロックの使い方

ブロック設定パネルの「アニメーション設定」からアニメーションの種類を選択

ブロックの形状を設定

STORK19のver.3.7より、グループブロックカバーブロックの2種類のブロックに、ブロックの形状を変えるオプションを備えています。

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

このブロックの使い方

グループブロックまたはカバーブロックの設定パネルの「ブロックの形状」からブロックの形を選択

テーブル(表)ブロックとテーマ専用オプション

WordPress標準で用意されているテーブルブロックを、STORK19テーマ専用に調整&機能拡張しています。

このブロックの使い方

+を押して「テーブル」を検索、もしくはエディタに「/テーブル」または「/table」を入力して選択

段落ブロックのスタイル

段落ブロックを補足説明マイクロコピーのスタイルに変更できます。ワンクリックで変換できるので、後からでも容易に変更できます。

このツールの使い方

段落ブロックのスタイル設定から変更したいスタイルを選択

マイクロコピーの使い方については、下記を参考にしてみてください。

ボタンのスタイル

デフォルトのボタンブロックにSTORK19のスタイルが適用されます。

テーマカスタマイザー(管理画面の【外観 > カスタマイズ > サイトカラー設定】)の「リンク色」で選択している色が適用される他、リッチボタンで目立たせることもできます。

このブロックの追加方法

+を押して「ボタン」を検索、もしくはエディタに「/ボタン」または「/button」を入力して選択

https://www.stork19.com/button-block-style/

STORK19の機能:ツールバーの機能も強化

STORK19では、ツールバーにも便利な機能を追加しています。

ブロックエディタのツールバーは、入力しているテキストと最も近い場所にあるので、よく使うものだったり、文章を編集する上で便利なものが配置されている方がよいと考えます。

マーカー

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

このツールの使い方

マーカーを引きたいテキストを選択して、ツールバーの「マーカー」を選択

ラベル

このようにテキストをラベルで囲むことができます。

このツールの使い方

ラベルで囲みたいテキストを選択して、ツールバーの「ラベル」を選択

フォントサイズ

このようにテキストのフォントサイズを変更できます。

このツールの使い方

大きさを変えたいテキストを選択して、ツールバーの「フォントサイズ」を選択

上下の余白

ブロックの上下の余白(マージン)をツールバーから設定できます。

その他

太字(装飾)

このように目立たせたい箇所を太字装飾できます。

このツールの使い方

太字(装飾)にするテキストを選択して、ツールバーの「」から「BOLD (CSS)」を選択

<strong>タグで強調したいのであれば、基本機能 B(太字)の使用がおすすめです。

FontAwesomeアイコンの挿入

アイコンフォントの FontAwesomeを呼び出すことができます。

このツールの使い方

ツールバーの「」から「FontAwesome Icon」を選択。class名を入力してアイコンを指定します。

https://www.stork19.com/fontawesome5-icon-shortoce/

Googleフォントの適用

テーマカスタマイザー(管理画面の【外観 > カスタマイズ > サイト全体の設定】)の「Googleフォント設定」で選択しているフォントを特定のテキストに適用できます。

通常
Sample Text

Googleフォント
Sample Text

このツールの使い方

Googleフォントを適用するテキストを選択して、ツールバーの「」から「Googleフォントを適用」を選択

Googleフォントを適用できるのは英語テキストとなりますので、日本語テキストに適用した場合はフォントは変わりません。

ふりがな(るび)

みづらい漢字かんじなどにふりがなをふれます。

このツールの使い方

ふりがな(るび)をふるテキストを選択して、ツールバーの「」から「ふりがな(ルビ)」を選択。ふりがなを入力します。

まとめ

Gutenberg(ブロックエディタ)の使い方をSTORK19の機能と交えて解説しました。

今後も、ブロックエディタの仕様状況に応じた改良や機能の追加も行っていく予定なので、まだクラシックエディタを使っているようであれば、ブロックエディタに切り替えることで記事作成がより快適になりますよ。

なお、下記にブロックエディタについての紹介記事をまとめていますので、こちらも参考にしていただければと思います。

NEWモデル

STORK SE

よりコンテンツに集中させるテーマ
STORK SE(ストークSE)

STORK SEはシングルカラム(1カラム)に特化したテーマなので、より訴求力の高いページやブログ記事を作成するのに向いています。

究極のモバイルファーストテーマ
STORK19(ストーク19)

ブログを書くのが楽しくなる仕掛けや機能がたっぷり!STORK19は読む人も書く人も快適なWordPressテーマです。