「新しいブロックエディターがまだ使えない。難しい。クラシックよりいいことあんの?」
そんな方に向けて、ブロックエディター(Gutenberg)の使い方を徹底的に解説します。
ブロックエディターは使いにくいという声もよく聞きますが、慣れればメリットが大きいエディターです。
クラシックエディターは卒業して、ブロックエディターに移行しましょう。
【運営者タケTwitter(@takeuchigoro)のプロフィール】
![タケのプロフィール](https://takeincomenet.com/wp-content/uploads/2022/06/7966bae78213db11914ad7af893f8431.jpg)
ブログ収益月7桁達成(2023年10月)
月6桁ブロガーを多数輩出した少人数コミュニティ「収入加速プロジェクト」運営
現在フリーランス。
収益ゼロから月100万までの道のりを公開中
ブログ相談実績
タケさん(@takeuchigoro)のブログ相談に申し込みました!
— タケB@ホビー系ブロガー (@tktk_libe_blog) November 16, 2023
貴重なお時間いただき、ありがとうございました!
相談での気づき
・PDCAや訴求の深掘りの不足
・具体的なアドバイスにより次の行動が明確化
方向性や伸びしろで悩んでいるブロガーさんは
是非とも相談に乗ってもらうことをオススメします!
月7桁稼ぐブロガーのタケさん(@takeuchigoro)にZOOM相談をお願いしました!
— ふじ (@suminepapa) November 16, 2023
【相談して変わった事】
・ブログ再開への意欲が沸いた。
・不要なプラグインを削除できた。
・有料ツールの導入手順を教えてもらえた。
とても優しく教えて下さいます!
タケさん(@takeuchigoro)へ相談して良かったです☺️
久しぶりの投稿😊
— くまはち🔥ブログで6桁発生 (@141_kmhc) November 27, 2023
先週はたけさんにzoomコンサルしてもらい、連日で収益発生✨
わずか30分でしたが、考え方も含めてたくさん勉強させてもらいました🙏
A8の成果発生した画面はいつ見ても嬉しいですね☺️
これからもこつこつ頑張ります😊🙏@takeuchigoro pic.twitter.com/KbG9bNeDit
ブログ収益実績(クリックで開きます)
【月200万円達成(2024年3月)】
![](https://takeincomenet.com/wp-content/uploads/2024/04/2024-03-income.png)
【月7桁達成(2023年9月)】
月100万円を突破し、フリーランスとしての新しいステージを模索中です。
![ブログ収入月7桁達成2023年9月](https://takeincomenet.com/wp-content/uploads/2023/09/blogincome-2023-september.png)
2023年10月途中までの実績も好調です
![felmat収益画面2023年10月途中まで](https://takeincomenet.com/wp-content/uploads/2023/10/blogincome-felmat-202309.png)
公式LINEで行った「月100万円までの道のりセミナー」動画
WordPressブロックエディターを導入したほうがいい理由
WordPressブロックエディターを導入したほうがいい理由はクラシックエディターより早く入力できるからです。
- マウスの移動範囲が小さくなる
- 表や画像などを簡単に移動できる
- カラム作成も簡単
- 画像挿入がドラッグ&ドロップでできる
最初の使いにくさがデメリットではありますが、ブロックエディターによっていろんなことができるようになりました。
それでは、ここからはブロックエディターの使い方を紹介していきます。
WordPressブロックエディターの使い方〜基本編〜
まずはブロックエディターの使い方基本編を紹介します。
タイトル入力
タイトルはエディターの一番上の「タイトルを追加」部分に入力します。
【タイトル入力】
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/8274c7048902365a5ee4794de1af4654-1024x388.png)
ここに入力していくだけで完了です。
基本操作
文字入力はエディターに文字をそのまま入力していけばOK。
なので、文字入力に関しては迷うことがないと思うんですが、問題はそのほかの基本操作です。
- 見出しをつける
- リスト(箇条書き)にする
- 画像を挿入する
- 表の挿入
- 空白を作る
などの基本操作は以下のような操作手順で挿入可能です。
【ブロックエディターの基本的な使い方】
![](https://takeincomenet.com/wp-content/uploads/2020/05/e329ea8010118812b4b8c941c4e91cd9-1-1024x324.png)
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/5933fa47800e73b76904ea6af3c740f1-1-1024x943.png)
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/cd57c084376b8e53d5ab6dcf0dd7818d-2-1024x1011.png)
丸に囲まれた「+」のボタンから編集していきます。(超重要な基本作業)
よく使うものが優先的に表示されるので、使えば使うほど簡単に使いやすくなるのがブロックエディターの特徴です。
見出しの付け方
【見出しの付け方】
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/8b254b5673b3be60d0275463a2a02504.png)
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/01d6b3522bc2c79195b929e9b9d13cb4-1024x409.png)
リストの作り方
【リストの作り方】
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/99a9586674cb2385f3c3424daf8bac17.png)
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/1395f71ebf699d536f0469b270838c47-1024x188.png)
改行で箇条書きの数を増やすことができます。
画像の挿入
【画像の挿入方法】
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/b1d4e56cb27ce8c0d06db0e53a5bfa9b.png)
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/ad16bf6337935778348fe62e3be8147a-1024x466.png)
【ドラッグ&ドロップによる画像挿入(おすすめ)】
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/eb7da06cac65a03529d0d522b80ca395-1-1024x519.png)
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/174ba92bb081a8d3888676d9592ffa4c-1-1024x577.png)
表の作成
【表の作成手順】
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/5810ec8cfc22006b9799753b96fee9f0.png)
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/c91e5f9f1d22310cb41c999391e21e65-1024x462.png)
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/d3ca1a010d1aef1403ba00cac5a74357-1024x317.png)
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/1803fdf5414d0e5cfa0d184bcf8c5c18-1024x744.png)
空白(スペース)の入力
【空白(スペース)の入力】
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/49921cf3825e49054bdcfa2fe12ff25c.png)
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/78faeccdf35b40ebc341761b6fc4b3c5-1-1024x188.png)
引用
【引用の方法】
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/249bf7563f389e9932179d13b66b5025.png)
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/3a61a468697fecabcc8429b8c69adb31-1024x251.png)
ブロックの削除
画像や表などを作った後に削除したい場合は「ブロックの削除」で削除できます。
【ブロックの削除方法】
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/47f3543afefe858a56a7e133f7702be0-1024x623.png)
WordPressブロックエディターの使い方〜応用編〜
ここからはWordPressブロックエディターの使い方応用編です。
応用編の内容は下記です。
- 再利用ブロックの追加
- ブロックの移動
- 1ブロックだけクラシックエディターにする
- カラム
- ボタン
- YouTube埋め込み
- Twitter埋め込み
応用編と言っても、そこまで難しくはないので、順番に見ていきましょう!
再利用ブロックの追加
再利用ブロックの追加は便利な機能で、いろんな記事に挿入したい表などを保存しておくことができます。
【再利用ブロックの追加方法】
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/e2bbcb744831f80cece0961ee5656690-1024x310.png)
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/c4d0027a229939042ec5e27787d13b4f-1024x424.png)
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/034e742c4ea2f75ce608622b632e5ff8-1024x339.png)
【再利用ブロックの表示方法】
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/f93bdebc2ba1dead9b96bf06c363575f.png)
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/97fb5bf3f5acb4810f6ec8273e8731af.png)
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/ba8fbb5f4eca4e3569c2d005cfe92663-1024x591.png)
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/3e5fb521df237697efd3d0e6a6fb2a44-1024x295.png)
同じ表をいろんな記事で使いたい場合などに便利な機能です。
1回1回表を作らなくても、再利用ブロックから呼び起こすことができます。
ブロックの移動
表を1行上に上げたり、下に下げたい時に使えるのが「ブロックの移動」です。
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/2c3ffffdf218dc68c17941916ef86cda-1024x656.png)
このようにブロック(今回の場合は表)を移動することができます。
移動方法は
【ブロックの移動方法】
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/50c28cd4157ebcc854c82a734338000f-1024x297.png)
かなりシンプルなので、簡単です。
1ブロックだけクラシックエディターにする
クラシックエディターを1つのブロックだけ使うことも可能です。
【1ブロックをクラシックエディターにする方法】
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/d340a84cecead74e9bfc972f2b33e706.png)
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/5d7097dd428dae5b18b0742f5967f431-1024x319.png)
カラム
カラムは以下のようなものです。
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/04ac9d5674a3964c2321cdc389a43515-1024x189.png)
横に2つ並んでいるものを「2カラム」、3つ並んでいるものを「3カラム」と言います。
新エディターでは2カラムを簡単に作成することができ、その操作方法は↓↓
【カラム作成方法】
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/2d336d709f1e9fe4ca5dd32fb2766be6.png)
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/e7629d416787d90151cbfc1f4450bf7c-1024x414.png)
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/187ba41aa04121a5b0ccab87e3615c84-1024x163.png)
この後は片方ずつ入力していくだけで完成です。
ボタン
ボタン型のリンクも作成することができます。
【ボタンリンクの作成方法】
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/1ad1f24a3380c527ab93d30650b7d22b.png)
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/bfa8eca2311e1b3df119e7af1c053bb9-1.png)
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/f26a37b0fc0136294ba09264a57c5321-1.png)
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/d3283147e6a6645f33078539fb9de83b-1-1024x515.png)
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/c238a3e51209f84ed200c843d3e1c238-494x1024.png)
簡単に作れますし、テキスト色や背景色も簡単に変えることができます。
いろいろデザインしてみてくださいね!
YouTube貼り付け
YouTube動画の貼り付けはURLを貼り付けるだけです。
【YouTubeの貼り付け】
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/08f69fd7751992b74b973637020d3641-1024x425.png)
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/0d950671af3359be9607f88f8bc9c3e1-1-1024x892.png)
Twitter埋め込み
【Twitter埋め込み方法】
まず埋め込みたいツイートを表示します。
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/13a90c6eb297559fc55ba00174231ea5-1-1024x717.png)
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/297fd0b9c84d207c78ecd271d5472e60-1024x719.png)
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/f93e440079f2380cb4a4ef7dd694320d-1-948x1024.png)
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/82136b8bf8a3b590425fb1ec992add06.png)
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/10821c02751e406102558313d3d93ed7-1024x569.png)
【貼り付けた後の表示はこちら↓↓】
WordPressブログ開設でやらなくてよくなったこと
— 竹内ゴロー(タケ)@ブログ×投資で在宅収入生活 (@takeuchigoro) May 12, 2020
✅SSL化(自動で行われる)
✅WordPressインストール(自動)
✅ドメインの取得(ドメイン名を入力するのみ)
エックスサーバークイックスタートなら、勝手にやってくれます。#ブログ初心者 #副業 #副収入 https://t.co/H00G8NWDwv
Twitter貼り付けもできます。
Instagram(インスタグラム)の埋め込み
Instagramの埋め込み方法は以下のとおりです。
投稿の右上にあるボタンから埋め込みを行います(下記画像右上の赤枠)
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/08/918762b5db41ffb0add2572066a9a8a1-1.jpg)
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/08/acda4859f9743a93698d40b92226bacd-1.jpg)
コードをブロックエディター「カスタムHTML」で貼り付けます。
WordPressブロックエディターの使い方〜記事公開前の設定編〜
記事公開前に設定する箇所も押さえておきましょう。
設定する場所さえ押さえておけば、そこまで難しくはないですし、短時間で終わります。
- パーマリンク設定
- カテゴリー設定
- アイキャッチ画像設定
- ディスクリプション
- 公開状態と公開時間設定
これらを順番に設定していきます。
パーマリンク・カテゴリー・アイキャッチ画像の設定
この3つはサクッと設定できます。
【各種設定方法】
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/51b397f2511d7b03fa26b8cb77c60cdd-2-1024x615.png)
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/de088f7ca6d09ff53ad8e2c5fbead57b-1-1024x270.png)
公開前に必ず確認するようにしましょう!
ディスクリプション(説明)
【ディスクリプションの入力】
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/40c64f9212619944fd3578389a93c167-1024x339.png)
記事編集画面の下に入力する箇所があるので、忘れず入力するようにしましょう。
公開状態と公開時間設定
【公開状態と公開時間の設定手順】
![WordPress操作](https://takeincomenet.com/wp-content/uploads/2020/05/25a15fe19d2f3c50be17a5361c428a8e-1024x188.png)
非公開設定やパスワード保護にすることも可能です。
まとめ:WordPressブロックエディターの使い方は他にもあるけど、これで十分です!
今回はWordPressブロックエディターの使い方をまとめました。
最初は慣れないかもしれませんが、慣れると早く記事作成できるので、できるだけ早くブロックエディターに移行しましょう!
「WEBインカム構築ゼミ」は、初心者ブロガーさんをサポートしています。
「WordPressをあっという間に開設」「キーワード選定のやり方」「ZOOMでの相談」の個別サポート。
ブログで一番大事なのは時間です。
迷いに迷って、前に進まないのは本当にもったいない!
どんどん覚えて、ブログを前に進めていきましょう。
\無料の1時間おためし相談実施中/