【ワードプレスはじめて使う人向け】最新ブロックエディタの使い方!

こんにちは!

養育費を払うために現場作業しながら月間最高16万PVのブログを運営してる、さはら(@sahara_momo)です。

ワードプレスはじめてみたものの、『ブロックエディタの使い方が・・・?』

はじめは何をどうしていいか分からへんよね。

でも基本さえ分かったら、誰でも簡単に使えるようになるねん。

画像を36枚も使って分かりやすく解説していくし、初心者の方でも大丈夫!

この記事を最後まで読めば、あなたもブロックエディタの基本的な使い方がマスターできるよ。

そしてあなたのブロガー人生をはじめよう!

スポンサーリンク

ブログを書く時のブロックエディタの基本的な使い方

ここでは記事を書く時の順序に沿って、ブロックエディタ(グーテンベルグ)の基本的な使い方を、わかりやすく5つに分けて紹介していくね!

5つの手順!
1.ブログのタイトルブロックの使い方
2.通常ブロックの使い方(ブロック=段落)

3.見出しプロックの使い方
4.投稿画面上(ツールバー)の使い方
5.下書き保存、プレビュー、公開、更新のやり方

1.ブログのタイトルブロックの使い方

ブログのタイトルブロックの使い方
タイトルブロックの使い方

ワードプレスにログインしたら、画面左のメニューの中から『 投稿 > 新規追加 』をクリック。

すると上の画像のように、記事を書く画面に移動するよ!

タイトル文は『ここにタイトルを入力』と表示されてる部分に文字を入力するだけで大丈夫やで!

ブログのタイトルブロックの使い方
タイトルブロックの使い方
さはら
『32文字以内推奨』っていう意味は、タイトルが検索したときの画面に32文字以上やと『…』って略されてしまうからやねん。
ブログのタイトルブロックの使い方
検索結果

2.通常ブロックの使い方(ブロック=段落)

通常ブロックの使い方(ブロック=段落)
通常ブロックの使い方
さはら
文字入力を始めるには
1.タイトルブロックから『エンターキー』を押す
2.上の『文章を入力、または~』をクリックする
でカーソルが移動して入力できるようになるよ!

ブロック内で改行するときは『shift+Enter』を押せば大丈夫やで!

通常ブロックの使い方(ブロック=段落)
ブロック内改行

ちなみに、『エンターキー』を押した分だけブロックができるし、下書きの段階で下の文章と離したい時に使ったりするよ。

通常ブロックの使い方(ブロック=段落)
通常ブロックの使い方

画像を入れる時は『一般ブロック』の中にある『画像』をクリック。

通常ブロックの使い方(ブロック=段落)
ブロックメニュー

クリックしたら下の画像になるし、『アップロード』をクリック。

通常ブロックの使い方(ブロック=段落)
画像のアップロード

使いたい画像を選択して『開く』をクリック、もしくは画像をダブルクリックしてね。

通常ブロックの使い方(ブロック=段落)
画像のアップロード

3.見出しブロックの使い方

記事には本で言うところの『目次』にあたるのが『見出し』になるねん。

見出しブロックの使い方
見出しブロックの使い方

『見出し』を入れるには投稿画面にある『』ボタンをクリックするねん。

メニューが表示されたら、『見出し』をクリックしらたOKやで!

見出しブロックの使い方
見出しタグの使い方

見出しタグの種類を変更したいときは、『ブロック上のメニュー』か『右カラムにある見出しレベル』から変更できるよ!

見出しブロックの使い方
見出しタグの使い方

4.投稿画面上(ツールバー)の使い方

投稿画面上(ツールバー)の使い方
ツールバーの使い方

投稿画面上とブロックの上にある『ツールバー』を左から順に解説するよ!

『+』グロックを挿入する
左矢印ひとつ前の工程に戻る
右矢印戻す前の工程に戻す
『i』ブログの段落内容、文字数などの情報
『三』ブロックのナビ。特には必要ない。
『✐』編集。特に使わない
投稿画面上のツールバー
『q』段落の変更
『≡』文字の配置決め
『B』選択した文字を『太字』にする
I選択した文字を『斜め文字 』にする
『🔗』選択した文字に『URL(リンク)』を入れる
『▼』インライン画像。特に使わない
『メニュー』主に『ブロックの削除』に使う
ブロック上のツールバー

