WordPressの新エディターで記事を書く方法(Gutenberg・WordPress 5.0以降)

ノマド的節約術

こんにちは! ヨス(@yossense)です。

ブログの始め方という記事がよく読まれていますが、今回はWordPress具体的に記事を投稿する方法を紹介しますね!

(※ WordPress5.0 以降の新しい編集画面「Gutenberg」でのやり方です)

WordPressの旧エディタでの書き方はこちらをご参考に。

新しいWordPressでの記事投稿の仕方

WordPressは長年の間同じような記事投稿画面でした。

それが2018年末に一新され、現在のWordPressの投稿画面になりました。

今回は、新しいWordPressでの記事投稿のやり方を、初心者でも分かりやすいように詳しく紹介しますね!

新しい記事を投稿するには、編集画面にログインして、下記のようにしておいてください

新規記事を投稿
新規記事を投稿

[ ログインした画面の上に出る「+新規」をクリック ] → [ 「投稿」をクリック ]

記事タイトルを入力する方法

まずは、ブログの記事タイトルを入力する方法です。

こちらはかんたんです! 下記の画像の「タイトルを追加」と書いてある場所でできます。

タイトルを追加
タイトルを追加

この記事タイトルは「見出し1」になります(← 意味がわからない人はスルーでオッケー)

記事本文を入力する方法

では、今度は記事の本文を入力していきましょう。

1「文章を入力、または / でブロックを選択」の部分をクリック

「文章を入力、または / でブロックを選択」の部分をクリックしてください。

「文章を入力、または / でブロックを選択」の部分をクリック
「文章を入力、または / でブロックを選択」の部分をクリック

2ふつうに文章を入力する!

あとはふつうに文章を入力するだけでオッケーです。

ふつうに文章を入力していく
ふつうに文章を入力していく

3段落と改行について

段落を変えたいときにはEnterキーを、段落の中で改行したい場合はShiftEnterを押してください。

このWordPressの「段落」と「改行」はややこしいので、こちらもご参考に!

文字を太字にする方法

文字を太くしたいとき(← こんなふうに)は、上に出ている「B」を押します。

文字を太字にする
文字を太字にする

詳しく書くと、この「B」を押すと<strong>タグになります。

<strong>タグをたくさん使いたくないという方は、AddQuickTagというプラグインをオススメします。

「AddQuickTag」をこのエディターで使う方法はこのページの最後に書いています。

リンクをはる方法

お次は、自分のブログ内のほかの記事や、外部のサイトにリンクをはりたいときのやり方です。

ヨス

自分のブログ内へのリンク(内部リンク)は←こんな感じのやつです。

「チェーン(鎖)」のマークをクリックしてください。

リンクをはる(URLを挿入する)
リンクをはる(URLを挿入する)

見出しを作る方法

お次は、入力した文を「見出し」にする方法です。

1「P」を逆にしたようなマークをクリック

先程の文字を入力している欄の左上にある「P」を逆にしたようなマークをクリックしましょう。

「P」を逆にしたマークをクリック
「P」を逆にしたマークをクリック

2「T」マークの「見出し」をクリック

「T」マークアイコンの「見出し」をクリックしましょう。

「T」マークの「見出し」をクリック
「T」マークの「見出し」をクリック

入力した文が「見出し2」になります

3「見出し3」「見出し4」にも変更可能

「見出し2」じゃなくて「見出し3」「見出し4」にしたい場合もかんたんに変更可能です♪

下の画像のように、「見出し2」になった文のすぐ上に「H2」「H3」「H4」のマークが出てきます。

「見出し3」「見出し4」にも変更可能
「見出し3」「見出し4」にも変更可能

「見出し3」にしたいときは「H3」を、「見出し4」にしたいときは「H4」を選択してくださいね。

見出しについてはこちらの記事が参考になりますよ。

箇条書きを挿入する方法

文章の中に箇条書きを挿入したいときはどうすればいいのでしょうか?

箇条書きというのは、こういうやつですね!

ヨスの好きな食べ物

  • ピザ
  • タコス
  • ラザニア

これも「見出し」と同じやり方で入れられます。

1「P」を逆にしたマークをクリック

先程の文字を入力している欄の左上にある「P」を逆にしたマークをクリックしましょう。

「P」を逆にしたマークをクリック
「P」を逆にしたマークをクリック

2「リスト」のアイコンをクリック

現れたウィンドウの中から「リスト」のアイコンをクリックしましょう。

