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