普段使う分にはあまり使わへん機能もあるし、何となく知っといたらええで( ^ω^ )

投稿画面上(ツールバー)の使い方
ツールバーの使い方

ブロックの左にある『Ⅴ』をクリックしたら、ブロックを移動させられるよ。

ちなみに、複数のブロックを選択して『まとめて移動』することもできるよ!

5.下書き保存、プレビュー、公開、更新のやり方

下書き保存、プレビュー、公開、更新のやり方
保存と公開
ちびもも
ここでは記事の保存や公開に関することを行うよ!
下書き保存記事を今の状態で下書き保存する
プレビュー今現在の記事を実際の画面で確認する
公開する記事をインターネット上に公開する
更新公開後『公開する』→『更新』変わる。
記事を編集したら『更新』を押す。
保存と公開
さはら
間違えて書いてる途中の記事を公開しても、『非公開』にしたら誰にも見られんよ!
下書き保存、プレビュー、公開、更新のやり方
保存と公開

ブロックメニューの解説と使い方

ブロックメニューの解説と使い方
ブロックメニュー

入れてるテーマによって多少の違いはあるけど、ブロックを追加する時に出てくるメニューは『8つ』あるよ。

全部細かく説明するよりも、『最低限知っとけば大丈夫!』っていうのを紹介するね。

上から順番に解説していくよ。

よく使うもの

よく使うもの
ブロックメニュー

よく使うものは、その名の通り使ったブロックの『履歴』ですね。

よく使うブロックが集まってくるし、後になればここだけでこと足りるようになるよ。

履歴やし仕方ないねんけど、配置が変わるのがちょっと難点かな。。

一般ブロック

一般ブロック
一般ブロック

『一般ブロック』の中でよく使うのが

  • 段落
  • 見出し
  • 画像
  • クラシック版の段落
  • リスト
  • 引用

以上の6つになるよ。

『リスト』はこの上にある箇条書きの部分ね。

リストブロック内では、『Enter』を押すだけで同じブロック内で改行されて『・』まで付くよ!

一般ブロック
リストブロックの使い方

また『引用』ブロックの使い方は、『引用』をクリックして普通の段落のように、引用する文章を書きこむよ。

一般ブロック
引用ブロックの使い方

『クラシック版の段落』は、2018年12月以前のワードプレスの仕様やねん。

一般ブロック
さはら
ワードで文章書いてるのに近い感じやで!

フォーマット

フォーマット
フォーマットブロック

『フォーマット』ブロックでよく使うのは、

・クラシック
・カスタムHTML
・表

この3つが多いね。

クラシックは先にあった『クラシック版の段落』と同じやん。

テーマかプラグインの関係で2つになってると思われるけど、問題ないし放置してる(笑)

カスタムHTML』ブロックは、ASP(Affiliate Service Provider)に登録して広告をブログに貼るときに必要になるよ。

さはら
ASPでアフィリエイトする広告は『HTML』で書かれてるねん。

そやし、普通に記事書くモード(ビジュアルエディタ)では、ちゃんと表示されへんねん。

そこで『カスタムHTML』ブロックにコードを入れてやればOKやねん!
フォーマット
カスタムHTMLの使い方

プレビューをクリックしたら、実際にどんな感に表示されるか確認できるよ。

フォーマット
カスタムHTMLの使い方

レイアウト要素

レイアウト要素
レイアウト要素の使い方

『レイアウト要素』ブロックでよく使うのが

・スペーサー
・ボタン

この2つですね。

スペーサー』はブロックとブロックの間に空欄のブロックを入れて隙間を開ける。っといったイメージ。

レイアウト要素
スペーサーの使い方

話の展開が変わるとき、なんかに使うのが効果的やで。

よく失敗するのが、下の画像のように『Enter』を押してスペースを空けてしまうことやねん。

