SWELLブロックエディターの使い方をやさしく解説！
※SWELL
の画面を使って解説しますが、他テーマでも使い方は同じです。
ブロックエディターの使い方がさっぱり分かりません･･･。
ヒナキラOK。ブロックエディターの使い方を解説しますね。
SWELLにテーマを変えたけど、ブロックエディターの使い方が･･･。
といったお悩みがある方のために、ブロックエディターの使い方をできるだけ分かりやすく解説します。
なお、SWELLの画面で解説しますが他のテーマでもほとんど同じなので、テーマが違う方も安心して見ていって下さいね。
それでは、まいりましょう。
ブロックエディターとは「積み木」のようなもの
ブロックエディター（Gutenberg）とは、2018年のWordPress5.0から採用されているエディターで、上記のように、ブロックを組み合わせるために「ブロックエディター」と呼ばれています。
- 見出しは「見出しブロック」
- 本文は「段落ブロック」
- 画像は「画像ブロック」
- 引用は「引用ブロック」
- リストは「リストブロック」
- テーブルは「テーブルブロック」
主に上記のようなブロックを組み合わせて記事を作成します。
言ってみれば、ブロックを積み上げていく「積み木」のようなものといえますね。
ヒナキラブロックエディターは、慣れるとサクサク記事作成ができますよ。
SWELLブロックエディターの「画面構成」
次にブロックエディターの画面構成について見ていきましょう。
SWELLのブロックエディターでは、大きく分けて３つのエリアに分けられます。
- トップツールバー
- 右ツールバー
- メインコンテンツエリア
ヒナキラひとつずつ解説しますね。
①：トップツールバー
トップツールバーは、「ブロック追加」「元に戻す」「プレビュー」「記事公開」といった基本項目が並ぶエリアです。
WordPress管理画面(ダッシュボード)へ移動
②：右ツールバー
右ツールバーは「投稿タブ」と「ブロックタブ」の２つに分かれます。
右ツールバー「投稿」タブ
「投稿タブ」では、パーマリンク（URL）、カテゴリー、アイキャッチなどの設定を行います。
右ツールバー、「ブロック」タブ
「ブロックタブ」ではボックス装飾、テキストカラー、フォントサイズ変更などが行えます。
③：メインコンテンツエリア
記事本文を入力して、記事作成を行うエリアです。
ヒナキラここで文章を書いたり画像を入れたりしていきます。
SWELLブロックエディターの「記事公開までの５ステップ」
次に、SWELLブロックエディターを使って記事を公開するまでの流れを見ていきます。
- タイトルを入力（メインコンテンツエリア）
- 本文の作成（メインコンテンツエリア）
- 投稿設定（右ツール「投稿」タブ）
- プレビューで確認（トップツールバー）
- 記事の公開（トップツールバー）
ヒナキラ上記の５ステップについて、やさしく解説します。
ステップ①：タイトルを入力
まず、「タイトルを追加」となっている箇所をタップして、タイトルを入力します。
ヒナキラあとからでも変更できるので、ザックリとしたものでOKです。
ステップ②：メインエリアに本文を入力
続いて、メインエリアで本文や画像などを入力していきます。
上記の部分に「文章」「見出し」「画像」など、様々なブロックを組み合わせて記事を作成していきます。
記事作成の基本となる「文章入力」「画像挿入」「リスト作成」のやり方は以下のとおりです。
文章は「段落ブロック」に入力していきます。
ヒナキラ記事本文は、上記のように作成していきます。
続いて、文字入力すると出てくるメニュー「ブロックメニュー」の見方も解説していきます。
ブロックメニューの見方
ブロックエディターでは、文字を入力すると下記のような「ブロックメニュー」が出てきます。
見出し入力時のブロックメニュー
ブロックタイプまたはスタイルを変更したいときに使います。（文章を見出し、ふきだし、リストなどに変換可能）
ヒナキラYouTubeでも解説しています
ステップ③：投稿設定をする
タイトル、記事本文の入力が完了したら「投稿設定」をします。
「アイキャッチ画像」「パーマリンク」「カテゴリー」といったものの設定ですね。
ヒナキラそれぞれ見ていきましょう。
アイキャッチ画像設定
アイキャッチ画像設定の流れは下記です。
- 右ツールメニューをクリック
- 投稿タブをタクリック
- 「アイキャッチ画像を設定」をクリックして画像を選択
URLスラッグの設定
URLスラッグは、上記のようにページURLの一部を構成するものです。
ヒナキラ英語の文字列にするのがオススメ。
URLスラッグ設定の流れは下記です。
- 右ツールメニューをクリック
- 投稿タブをクリック
- 「URLスラッグ」を変更
ヒナキラ僕の場合、タイトルを英語変換しています。
カテゴリーの設定
記事の「カテゴリー」を選択しましょう。
カテゴリー設定の流れは下記です。
- 右ツールメニューをクリック
- 投稿タブをクリック
- カテゴリーを選択
ヒナキラカテゴリー選択は「１つ」だけを選ぶのがオススメ。
ステップ④：プレビューで記事を確認・点検する
記事が書けたら、プレビューで内容の確認をしましょう。
- トップツールバーの「プレビュー」をクリック
- 内容の確認（誤字脱字、レイアウトなど）
- PCだけでなく、モバイルでも確認
ヒナキラ記事作成のゴールはもうすぐです。
ステップ⑤：記事を公開する
内容確認ができたら、トップツールバーの「公開」をクリック。
これで投稿完了となります。
ヒナキラ以上、ここまでがブロックエディターでの記事作成の流れになります。
ブロックエディター基本の使い方
次はブロックエディター基本の使い方についても解説していきます。
特に覚えておくべき内容は以下の５つ。
- ブロックの追加
- ブロックの移動
- ブロックの削除
- ブロックのコピー
- ブロックのグループ化
ヒナキラ順番に解説していきますね。
基本①：ブロックを追加する
ブロック追加の方法は下記のとおりです。
①ブロック追加「＋」をタップ。
②使いたいブロックを選んでクリックする。
すると、選んだブロックがメインコンテンツエリアに追加されます。
ヒナキラちなみに、SWELLでは80以上のブロックが使えます。
基本②：ブロックを移動させる
ブロック移動方法を見ていきましょう。
①移動させたいブロックをクリック。（文字の横付近をクリックしてみましょう）
②上下ボタンをクリック。（今回は上に移動したいので、上のマークをクリック）
③選んだブロックを上に移動できました。
ヒナキラブロック移動は良く使うので覚えておきましょう。
基本③：ブロックを削除する
ブロックの削除方法も見てい行きましょう。
①削除したいブロックを選ぶ。(文字の横付近をクリック）
②「〇〇〇を削除」をクリック。
③削除したいブロックが消えました。
ヒナキラちなみに、間違えて削除してしまったときは、トップツールバーの「元に戻す」から復元できます。
間違って削除してしまったとき
基本④：ブロックをコピーする
ブロックのコピー方法も見ていきましょう。
①コピーしたいブロックを選ぶ。
②「コピー」をクリック。
③貼り付けをしたい場所で、「右クリック」→「貼り付け（Ctrl+V）」をクリック。
④コピーされました。
ヒナキラ貼り付け方は、一般的なコピペの方法と同じです。
基本⑤：ブロックをグループ化する
続いて、複数ブロックのグループ化を見ていきます。
①グループ化したいブロックの範囲を選択。
②「グループ化」をクリック。
③グループ化されました。
ヒナキラグループごとに移動をしたり、グループごとに囲い装飾したり、といった形で使用できます。
では、実際にグループ化したブロックを移動させてみます。
①移動したい範囲をグループ化。
②「上下」のいずれかをクリック。（今回は下に移動させます）
③グループ化した範囲を移動できました。
といったように、「グループ化」はブロックをまとめて移動する場合にも便利です。
ブロックエディターで「良く使うブロック」６つ
ここでは、使用頻度の高いブロックを６つ紹介したいと思います。
具体的には、以下の通り。
- テーブルブロック
- カラムブロック
- リストブロック
- 画像ブロック
- 見出しブロック
- 段落ブロック
ヒナキラでは、順番に見ていきましょう。
①：テーブルブロック
まずは「テーブルブロック」です。
ブログ記事作成において表はとても便利なので、表を作れる「テーブルブロック」は重宝します。
なお、上記のテーブルはSWELLならではの機能が付いています。
※WordPress標準のテーブルはセルごとに色を変えたり、記号を入れたりはできません。
テーブルブロックの呼び出し
テーブルブロックは、ブロック一覧から「テーブル」をクリックすれば呼び出せます。
ヒナキラちなみに、テーブル内の文字はスニペットに表示されやすいので、検索結果で目立つ効果も。
②：カラムブロック
次に「カラムブロック」です。
通常は１つのブロックに１つの画像などしか使えませんが、カラムブロックを使うことで１つのブロックの中に複数のブロックを入れられます。
例えば、以下のような場合です。
これは左右に２つの画像を表示していますが、カラムブロックを使用して行います。（通常は１つのみしか表示できない）
カラムブロックの呼び出し
カラムブロックは、上記のようにブロック一覧の「カラム」をタップすれば呼び出せます。
ヒナキラカラムブロックは、左右で分割してブロックを表示させたいときに使います。
③：リストブロック
下記が「リストブロック」。箇条書きの作成などに便利です。
リストブロックの呼び出し
リストブロックを呼び出すには、ブロック一覧の「リスト」をタップでオッケー。
ヒナキラリストブロック、めちゃくちゃ重宝しますね。
④：画像ブロック
下記は「画像ブロック」を使用した例です。
画像ブロックの呼び出し
画像ブロックを呼び出すには、ブロック一覧の「画像」をタップすればオッケーです。
ヒナキラ画像ブロックの使用頻度は高いです。
⑤：見出しブロック
下記は「見出しブロック」です。
見出しブロックの呼び出し
画像ブロックを呼び出すには、ブロック一覧の「見出し」をタップすればオッケーです。
または、あらかじめ段落ブロックにテキスト入力をしてから、ブロックタイプを「見出し」に変更する方法でも良いですね。
ヒナキラ見出し文を書いてから「ブロックパターン変更」の方法もあります。
(むしろそっちがオススメ)
⑥：段落ブロック
もはや説明の必要はないでしょう。
文章を入力するときに使用する「最もよく使う」ブロックです。
デフォルトで表示されるものが「段落ブロック」です。
ヒナキラ「段落ブロック」は文字入力に使う、基本のブロックです。
SWELLのおすすめブロック５選
の専用ブロック使い方動画＼ 便利なSWELL専用ブロック／
当サイトも使用しているテーマ「SWELL」は、ブロックエディターに完全対応したテーマ。
SWELL専用のブロックが豊富にあって、どれも使いやすくて素晴らしい。
ヒナキラSWELLブロックエディターの使い心地は、最高です！
ブロックエディターを使うならSWELL！ということで、SWELLの専用ブロックについて「ランキング形式で５つ」紹介します。
第５位：ステップブロック
ぼく的SWELL専用ブロック第５位は、「ステップブロック」です。
ヒナキラ手順の説明などの時に重宝します。
タイトル入力欄にタイトルを入力する。
メインコンテンツエリアで、記事本文を入力していく。
パーマリンク、アイキャッチ画像などの設定をする。
プレビューで変なところがないか確認する。
記事を全世界に羽ばたかせる。
こんな感じのものを作れます。
第４位：SWELLボタンブロック
SWELLブロック第４位は、「SWELLボタンブロック」です。
しかもクリック率も計測できて便利です。
ヒナキラおしゃれなボタンで押したくなっちゃいますね。ボタンの種類なんと60種類！
第３位：関連記事ブロック
SWELLブロック第３位は、「関連記事ブロック」です。
下記のようにブログカード型、スリムカード型、テキストリンクにできます。
第２位：キャプション付きブロック
SWELLブロック第２位は、「キャプション付きブロック」です。
ヒナキラ下記のようなキャプション付きのボックスですね。
SWELLのキャプション付きブロック
おしゃれで使いやすい！
SWELLのキャプション付きブロック
おしゃれで使いやすい！
SWELLのキャプション付きブロック
おしゃれで使いやすい！
第１位：ふきだしブロック
SWELLブロック第１位は、「ふきだしブロック」です。
ヒナキラめちゃくちゃ使いやすいですよ！
サンジSWELLのふきだしブロック最高～！
まとめ｜SWELLブロックエディターの使い方
今回は、SWELLブロックエディターの使い方を解説しました。
SWELLのブロックエディターは、とても使いやすく、そして書きやすいので、記事執筆の効率化に繋がります。
ヒナキラ実際、かなり効率化できました。
SWELLとともに、ブロックエディターとともに、楽しく効率的なブログライフを楽しんでいきましょう。
では、またねっ。
当サイト使用テーマ。最高です。
- 購入者限定アフィリエイトがあるからテーマで稼げる
- 書きやすくて時短になるから生産性があがる
- ChatGPTとの相性もバツグンで時短が加速
- 誰でも簡単にオシャレなデザインにできる
- 買い切り、複数サイトにバンバン使える
- アプデが多くて進化がスゴイ
- SEOにも強い
- 価格が高い
- 個人開発の不安
- 人気すぎてデザインが被りがち
＼ 時短になって生産性が爆上がりするテーマ ／
※おしゃれで書きやすくてブログが楽しくなる
コメント