ブロ美ちゃんブロックエディターって、なんだか難しそうですね。
ひなきらいやあ、使ってみて分かったけど、実はとっても簡単なんですよ～。
むしろめっちゃ効率化できますしね！
ブロックエディターが気になっている・・・
ブロックエディターの使い方がイマイチ分からない・・・
ブロックエディターのことをもっと知りたい！
こんな疑問やお悩みがある方のために、ブロックエディターの使い方をできるだけ分かりやすく解説する記事を作りました！
これを読めば、なんとなく苦手意識のあったブロックエディターへの考えが180度変わるかもしれませんよ！
というわけで、ぜひ最後までお付き合いください～！
当サイトでも使用しているWordpressテーマ「SWELL」は、ブロックエディター完全対応のテーマです！
今回のブロックエディターの使い方についても、このSWELLのブロックエディターでの解説となります。
ブロックエディター（Gutenberg）とは【動画あり】
ブロックエディタ（Gutenberg）とは、2018年のWordPress5.0から採用されている新エディターで、
見出しや文章などをブロックという単位で作成していくものです。
見出しブロックに見出しを入力
文章ブロックに文章を入力！
安西先生・・・！
見出しブロック
- 見出しは「見出しブロック」
- 文章は「文章（段落）ブロック」
- 画像は「画像ブロック」
というように、それぞれの目的ごとにブロックを作成していく形になります。
＼動画での解説はこちら／
ブロックエディター（Gutenberg）の画面構成【動画あり】
では、次にブロックエディターの画面構成について見ていきましょう。
＼動画で見たい方はこちら／
ブロックエディターでは、大きく分けて下記の３つのエリアに分けられます。
- トップツールバー
- 右ツールバー
- メインコンテンツエリア
ひなきら３つのエリアについて、ひとつずつ解説しますね。
「トップツールバー」エリア
トップツールバーは、管理画面に移動したり、ブロックを追加したり、記事の公開をしたりといった基本項目が並ぶエリアです。
- 管理画面へ移動
- ブロックの追加
- 「編集・選択」モード切替
- ひとつ前の状態に戻す
- ひとつ先の状態に進める
- コンテンツの構造や文字数などの確認
- コンテンツのブロックナビゲーション
- 保存した投稿内容を確認
- 下書きを保存
- プレビューを表示
- 記事を公開
- 右ツールバーの表示／非表示
- SWELL設定
- ツールバー、エディターモードなどの設定
ひなきらトップツールバーでよく使うものは、②、④、⑤、⑨、⑩、⑪、⑫あたりですね。
「右ツールバー」エリア
右ツールバーでは、ブロック関連の設定や、
記事投稿前に必ず行うカテゴリー・パーマリンク・アイキャッチ画像設定などを行うエリアです。
投稿タブ
- 公開状態の確認・設定
- パーマリンク（URL）の設定
- カテゴリーの選択
- タグの設定
- アイキャッチ画像の設定
- 要約文の設定
- コメントの許可など
- SWELL専用の設定（目次表示・非表示など）
ひなきら右ツールバーの投稿タブでは、②、③、④、⑤は毎回使いますね～。
ブロックタブ
- 文字のフォントサイズや行の高さを設定
- 文字色、背景色を設定
- 先頭文字を大きく表示
- ボーダー（囲い装飾）の設定
- 様々なスタイル・ボックスの使用
- スマホのみ表示・PCのみ表示の設定
- ブロック下の余白設定
- CSSの指定など
ひなきら僕がブロックタブでよく使うのは、②、④、⑤、⑥あたりですね。
「メインコンテンツ」エリア
タイトル入力や、記事の本文などを入力していくエリアです。
- タイトルを入力するエリア
- 記事本文を作成するエリア（文章、画像、リストなど）
ひなきら文章を入力したり、画像を挿入したり、装飾をしたり、
記事作成する上でのメインとなる場所です。
ブロックエディター（Gutenberg）で記事を公開するまでの５ステップ
では次に、ブロックエディターを使って記事を公開するまでの流れを見ていただきたいと思います。
カラフル娘記事を公開するまでの全体像はこんな感じなんですね。
ひなきらそうですね！順番に解説していきますよ～。
【ステップ１】タイトルを入力
「タイトルを追加」をクリックして、タイトルを入力します。
【ステップ２】メインエリアで本文作成
本文を入力していくエリアです。
色々なブロックを使って記事を作成していきます。
ひなきら「見出し」、「文章」、「画像」、「リスト」などのブロックを使って作成していきます。
ブロックのメニューバーの見方
ブロックメニューについての解説です。
文字を入力すると、 入力した文字の上に下記のような「ブロックメニュー」が出てきます。
- ブロックタイプまたはスタイルを変更
- テキストの配置を変更
- 太字
- イタリック
- リンク
- 続きを読む
- SWELL装飾
- オプション
①ブロックタイプまたはスタイルを変更
ブロックのタイプやスタイルを変更したい場合につかいます。
- 「見出し→段落」
- 「段落→見出し」
- 「段落→リスト」
などのように、 文字列はそのまま使いたいけど、スタイルだけを変えたい場合に使います。
ひなきらSWELLでは、「段落→ふきだし」なども使えて超便利！
②テキストの配置を変更
ここで、入力した文章の配置を変えることが可能です。
通常は「左寄せ」ですが、
このように右寄せにしたり、
このように中央に寄せたり、
といったことができます。
③太字
入力した文字を「太字」に変更できます。
④イタリック
入力した文字を「斜め」に変更できます。
⑤リンク
テキストに「リンク」を貼りたい場合に使います。
⑥続きを読む
テキスト色を変えたり、取消し線を入れたり、といったメニューに表示されていない「その他のこと」ができます。
⑦SWELL装飾
SWELL独自の機能が使えます。
「背景色」、「マーカー線」、「フォントサイズ変更」といったものが簡単に使えて便利です。
⑧オプション
オプションは、主にブロック関連の操作になります。
- ブロックの追加設定を表示
- ブロックのコピー
- ブロックの複製
- ブロックを前に挿入
- ブロックを後に挿入
- ブロックの移動
- ブロック内をHTMLとして編集
- 再利用ブロックに追加
- ブロックのグルーピング
- ブロックの削除
文章の入力（段落ブロック）
次に、文章の入力についての解説です。
文章は「段落ブロック」というブロックに入力していきます。
ひなきら何も入力されていないと、
「文章を入力、または/でブロックを選択」
と表示されるところが段落ブロックですよ。
段落ブロックは改行「Enter」するだけで自動で生成されます。
「Shift+Enter」で同じ段落ブロックのまま改行することもできます。
文字の大きさや色は、「右メニューバー」か、文字上に出てくる「ブロックのメニューバー」からでも変更可能です。
画像の挿入（画像ブロック）
画像を挿入する場合には、「画像ブロック」を使います。
①「＋」ボタンをタップ
②「画像」をタップ
③上記の３つの中からどれかを選択して、画像を挿入します。
④画像が挿入されました。
ブロックメニューで配置を変更したり、右ツールメニューでサイズ変更をしたりもできます。
【ステップ３】投稿設定
タイトル、記事本文の入力が完了したら、「投稿設定」をします。
ひなきらアイキャッチ画像・パーマリンク・カテゴリーなどの設定ですね。
アイキャッチ画像
アイキャッチ画像というのは、記事一覧画面などに表示される画像のことです。
アイキャッチ画像設定
- 右ツールメニューをタップ
- 投稿タブをタップ
- アイキャッチ画像に画像を追加
ひなきらアイキャッチ画像は、記事の「顔」のようなもの。
とても重要ですよ～。
パーマリンク(URL)
パーマリンクは、記事URLの一部を構成するものになります。
デフォルトでは、おかしなパーマリンクになっているので変更推奨です。
パーマリンク設定
- 右ツールメニューをタップ
- 投稿タブをタップ
- パーマリンクの「URLスラッグ」を変更
ひなきら僕の場合は、タイトルを英語変換したものを使うことが多いですね。
記事を公開したあとは、あまりパーマリンクを変えない方が良いので、ここでしっかり設定しておきましょう。
途中でパーマリンクを変えると、記事の評価がリセットされてしまいますので。
カテゴリー設定
記事を分類する「カテゴリー」を選択しましょう。
カテゴリー設定
- 右ツールメニューをタップ
- 投稿タブをタップ
- カテゴリーを選択
ひなきらカテゴリーはSEO対策でも大切なので、必ず設定しておくべきですよ～。
【ステップ４】プレビューで確認
ここまでくれば、ほとんどゴールのようなものですね。
最後に、プレビューでおかしなところがないか確認しましょう。
プレビューの見方
- トップツールバーのプレビューをタップ
- 見た目の崩れがないか、誤字脱字がないか確認
- PCだけでなく、モバイルでも確認
【ステップ５】記事の公開
あとは「公開」をタップして完了です。
以上、ここまでがブロックエディターでの記事作成の流れになります。
ひなきらブロックエディターに慣れてしまえば、簡単ですよ～。
というか、すぐに慣れます。
【ブロックエディター（Gutenberg）】基本の操作方法
画面構成や記事作成の流れなど、おおまかに理解したところで、次はブロックエディターの基本操作について解説していきます。
解説する内容は以下の通り。
- ブロックの追加
- ブロックの移動
- ブロックの削除
- ブロックのコピー
- ブロックのグループ化
- ブロックの再利用
【基本操作①】ブロックの追加
ブロック追加の方法は下記のとおりです。
①上記青枠の「＋」をタップ。
②目的のブロックを選んでタップする。
③選んだブロックがメインコンテンツエリアに追加される。
といった流れで、ブロックを追加していくことになります。
ひなきらちなみに、画像で表示されているのは一部のみです。
SWELLでは80以上のブロックがありますよ。
【基本操作②】ブロックの移動
上記のように、上下ボタンをタップするだけで、ブロックごとの移動が簡単にできます。
ひなきらブロック移動はめちゃくちゃ重宝しますよ～！
【基本操作③】ブロックの削除
上記のように、「ブロック削除」をタップするとブロックが削除されます。
ひなきら間違えて削除しちゃったときは、
下記の「元に戻す」をタップすれば大丈夫ですよ～。
【基本操作④】ブロックのコピー
上記のように「コピー」をタップすると、ブロックがコピーされます。
コピーしたブロックを貼り付けるには、PCなら右クリックで貼り付けをクリック、スマホなら長押しなどで貼り付けをタップしましょう。
ひなきら貼り付けは、ブログ以外でも使うコピペの時とやり方は同じですね。
【基本操作⑤】ブロックのグループ化
①グルーピングしたいブロックの範囲を選択。
②「グループ化」をタップ。
③グループ化が完了。
これで、グルーピングは完了です。
グループごと移動したい場合のやり方
では、下記のようにグループ化したものを「下に移動」するとどうなるかを見てみましょう。
①段落ブロックと画像ブロックをグループ化
②移動ボタンをタップ。
③グループ化したブロックが下に移動して、下の段落ブロックは上にスライドしました。
といったように、ブロックをまとめて移動する場合に便利です。
ひなきら他にも、ブロックをまとめてボックス装飾したりする場合にも便利ですよ～。
【基本操作⑥】ブロックの再利用
ブロックの再利用というのは、何度も同じブロックを使いまわしたい場合に使います。
たとえば、複数の記事で同じ文章や内部リンクを使いたいときなどに便利ですね。
ひなきらいってみれば、定型文のようなものですね～。
再利用ブロックの登録方法
①再利用したいブロックの範囲を選択。
②「再利用ブロックに追加」をタップ。
これで、再利用ブロックに登録されました。
上記のように「ブロック一覧」の「再利用可能」タブに再利用ブロックとして追加されています。
ひなきらあとは、他の記事などで同じブロックを使いたい時に、この再利用ブロックをタップするだけで呼び出せますよ～。
よく使うブロックランキング（トップ５）
では、僕がよく使うブロックをランキング形式で紹介したいと思います。
ひなきら僕がよく使うなら、みなさんもよく使うことになると思いますので。
第５位：カラムブロック
第５位は、カラムブロックです。
上記の場合は、左右２つのカラムに分けています。
ひなきら３つにしたり、４つにしたりもできますよ～。
カラムブロックの呼び出し
カラムブロックを呼び出すには、ブロック一覧の「カラム」をタップすればオッケーです。
第４位：リストブロック
第４位は「リストブロック」です。
ひなきらリスト、めちゃくちゃ重宝してます～！
リストブロックの呼び出し
リストブロックを呼び出すには、ブロック一覧の「リスト」をタップでオッケーです。
第３位：画像ブロック
第３位は、画像ブロックです！
ひなきら画像ブロックを使わない記事はないですから、重要ですね！
画像ブロックの呼び出し
画像ブロックを呼び出すには、ブロック一覧の「画像」をタップすればオッケーです。
第２位：見出しブロック
第２位は、見出しブロックです！
見出し、絶対に使いますからね（笑）
見出しブロックの呼び出し
画像ブロックを呼び出すには、ブロック一覧の「見出し」をタップすればオッケーです。
ひなきらもしくは、段落ブロックにテキスト入力をしてから、ブロックタイプを「見出し」に変更するかですね。
第１位：段落ブロック
栄えある第１位は、なんと・・・
「段落ブロック」です！！！
ひなきらんお！？いや、そりゃそうですよね。
段落使わずに記事書けませんから！
段落ブロックの呼び出し
画像ブロックを呼び出すには、ブロック一覧の「段落」をタップするか、
記事エリアで「改行」するだけで段落ブロックが生成されます。
SWELL専用ブロックランキング(トップ５)
＼便利なSWELLブロック／
当サイトも使用しているテーマ「SWELL」は、ブロックエディターに完全対応した、
ブロックエディターのためのテーマといえます。
ひなきらSWELLブロックエディターの使い心地は、最高です！
そして、SWELLならではのブロックもあって、これがまた使いやすくて素晴らしいんです。
ブロックエディターを使うならSWELL！
ということで、SWELLの素晴らしいブロックについても「ランキング形式で」ご紹介していきます！
【SWELL】第５位：ステップブロック
SWELLブロック第５位は、ステップブロックです！
手順の説明などの時に重宝します。
ブロックエディター記事公開までの流れ
タイトル入力欄にタイトルを入力する。
メインコンテンツエリアで、記事本文を入力していく。
パーマリンク、アイキャッチ画像などの設定をする。
プレビューで変なところがないか確認する。
記事を全世界に羽ばたかせる。
といった感じですね。
【SWELL】第４位：SWELLボタンブロック
SWELLブロック第４位は、SWELLボタンブロック！
といったように、他のページにリンクしたい時や、アフィリンクを貼るにも便利です。
ひなきらおしゃれなボタンで押したくなっちゃいますね！
その数なんと60種類！
【SWELL】第３位：関連記事ブロック
SWELLブロック第３位は、関連記事ブロックです！
簡単に下記のようなブログカードを呼び出せます。
【SWELL】第２位：キャプション付きブロック
SWELLブロック第２位は、キャプション付きブロックです！
ひなきら下記のようなものですね。おしゃれ～！
SWELLのキャプション付きブロック
おしゃれで使いやすい！
SWELLのキャプション付きブロック
おしゃれで使いやすい！
SWELLのキャプション付きブロック
おしゃれで使いやすい！
【SWELL】第１位：ふきだしブロック
さあ、やってまいりました！
SWELLブロック第１位は、ふきだしブロックです！
ひなきらめっっっちゃくちゃ！使いやすいですよ！
サンジSWELLのふきだしブロック最高だぜ～！
ひなきらあ、サンジさん！目が飛び出てます！
ろびんふふ、いつものことね（笑）
めっちゃ使いやすい「ふきだしブロック」利用の流れ
- ふきだしセットに画像などを登録
- ふきだしブロックから選ぶ
まずは、このように画像を「ふきだし」として登録しておきます。
あとは、記事作成のときに、登録してあったふきだしを選ぶだけです。
ひなきら登録したふきだしセットから選ぶだけで、
このように簡単にふきだしを作れます。
カラフル娘わ～お、簡単すぎますね～。
といったように、めちゃくちゃ簡単にふきだしを使えるのがSWELLの「ふきだしブロック」の最大の良さです！
SWELLのおかげで、ふきだし大好きマンになってしまいましたよ（笑）
SWELLのブロックエディター（Gutenberg）は最高に使いやすい！
当サイトでも使用しているWordpressテーマ「SWELL」は、ブロックエディターに完全対応しています。
しかも、ただ対応するだけではなく、抜群の使いやすさと機能を備えています！
ひなきら控えめに言って、SWELLは最高です！
もし、これからブロックエディターを使おうかな？
と思っている方は、まず第一候補に「SWELL」を入れることを強くオススメしますよ！
実際に僕もSWELLにして本当に良かったーーーーー！！！って思っていますので。
まとめ｜SWELLブロックエディター（Gutenberg）の使い方
いかがでしたでしょうか。
SWELLのブロックエディターについて、理解を深めていただけていたら嬉しい限りです。
ぶろっ子ブロックエディターのことが良く分からなかったけど、分かるようになったよ～！
なんて思ってもらえたら、大泣きして喜んじゃいますね！
それに長めの記事だったので、ここまで読んでくれたなんて感謝感激雨あられです。
ほんと、ありがとうございます！
またお待ちしてますので、いつでも来てくださいね～！
関連記事：高評価！WordPressテーマ【SWELL】評判・メリットデメリット完全紹介！
まだブログを始めていない方、まずはブログを作りましょう！
行動なくして成果なし！
【スマホでWordpressを作りたい方】
➡スマホでWordPressを始める方法！全ての手順を丁寧に解説！
【PCでWordpressを作りたい方】
コメント