「リスト」のアイコンをクリック
「リスト」のアイコンをクリック

3番号付きのリストにも変更可能

箇条書きになった文のすぐ上に「番号付きの箇条書き(リスト)」のアイコンが現れます。

番号付きのリストにも変更可能
番号付きのリストにも変更可能

これをクリックすると箇条書きの頭についている「・」が「数字」に置き換わりますよ。

引用を挿入する方法

今度は、ほかのブログやニュースサイトなどから文章を引用したいときです。引用は、下記のようなやつですね。

わたしは一言で言うと「言語の発音マニア」です。こんなこと書くと「え? なにそれ??」と言われそうですね(笑)。そのまんまですが、言語の音声・発音について勉強したり、語ったりすることが好きでたまらなくて、国際音声記号(発音記号)が大好物です。

英語の発音マニア! 英語びよりの編集長ヨスについて | 英語びよりより引用しました。

では、WordPressで引用をするときのやりかたを紹介しますね。

1「P」を逆にしたマークをクリック

先程の文字を入力している欄の左上にある「P」を逆にしたマークをクリックしましょう。

「P」を逆にしたマークをクリック
「P」を逆にしたマークをクリック

2「引用」のアイコンをクリック

そして「引用」のアイコンをクリックするだけです。

他人の記事をパクるのはアウトです。「この部分はちゃんと引用したよ!」ということがわかるようにしましょう。

「引用」したところに使う
「引用」したところに使う

なお、引用したすぐ下には、引用元の記事の「記事タイトル」に「URL」をはって記載しましょうね!

「ブロック」を理解する

さて、上で見た文章の書き方は感覚的にすごくやりやすいと思います。

でも、ちょっと面倒なんですよね。

WordPressのエディターの「ブロック」という概念を理解すると、もっと記事作成がラクになります

「ブロック」とは?

WordPressで使われる「ブロック」というのは、「領域」のことです。

ブロックとは「領域」
ブロックとは「領域」

上の画像のように、「段落」や「見出し」、さらには前述した「箇条書き」「引用」の部分も1つ1つが「ブロック」の領域になります。

「ブロック」は移動できる

この「ブロック」の領域は1つの塊です。

この部分をまるっと上下に移動させることができます。

やり方は、こちらの画像のように「下へ移動」という部分をクリックするだけ。

上下への移動がかんたん
上下への移動がかんたん

「上へ移動」ももちろんできますよ。

「ブロック」を追加する方法

先ほどは、文章をとりあえず書いてから「見出し」にしたり、「箇条書き」にする方法を紹介しました。

でも、文章を書く前から「この部分は見出しを作るぞ!」と決まっている場合は、最初に「見出しブロック領域」を作成することもできます。

ヨス

……というか、慣れたらこっちのほうがオススメ!

そのやり方を紹介しますね。

1「ブロックの追加」をクリック

こちらの画像の部分あたりにカーソルを持ってくると「+」のマークが浮き上がります

「ブロックの追加」をクリック
「ブロックの追加」をクリック

これは、「ブロックの追加」のアイコンですので、ここをクリックしましょう。

2「一般ブロック」の中から「見出し」「箇条書き」などを追加

「一般ブロック」という項目の中に、「見出し」や「リスト(箇条書き)」のアイコンがあります。

「ブロックを追加」から見出し領域を作る
「ブロックを追加」から見出し領域を作る
「ブロックを追加」から「箇条書き」領域を作る
「ブロックを追加」から「箇条書き」領域を作る

ここで、「見出し」のブロック領域、もしくは「箇条書き(リスト)」のブロック領域を作ってから文章を入力することもできます。

画像を挿入する方法

画像を挿入するには、ブロック領域を作ってからしかできません。

1「ブロックの追加」をクリック

こちらの画像の部分あたりにカーソルを持ってくると「+」のマークが浮き上がります

「ブロックの追加」をクリック
「ブロックの追加」をクリック

これは、「ブロックの追加」のアイコンですので、ここをクリックしましょう。

2「画像」のアイコンをクリック

つづいて、「画像」のアイコンをクリックしましょう。

画像を挿入する方法
画像を挿入する方法

あとは、画像のアップロードなどをする画面になるので、指示に従っていけば挿入できますよ♪

3「代替テキスト」を入力する

画像を挿入する際に、下記画面になります。ここで、「代替テキスト」を必ず入力しましょう。

「代替テキスト」を入力
「代替テキスト」を入力

「代替テキスト」は、この画像がどういう画像なのかを表すものです。画像のリンクが切れたときなどに変わりに表示してくれますよ。