でも、Enterで作った改行は公開したら詰められてるからアカンで!

レイアウト要素
3行あけたことにはならない

ボタン』はリンクを貼りつけて、広告ページとか他のページに誘導するためのもんやで!

レイアウト要素
ボタンブロックの使い方
さはら
こんな感じでブログ内のURLを入力したら、その記事に飛んでくれるで!
ちびもも
ワードプレスのテーマに『Diver』を使ってたら、入力補助にもっとえぇ感じのボタンがあるで!

埋め込み

埋め込み
埋め込みブロックの使い方

『埋め込み』ブロックはブログ内に、SNS、映像、音声などを貼り付けることやねん。

『YouTube』を例にあげると『埋め込み > YouTube』をクリック。

埋め込み
埋め込みブロックの使い方

画面が変わったら四角の中にブログに貼り付けたいURLを入力して『埋め込み』をクリックしたら完了やで!

埋め込み
埋め込みブロックの使い方

入力補助(Diver専用機能)

入力補助(Diver専用機能)
入力補助の使い方

Diverの良いところは何といってもこの『入力補助』が便利ってことやねんな。

この中でも特によく使うのが

囲い枠
・会話
・囲い枠

この2つはホンマによく使うし、『AddQuicktag』にタグに登録して、サクサク使えるようにした方がええで!

>吹き出し会話を簡単に表示させるやり方

>囲い枠を簡単に表示させるやり方

番外:ブロックの上のツールバーが邪魔

ブロックの上のツールバーが邪魔
ツールバーの使い方

グロック上部に出てくるツールバーがイチイチ邪魔で、『上の文章がよく見えない!』

そんな時は画面右上にある『メニュー』ボタンを押して『トップツールバー』をクリックしらOK!

投稿画面上にまとめて表示されるようになるよ

ブロックの上のツールバーが邪魔
ツールバーの移動のやり方

【ワードプレスはじめて使う人向け】最新ブロックエディタの使い方!:まとめ

最後まで読んでいただいてありがとさんやで!

今回は【ワードプレスはじめて使う人向け】最新ブロックエディタの使い方!についてご紹介しました。

ややこしいかも知れんけど、はじめてワードプレスを使う人はブロック(グーテンベルグ)エディタに慣れておいた方がええで!

さはら
クラシックエディタは感覚的に使いやすいかもしれんけど、2022年までしかサポートがないっていう不安要素があるねんな。
ちびもも
慣れたら普通にブロックの方が書きやすいで!
おさらい!
・一行ずつブロックに分かれてる
・よく使うものだけ覚えたらとりあえずOK
・とにかくブログを書いて慣れる

僕の場合はクラシックエディタからはじめて、最近になってからブロックエディタに変更したんよね。

そやしちょっと慣れるまで時間かかったけど、慣れてしもたらブロックエディタの方がビジュアル的にも書きやすいね。

これから始める人は、迷わず『ブロックエディタ』をおぼえた方がええで!

業界初!全てのアフィリエイト会員さんが対象!!
通常報酬にプラス12%上乗せでお金がもらえる!!
※一部対象外アリ
Amazonアソシエイトに落ちたあなたも『もしもアフィリエイト』からならもしかして・・
Amazon審査落ちた人はもしもで再挑戦やで!
もちろんワシも、もしもから合格したで🤤
アフィリエイト満足度9年連続 No.1 のASP!!
広告の種類も一番多いし、アフィリエイトするなら絶対登録しとかなアカンASPやで!
てか、アフィリエターさんで A8.net 登録してへん人おらんやろ!
知らんけど(笑)
スポンサーリンク
初心者アフィリエイターにこそ使ってほしい。それがDiver。

Diver

htlmやCSSなどのプログラミングを全く知らなくても綺麗なサイト仕上げることが可能!

アップデートにより常に最新のSEO対策の恩恵が受けられる!

クリックだけで吹き出しやランキングを作成可能な手軽さ!

初心者でもベテランアフィリエイターのようなサイトが簡単に作れてしまうのがDiver。

Twitterでフォローしよう

おすすめの記事