WordPressブロックエディターの使い方！クラシックは卒業すべき

「新しいブロックエディターがまだ使えない。難しい。クラシックよりいいことあんの？」

そんな方に向けて、ブロックエディター（Gutenberg）の使い方を徹底的に解説します。

ブロックエディターは使いにくいという声もよく聞きますが、慣れればメリットが大きいエディターです。

クラシックエディターは卒業して、ブロックエディターに移行しましょう。

WordPressブロックエディターを導入したほうがいい理由

WordPressブロックエディターを導入したほうがいい理由はクラシックエディターより早く入力できるからです。

• マウスの移動範囲が小さくなる
• 表や画像などを簡単に移動できる
• カラム作成も簡単
• 画像挿入がドラッグ＆ドロップでできる

最初の使いにくさがデメリットではありますが、ブロックエディターによっていろんなことができるようになりました。

それでは、ここからはブロックエディターの使い方を紹介していきます。

WordPressブロックエディターの使い方〜基本編〜

まずはブロックエディターの使い方基本編を紹介します。

タイトル入力

タイトルはエディターの一番上の「タイトルを追加」部分に入力します。

【タイトル入力】

ここに入力していくだけで完了です。

基本操作

文字入力はエディターに文字をそのまま入力していけばOK。

なので、文字入力に関しては迷うことがないと思うんですが、問題はそのほかの基本操作です。

• 見出しをつける
• リスト（箇条書き）にする
• 画像を挿入する
• 表の挿入
• 空白を作る

などの基本操作は以下のような操作手順で挿入可能です。

【ブロックエディターの基本的な使い方】

丸に囲まれた「＋」のボタンから編集していきます。（超重要な基本作業）

よく使うものが優先的に表示されるので、使えば使うほど簡単に使いやすくなるのがブロックエディターの特徴です。

見出しの付け方

【見出しの付け方】

リストの作り方

【リストの作り方】

改行で箇条書きの数を増やすことができます。

画像の挿入

【画像の挿入方法】

【ドラッグ＆ドロップによる画像挿入（おすすめ）】

表の作成

【表の作成手順】

空白（スペース）の入力

【空白（スペース）の入力】

引用

【引用の方法】

ブロックの削除

画像や表などを作った後に削除したい場合は「ブロックの削除」で削除できます。

【ブロックの削除方法】

WordPressブロックエディターの使い方〜応用編〜

ここからはWordPressブロックエディターの使い方応用編です。

応用編の内容は下記です。

• 再利用ブロックの追加
• ブロックの移動
• 1ブロックだけクラシックエディターにする
• カラム
• ボタン
• YouTube埋め込み
• Twitter埋め込み

応用編と言っても、そこまで難しくはないので、順番に見ていきましょう！

再利用ブロックの追加

再利用ブロックの追加は便利な機能で、いろんな記事に挿入したい表などを保存しておくことができます。

【再利用ブロックの追加方法】

【再利用ブロックの表示方法】

同じ表をいろんな記事で使いたい場合などに便利な機能です。

1回1回表を作らなくても、再利用ブロックから呼び起こすことができます。

ブロックの移動

表を1行上に上げたり、下に下げたい時に使えるのが「ブロックの移動」です。

このようにブロック（今回の場合は表）を移動することができます。

移動方法は

【ブロックの移動方法】

かなりシンプルなので、簡単です。

1ブロックだけクラシックエディターにする

クラシックエディターを1つのブロックだけ使うことも可能です。

【1ブロックをクラシックエディターにする方法】

カラム

カラムは以下のようなものです。

横に2つ並んでいるものを「2カラム」、3つ並んでいるものを「3カラム」と言います。

新エディターでは2カラムを簡単に作成することができ、その操作方法は↓↓

【カラム作成方法】

この後は片方ずつ入力していくだけで完成です。

ボタン

ボタン型のリンクも作成することができます。

【ボタンリンクの作成方法】

簡単に作れますし、テキスト色や背景色も簡単に変えることができます。

いろいろデザインしてみてくださいね！

YouTube貼り付け

YouTube動画の貼り付けはURLを貼り付けるだけです。

【YouTubeの貼り付け】

Twitter埋め込み

【Twitter埋め込み方法】

まず埋め込みたいツイートを表示します。

【貼り付けた後の表示はこちら↓↓】

WordPressブログ開設でやらなくてよくなったこと

✅SSL化（自動で行われる）
✅WordPressインストール（自動）
✅ドメインの取得（ドメイン名を入力するのみ）

エックスサーバークイックスタートなら、勝手にやってくれます。#ブログ初心者 #副業 #副収入 https://t.co/H00G8NWDwv

— 竹内ゴロー（タケ）@ブログ×投資で在宅収入生活 (@takeuchigoro) May 12, 2020

Twitter貼り付けもできます。

Instagram（インスタグラム）の埋め込み

Instagramの埋め込み方法は以下のとおりです。

投稿の右上にあるボタンから埋め込みを行います（下記画像右上の赤枠）

コードをブロックエディター「カスタムHTML」で貼り付けます。

この投稿をInstagramで見る

ブログの軸ブレブレに注意！ 記事を書く前の大前提を押さえよう！！ #ブログ初心者 #ブログはプロフィールから #ブログはじめました #ブログも見てね #副業教えて #副業生活 #副業紹介して下さい #副業仲間 #副収入で貯金 #副収入構築 #副収入で稼ぐ #在宅収入 #在宅収入源の大事さ #在宅収入源の重要性 #在宅ワーク初心者 #在宅ワーク募集 #お金を整える #お金ほしい #お金を貯める #お金の教育 #お金の教養

たけ（竹内ゴロー）@ブログ初心者を伸ばす人(@takeuchi_goro)がシェアした投稿 – 2020年 7月月28日午前5時37分PDT

WordPressブロックエディターの使い方〜記事公開前の設定編〜

記事公開前に設定する箇所も押さえておきましょう。

設定する場所さえ押さえておけば、そこまで難しくはないですし、短時間で終わります。

• パーマリンク設定
• カテゴリー設定
• アイキャッチ画像設定
• ディスクリプション
• 公開状態と公開時間設定

これらを順番に設定していきます。

パーマリンク・カテゴリー・アイキャッチ画像の設定

この3つはサクッと設定できます。

【各種設定方法】

公開前に必ず確認するようにしましょう！

ディスクリプション（説明）

【ディスクリプションの入力】

記事編集画面の下に入力する箇所があるので、忘れず入力するようにしましょう。

公開状態と公開時間設定

【公開状態と公開時間の設定手順】

非公開設定やパスワード保護にすることも可能です。

まとめ：WordPressブロックエディターの使い方は他にもあるけど、これで十分です！

今回はWordPressブロックエディターの使い方をまとめました。

最初は慣れないかもしれませんが、慣れると早く記事作成できるので、できるだけ早くブロックエディターに移行しましょう！

※ Webインカム構築ゼミは終了し、新しく生まれ変わりました。