STORK19でのGutenbergの使い方【完全ガイド】 - OPENCAGE
新テーマ「STORK19」はこちら!

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

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

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

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

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

OPENCAGE

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

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

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

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

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

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

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

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

見出しの挿入

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

このブロックの追加方法

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

リストの挿入

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

このブロックの追加方法

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

画像の挿入

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

このブロックの追加方法

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

太字(強調)にする

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

このツールの適用方法

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

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

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

テキストの色を変える

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

このツールの適用方法

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

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

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

記事リスト

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

このブロックの追加方法

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

関連記事

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

このブロックの追加方法

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

吹き出し

アイコン画像と吹き出し文章で会話形式の表現を作成できます。

このブロックの追加方法

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

Q&A

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

このブロックの追加方法

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

ボックス

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

このブロックの追加方法

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

補足説明

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

このブロックの追加方法

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

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

アコーディオン

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

このブロックの追加方法

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

STORK19の機能:その他

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

段落ブロックのスタイル

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

このツールの使い方

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

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

ボタンのスタイル

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

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

このブロックの追加方法

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

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

特定のテキストを目立たせたい場合は、装飾機能を使うと効果的です。

マーカー

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

このツールの使い方

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

ラベル

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

このツールの使い方

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

フォントサイズ

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

このツールの使い方

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

太字(装飾)

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

このツールの使い方

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

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

Googleフォントの適用

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

このツールの使い方

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

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

まとめ

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

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

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

CHECK! OPENCAGEのアフィリエイトプログラムについて /

NEWバージョン!

究極のモバイルファースト
WPテーマ「STORK19」

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

いさぎよく、シンプル。
WPテーマ「スワロー」

SWALLOWはシンプルな見た目と洗練された機能美が光るWordPressテーマです。

「必要なものとは何か」を考え尽くして、無駄な機能やデザインを削ぎ落とした洗練されたWordPressテーマです。