4「タイトル」も入力

さらに、「代替テキスト」だけでなく、「タイトル」という欄も入力しましょう。

「タイトル」を入力
「タイトル」を入力

「メディア」から、過去の画像を探すときに検索できるようになります

入力する文言はこの画像を表しているもので、わかりやすいものでOKです。「代替テキスト」と同じ内容でいいですよ。

テーブル(表)を挿入する方法

今度はテーブル(表)を挿入する方法を紹介します。

テーブルというのはこういうやつですね。

テーブル(表)の例
ヨッセンス 月間 約80〜100万PV
英語びより 月間 約15〜20万PV

1「ブロックの追加」をクリック

こちらの画像の部分あたりにカーソルを持ってくると「+」のマークが浮き上がります

「ブロックの追加」をクリック
「ブロックの追加」をクリック

これは、「ブロックの追加」のアイコンですので、ここをクリックしましょう。

2テーブルのアイコンを選択

「フォーマット」という中に「テーブル(表)」を入力するアイコンがあります。

テーブル(表)を挿入する
テーブル(表)を挿入する

このアイコンをクリックすると、縦の列を何列にするか、横の行を何行にするかを入力してテーブルを作れますよ。

TwitterやYouTubeを挿入する方法

Twitterや、YouTubeなどの投稿をブログ内に埋め込むことも簡単にできます。

たとえばTwitterの埋め込みはこちらのようなものですね。

1「ブロックの追加」をクリック

こちらの画像の部分あたりにカーソルを持ってくると「+」のマークが浮き上がります

「ブロックの追加」をクリック
「ブロックの追加」をクリック

これは、「ブロックの追加」のアイコンですので、ここをクリックしましょう。

2SNSを埋め込む

「埋め込み」の項目から、TwitterYouTubeFacebookなどを選べます。

SNSの埋め込み
SNSの埋め込み

あとは、引用するページのURLを入力するだけという簡単さです。

ヨス

埋め込み「コード」じゃなくて、URLを入れるだけなので超ラクですよ!

HTMLでの編集をする方法

意味がわからない方はスルーでオッケーです。

新しいWordPressのエディターでは、完全にHTMLエディター(すべてにHTMLのみで入力するエディター)にはなりません。

ヨス

ゆえに、HTMLコードですべて入力する人にとっては、ちょっと不便です……。

でも、ブロックごとに「ここはHTMLで編集する」のように指定することができます。

1「ブロックの追加」をクリック

こちらの画像の部分あたりにカーソルを持ってくると「+」のマークが浮き上がります

「ブロックの追加」をクリック
「ブロックの追加」をクリック

これは、「ブロックの追加」のアイコンですので、ここをクリックしましょう。

2「カスタムHTML」を選択

フォーマットの項目にある「カスタムHTML」を選択しましょう。

「カスタムHTML」を選択
「カスタムHTML」を選択

3HTMLでの入力が可能になる

これで、このブロックだけはHTMLでの入力ができるようになります。

HTMLおよびショートコードの入力が可能に
HTMLおよびショートコードの入力が可能に

ショートコードも直接入力できるので、便利ですよ。

一度作ったブロック領域を再利用する方法

この「ブロック」という領域ですが、一度作ったものをテンプレートとして保存しておくことで、再利用ができるようになります

ヨス

これはむちゃくちゃ便利です!!

1【登録方法】「再利用ブロックに追加」を選択

テンプレートとして保存したいブロックに行きます。

こちらの画像のように[ 「三本点」をクリック ] → [ 「再利用ブロックに追加」を選択 ]してください。

「再利用ブロックに追加」を選択
「再利用ブロックに追加」を選択

たったこれだけで、記録されます!!

2「ブロックの追加」をクリック

では、今度は登録したブロックを使いまわししましょう。

こちらの画像の部分あたりにカーソルを持ってくると「+」のマークが浮き上がります

「ブロックの追加」をクリック
「ブロックの追加」をクリック

これは、「ブロックの追加」のアイコンですので、ここをクリックしましょう。

3「再利用可能」を選択

「再利用可能」の項目をクリックすると、自分が登録したブロックが表示されるので、使いたいものを選択します

登録したブロックを選択
登録したブロックを選択

たったこれだけですね!

ヨス

こんな感じの「吹き出し」を入れたいときにも簡単に呼び出せるってことですね!!

ブロック領域を削除する方法

さて、作ったブロック領域を削除する方法ももちろんあります。

