ブロ美ちゃんクラシックエディターは使えなくなると聞いたので、そろそろブロックエディターに対応しなきゃ･･･。
でも、ブロックエディターって、なんだか難しそうなんですよね･･･。
ヒナキラそれが、実はとっても簡単。
慣れれば、記事を書くスピードも速くなって効率的に執筆できるようになります。
もはや、僕はもうクラシックエディターには戻れません。
ブロックエディターが気になっている･･･
ブロックエディターの使い方が良く分からない･･･
ブロックエディターのことをもっと知りたい。
こんなお悩みがある方のために、ブロックエディターの使い方をできるだけ分かりやすく解説します。
ヒナキラWordPressテーマSWELLを使っての解説となりますが、他のテーマであってもほとんど同じなので、安心してくださいね。
では、まいりましょう。
ブロックエディター（Gutenberg）とは「積み木」のようなもの
ブロックエディター（Gutenberg）とは、2018年のWordPress5.0から採用されている新エディター。
下記のように、それぞれのブロックを組み合わせて作っていくために「ブロックエディター」と呼ばれています。
- 見出しの入力には「見出しブロック」
- 本文の入力には「段落ブロック」
- 画像の挿入は「画像ブロック」
- 引用には「引用ブロック」
というように、それぞれのブロックを組み合わせていきます。
簡単にいうと、見出しや文章、画像などのブロックを積み上げていく「積み木」のようなものといえますね。
ヒナキラ積み木のように、ブロックを積み上げていくイメージです。
直感的で効率的に装飾ができるので、時短にもなりますよ。
ブロックエディター使い方「画面構成」
では、次にブロックエディターの画面構成について見ていきましょう。
ブロックエディターでは、大きく分けて３つのエリアに分けられます。
- トップツールバー
- 右ツールバー
- メインコンテンツエリア
ヒナキラ３つのエリアについて、ひとつずつ解説しますね。
①「トップツールバー」エリア
トップツールバーは、ブロックを追加したり、記事の公開をしたりといった基本項目が並ぶエリアです。
＼タップすると説明が見れます／
WordPressの管理画面(ダッシュボード)へ移動
ヒナキラブロックの追加、文字数確認、プレビュー確認、下書き保存、記事の公開などをしたい時に使うエリアですね。
②「右ツールバー」エリア
右ツールバーは、「投稿タブ」と「ブロックタブ」の２つに分かれていて･･･
「投稿タブ」ではパーマリンクなどの投稿設定を、「ブロックタブ」では記事の装飾などを行います。
詳しくは下記をご覧ください。
右ツールバー「投稿タブ」
＼タップすると説明が見れます／
公開状態の確認・設定など
ヒナキラ「投稿タブ」では、カテゴリーを選択したり、アイキャッチ画像を設定したり出来ます。
右ツールバー「ブロックタブ」
＼タップすると説明が見れます／
文字のフォントサイズや行の高さを設定
ヒナキラ「ブロックタブ」は、ボックス装飾など記事の装飾で使いますよ。
③「メインコンテンツ」エリア
タイトルや記事の本文などを入力していく、記事作成のメインとなるエリアです。
ヒナキラ記事作成のメインとなる場所。
ここで文字や画像などを組み合わせて記事を組み立てていきますよ。
ブロックエディター使い方「記事公開までの５ステップ」
では次に、ブロックエディターを使って記事を公開するまでの流れを見ていきます。
カラフル娘記事を公開するまでの全体像はこんな感じなんですね。
でも、良く分かりません。
ヒナキラそうですよね！
なので、今から上記の５ステップについて、やさしく解説していきますよ～。
ステップ①：まずはタイトルを入力する
まず、「タイトルを追加」となっている箇所をタップして、記事のタイトルを入力します。
ステップ②：メインエリアで記事本文を入力していく
続いて、本文や画像などを入力していきます。
上記のエリアに「段落ブロック」「画像ブロック」など、様々なブロックを組み合わせて記事を作成していきます。
というわけで、記事作成の基本となる「文章入力方法」「画像挿入方法」と、良く使う「リスト」の作成方法も見ていきましょう。
文章の入力方法
文章を入力していく方法を見ていきましょう。
文章は「段落ブロック」というブロックに入力していきます。
ヒナキラ上記画像のエリアが「段落ブロック」ですね。
ここに文字を入力していきます。
段落ブロックは改行「Enter」するだけで自動で生成されます。
なお、「Shift+Enter」で同じ段落ブロックのまま改行することもできます。
「Shift+Enter」で改行をすると･･･
こんな感じで、行と行の間に「余白」を入れずに･･･
同じ段落の中で改行ができます。
「Enter」 で改行するか、「Shift+Enter」で改行するかの違いは、行間に余白が入るかどうかの違いです。
ヒナキラ記事本文は、上記のように作成していきます。
慣れれば簡単で楽しいですよ。
続いて、文字を入力すると出てくるメニュー「ブロックメニュー」の見方も解説していきます。
ブロックメニューの見方
ブロックエディターでは、文字を入力すると下記のような「ブロックメニュー」が出てきます。
＼タップすると説明が見れます／
①ブロックタイプまたはスタイルを変更
ブロックのタイプやスタイルを変更したい場合につかいます。
- 「見出し」ブロック→「段落」ブロック
- 「段落」ブロック→「見出し」ブロック
- 「段落」ブロック→「リスト」ブロック
などのように、 文字列はそのまま使いたいけど、スタイルだけを変えたい場合に使います。
SWELLでは「段落」から「ふきだし」にブロックタイプ変更も出来てとても便利です。
ヒナキラブロックメニューは、トップツールバーに置いておくこともできます。
実際に、僕はトップツールバーに常駐させてますね。
ステップ③：投稿の設定をする
タイトル、記事本文の入力が完了したら、「投稿の設定」をします。
ヒナキラ右ツールバーで設定していきます。
アイキャッチ画像・パーマリンク・カテゴリーなどの設定をしていきましょう。
では、「アイキャッチ画像」「パーマリンク」「カテゴリー」の設定方法も解説していきます。
アイキャッチ画像の設定
アイキャッチ画像というのは、下記の画像のことです。
記事の「顔」となるものですね。
アイキャッチ画像設定の流れは下記です。
アイキャッチ画像設定
- 右ツールメニューをタップ
- 投稿タブをタップ
- アイキャッチ画像に画像を追加
ヒナキラアイキャッチ画像は、記事の「顔」のようなもの。
とても重要なので、投稿前には必ず設定しましょう。
パーマリンク(URL)の設定
パーマリンクは、記事URLの一部を構成するものになります。
ヒナキラデフォルトの状態では、日本語のパーマリンクになっているのですが、変更しましょう。
日本語のパーマリンクは避けた方が良いようですからね。
パーマリンク設定の流れは下記です。
パーマリンク設定
- 右ツールメニューをタップ
- 投稿タブをタップ
- パーマリンクの「URLスラッグ」を変更
ヒナキラ僕の場合、パーマリンクは「記事タイトル」を英語変換したものを使うことが多いですね。
記事を公開したあとは、あまりパーマリンクを変えない方が良いので、投稿前に設定しておきましょう。
パーマリンクを変えると、それまでの記事の評価がリセットされてしまいます。
カテゴリー設定をする
記事を分類する「カテゴリー」を選択しましょう。
カテゴリー設定の流れは下記です。
カテゴリー設定
- 右ツールメニューをタップ
- 投稿タブをタップ
- カテゴリーを選択
ヒナキラカテゴリーはSEO対策でも大切なので、必ず設定しておくべきですね。
ちなみに、カテゴリー選択は「１つ」だけを選びましょう。
複数選択するのは良くないようです。
ステップ④：プレビューで記事を確認・点検する
ここまでくれば、記事作成のゴールはもうすぐです。
記事が書けたら、最後にプレビューでおかしなところがないか確認しましょう。
プレビューの見方
- トップツールバーのプレビューをタップ
- 見た目の崩れがないか、誤字脱字がないか確認
- PCだけでなく、モバイルでも確認
ステップ５：記事を公開する
「公開」をタップして記事投稿完了です。
以上、ここまでがブロックエディターでの記事作成の流れになります。
ヒナキラブロックエディターに慣れてしまえば、簡単です。
というか、すぐに慣れますよ。
ブロックの基本操作と使い方
ブロックエディターについておおまかに理解できたところで、次はブロックの基本操作についても解説していきます。
解説する内容は以下の通り。
- ブロックの追加
- ブロックの移動
- ブロックの削除
- ブロックのコピー
- ブロックのグループ化
- ブロックの再利用
順番に解説していきますね。
基本操作①：ブロックを追加する
ブロック追加の方法は下記のとおりです。
①ブロック追加「＋」をタップ。
②使いたいブロックを選んでタップする。
すると、選んだブロックがメインコンテンツエリアに追加されます。
と、「ブロック追加」はこのような流れになります。
ヒナキラちなみに、画像で表示されているブロックは一部のみです。
SWELLでは80以上のブロックがありますよ。
基本操作②：ブロックを移動させる
ブロック移動のやり方は下記のとおり。
①移動させたいブロックを選ぶ。
②上下ボタンをタップ。（今回は上）
これで完了です。
選んだブロックが一番上に移動していますね。
ヒナキラブロック移動は良く使いますよ。
複数のブロック範囲を選択して、一気に移動することもできます。
基本操作③：ブロックを削除する
ブロックの削除も見てい行きましょう。
①削除したいブロックを選ぶ。
②「ブロックを削除」をタップ。
③削除したいブロックが消えました。（削除完了）
ヒナキラもし間違えて削除してしまったときは、下記の「元に戻す」をタップすればブロックを復元できます。
基本操作④：ブロックをコピーする
ブロックのコピー方法も見ていきましょう。
①コピーしたいブロックを選ぶ。
②「コピー」をタップ。
③貼り付けをしたい場所で、「右クリック」→「貼り付け（Ctrl+V）」をタップ。
④上記のように、コピーされたことが分かります。
ヒナキラ貼り付け方は、ブログ以外でも使うコピペの時と同じですね。
基本操作⑤：複数のブロックをグループ化する
続いて、複数ブロックのグループ化を見ていきます。
①グループ化したいブロックを選択。
②グループ化をタップ。
③グループ化が完了。
あとは、グループごとに移動をしたり、グループごとに装飾したり、といった形で使用します。
グループごと移動したい場合
では、実際にグループ化したブロックを移動させてみます。
①段落ブロックと画像ブロックをグループ化
②移動ボタンをタップ。
すると、グループ化したブロックが上に、上の見出しは下にスライドしました。
といったように、「グループ化」はブロックをまとめて移動する場合にも便利です。
基本操作⑥：ブロックを他の記事などで再利用する
「ブロックの再利用」は、何度も同じブロックを使いまわしたい場合に使います。
たとえば、複数の記事で同じブロックを使いたいときなどですね。
ヒナキラいってみれば、定型文のようなものですね～。
再利用ブロックの登録方法
- 再利用したいブロックの範囲を選択。
- 「再利用ブロックに追加」をタップ。
上記のとおり、再利用したいブロックを選択して、「再利用ブロックに追加」をタップ。
これで、再利用ブロックに登録ができました。
上記のように「ブロック一覧」の「再利用可能」タブに再利用ブロックとして追加されています。
ヒナキラあとは、別の記事などで再利用ブロックを呼び出せばオッケーですね。
よく使う基本ブロック５選
では、僕がよく使うブロックをご紹介したいと思います。
ヒナキラ僕がよく使うのなら、みなさんもよく使うことになると思いますので。
まとめると下記です。
- カラムブロック
- リストブロック
- 画像ブロック
- 見出しブロック
- 段落ブロック
では、順番に見ていきましょう。
①カラムブロック
下記が「カラムブロック」です。
上記画像の場合は、左右２つのカラムに分けています。
カラムブロックの呼び出し
カラムブロックは、上記のようにブロック一覧の「カラム」をタップすれば呼び出せます。
ヒナキラカラムブロックは、左右で分割してブロックを表示させたいときに使います。
２つだけでなく、３つに分割したり、４つに分割したりもできますよ。
②リストブロック
下記が「リストブロック」です。
リストブロックの呼び出し
リストブロックを呼び出すには、ブロック一覧の「リスト」をタップでオッケー。
ヒナキラリストブロック、めちゃくちゃ重宝しますね。
情報をまとめたいときに便利です。
使用頻度も高めです。
③画像ブロック
下記は、画像ブロックです。
画像ブロックの呼び出し
画像ブロックを呼び出すには、ブロック一覧の「画像」をタップすればオッケーです。
ヒナキラ画像ブロックの使用頻度は高いです。
「段落ブロック」「見出しブロック」についで多く使われるブロックかもしれません。
④見出しブロック
下記は「見出しブロック」です。
見出しブロックの呼び出し
画像ブロックを呼び出すには、ブロック一覧の「見出し」をタップすればオッケーです。
または、あらかじめ段落ブロックにテキスト入力をしてから、ブロックタイプを「見出し」に変更する方法でも良いですね。
ヒナキラ見出しブロックは、見出しを作成したいときに使います。
使用頻度が高いので、基本ブロックのひとつといえますね。
⑤段落ブロック
もはや説明の必要はないでしょうが、下記が「段落ブロック」です。
段落ブロックの呼び出し
段落ブロックは、ブロック一覧の「段落」をタップするか、記事エリアで「改行（Enter）」をすれば作れます。
ヒナキラ「段落ブロック」は文字を入力するために使います。
一番使うことになる基本のブロックですね。
便利なSWELL専用ブロック５選
＼便利なSWELLブロック／
当サイトも使用しているテーマ「SWELL」は、ブロックエディターに完全対応したテーマといえます。
ヒナキラSWELLブロックエディターの使い心地は、最高です！
事実、これまで8つの有料テーマを使用しましたが、その中でも最高の使いやすさでしたよ～。
SWELLならではのブロックが豊富にあって、これがまた使いやすくて素晴らしい。
ブロックエディターを使うならSWELL！
ということで、SWELLの素晴らしいブロックについて「ランキング形式で」ご紹介していきます。
【SWELL】第５位：ステップブロック
SWELLブロック第５位は、ステップブロックです！
手順の説明などの時に重宝します。
ブロックエディター記事公開までの流れ
タイトル入力欄にタイトルを入力する。
メインコンテンツエリアで、記事本文を入力していく。
パーマリンク、アイキャッチ画像などの設定をする。
プレビューで変なところがないか確認する。
記事を全世界に羽ばたかせる。
といった感じですね。
【SWELL】第４位：SWELLボタンブロック
SWELLブロック第４位は、SWELLボタンブロック！
上記のように、他のページにリンクしたい時や、アフィリンクを貼るにも便利です。
ヒナキラおしゃれなボタンで押したくなっちゃいますよね。
その数なんと60種類！
【SWELL】第３位：関連記事ブロック
SWELLブロック第３位は、関連記事ブロックです！
下記のようなブログカードや、テキストリンクを簡単に呼び出せます。
【SWELL】第２位：キャプション付きブロック
SWELLブロック第２位は、キャプション付きブロックです！
ヒナキラ下記のようなキャプション付きのボックスですね。
とてもおしゃれです！
SWELLのキャプション付きブロック
おしゃれで使いやすい！
SWELLのキャプション付きブロック
おしゃれで使いやすい！
SWELLのキャプション付きブロック
おしゃれで使いやすい！
【SWELL】第１位：ふきだしブロック
SWELLブロック第１位は、ふきだしブロックです！
ヒナキラめっっっちゃくちゃ！使いやすいですよ！
サンジSWELLのふきだしブロック最高だぜ～！
ヒナキラあ、サンジさん！目が飛び出てます！
ろびんふふ、いつものことね。
めっちゃ使いやすい「ふきだしブロック」利用の流れ
- ふきだしセットに画像などを登録
- ふきだしブロックから選ぶ
まずは、このように画像を「ふきだし」として登録しておきます。
あとは、記事作成のときに、登録してあったふきだしを選ぶだけです。
ヒナキラ登録したふきだしセットから選ぶだけで、
このように簡単にふきだしを作れます。
カラフル娘わ～お、簡単すぎますね～。
といったように、めちゃくちゃ簡単にふきだしを使えるのがSWELLの「ふきだしブロック」の最大の良さです！
SWELLのおかげで、ふきだし大好きマンになってしまいました。
SWELLブロックエディターでトップページをカスタマイズ
SWELLのブロックエディターでは、トップページのカスタマイズもラクラクです。
トップページのカスタマイズについても、記事を書くのと同じように、ブロックの組み合わせで作ることができます。
SWELLブロックエディターの評判
ヒナキラこんな感じで、Twitterブログ界隈でも、SWELLブロックエディターは使いやすいと評判です。
SWELLのブロックエディター（Gutenberg）は最高に使いやすい！
| 公式サイト | SWELL |  |
| 使いやすさ | 使いやすさNo.1 | |
| ブロックエディター対応 | 完全対応 | |
| 記事の装飾 | 使いやすくてオシャレ |
当サイトでも使用しているWordpressテーマ「SWELL」は、ブロックエディターに完全対応しています。
しかも、ただ対応するだけではなく、抜群の使いやすさと機能を備えています！
ヒナキラAFFINGER、JINなど、他の有料テーマ7つと比較しましたが、SWELLよりも使いやすいブロックエディターを実装しているテーマはありませんでした。
もはや、他の追随を許さないほどの使いやすさです。
なので、これからブロックエディターを使おうかな？
と思っている方は、まず第一候補に「SWELL」を入れることをオススメします。
実際に、僕はSWELLにして良かった！と本気で思っていますから。
気になる方は、SWELLの評判・評価レビューでSWELLについて詳しく書いていますので、良ければ見てくださいね。
＼ブロックエディターの使いやすさ№１／
まとめ｜Wordpressブロックエディター（SWELL）の使い方
いかがでしたでしょうか。
ぶろっ子ブロックエディターのことが良く分からなかったけど、なんとなく分かるようになったよ。
なんて思ってもらえたなら、とても嬉しいです。
ブロックエディターは慣れると（すぐに慣れる）とても使いやすいエディターです。
そして、SWELLはブロックエディターに完全対応したすばらしいテーマ。
SWELLとともに、ブロックエディターとともに、楽しく効率的なブログライフを楽しんでいきましょう。
では、またのお越しを～。
コメント