下記画像のように[ 「三本点」マークをクリック ] → [ 「ブロックを削除」を選択 ]をやって下さい。

「ブロック」の領域を削除する
「ブロック」の領域を削除する

じゃっかん面倒ですが……。

【超便利】ブロック追加の「ショートカット」

ここまで紹介してきた「ブロック」ですが、いちいち「+」ボタンをクリックするのは面倒ですよね。

じつは文章を入力する領域で、「半角スラッシュ( / )」を入力するとショートカットすることができます。

「/(半角スラッシュ)を入力するとメニューが出る
「/(半角スラッシュ)を入力するとメニューが出る

上の画像のように、「/(半角スラッシュ)を入力するとメニューが出るんです。

ここには、使った履歴で、頻度の高いものが載るようになっている(つまり、ここに出てくるものは変動する)ので、使いやすいですよ。

昔の「旧エディター」がやりやすい方へ

さて、この記事では新しいWordPress 5.0 以降のエディター「Gutenberg」の使い方についての紹介です。

でも……

ヨス

前の旧エディターのほうが使いやすい! あれに戻したい!!

……という方も多いのではないでしょうか?

そこで、旧エディターを使う方法も紹介します。

エディター全体を旧エディターに戻す方法

わたしもやっているのですが、「Gutenberg」ではなく、完全に旧エディターのまま使う方法があります。

それが、プラグインの「Classic Editor」を使う方法です。

これをインストールして、有効化にするだけで、昔のエディターに戻りますよ。

1つのブロックだけ旧エディターにする方法

ぜんぶを旧エディターに戻すのではなく、部分的に旧エディターにする方法もあります。

それが、「1ブロック」だけを旧エディターにする方法です。

1「旧エディター」のアイコンをクリック

新しいブロックを追加するときにクリックする「+」のアイコンがありますよね?

ヨス

文章を入力しようと、カーソルを持っていったらニョキっと出てくるやつです。

コレと同時に、よくみると「パソコンのキーボード」のようなアイコンも出てくるんです。

「旧エディター」のアイコンが現れる
「旧エディター」のアイコンが現れる

これが、「旧エディター」のアイコンです! これをクリックしましょう!

2あとは今までどおり入力するだけ

これで、そのブロックだけ旧エディターに戻りました

このブロックだけ旧エディターに戻る
このブロックだけ旧エディターに戻る

【追記】AddQuickTagを新エディターで使う方法

そして、この旧エディターにしないと、超便利なプラグイン「AddQuickTag」が使えません

「AddQuickTag」が使えるように
「AddQuickTag」が使えるように

ですので、「AddQuickTag」を使う場合は、毎回、「旧エディター」に戻す作業が必要がありますね。面倒ですけど……。

今回はWordPress5.0 以降の新しい編集画面「Gutenberg」でブログを投稿する方法を紹介しました。

旧エディターを使っていた方にとっては、けっこう使いにくいのですが、新しくWordPressでブログを始めた方にとっては使いやすいと思います。

ちなみに、WordPressテーマは、わたしも使っているストークがオススメですよ。

WordPressテーマ「ストーク」
WordPressテーマ「ストーク」

最強のWordPressテーマ「ストーク」

これからブログを始めたい方必読!「ブログ応援メール【全50回】」

ヨスのブログ応援メール

ブログをこれから始めたい方は多いと思いますが、こんな悩みがあることでしょう。

  • ブログってどうやって始めるの?
  • 無料ブログでいいの?
  • どんなことを書けばいいの?
  • どうやってブログを書く時間を作るの?
ヨス

そんなあなたの「ブログライフ」のスタートを後押しする「ブログ応援メール」を始めました!!

この「ブログ応援メール」は全50回(予定)で、ブログの始め方はもちろん、ブログを書く心構えや、時間の捻出方法など、ブログが継続できるような内容でお送りします。

「ブログ応援メール」のとおりにやっていけば、ブログを始めることはもちろん、モチベーションを継続させる元にもなりますよ♪

ほどよいタイミングで、メールが届くようになっているので、ぜひ登録してみてくださいね♪

ヨスのブログ応援メール
お名前(姓)
メールアドレス(必須)
Powered by メール配信システム オレンジメール
パートナー

この記事、おもしろかったわ。ほかに似た記事ないん?

ヨス

ブログの作り方のカテゴリ」にあるきん、そっち見てや。

Twitterでヨスをフォローしよう!

気に入ったらどしどしシェアしてね♪
あわせて読みたい