\ Pinterest はじめました /

WordPressブロックエディタ(グーテンベルク)で記事作成の基本と便利な使い方

WordPressブロックエディタ(グーテンベルク)で記事作成の基本と便利な使い方ブログの書き方

WordPressブロックエディタ(グーテンベルク)で記事作成の基本を知りたい!
WordPressの記事作成の流れを具体的に教えてほしい!
ブロックエディタで記事を作る時に、もっと便利に時短できる使い方はない?

このようなお悩みの方を解決したいと思います!

WordPressブロックエディタ(グーテンベルク)で記事作成の基本と便利な使い方

WordPressのエディタは2018年12月にWordPress 5.0のリリースし、エディタが一新され『ブロックエディタ(グーテンベルク)』ができました。

ブロックエディタ以前は、『クラシックエディタ』と呼ばれるエディタでしたが、今から始められる方はブロックエディタの使い方をマスターすればOKです。

この記事では、ブロックエディタで記事作成する『編集画面の構成』や『記事作成の流れ』、『もっと便利に時短できる使い方』を紹介します!

ブロックエディタならではの機能がたくさんありますが、よく使う機能をポイントで把握していきましょう!

では、始めて行きましょう!

ブロックエディタ(グーテンベルク)とは?

ブロックエディタ(グーテンベルク)』は、WordPress 5.0が2018年12月にリリースに標準搭載されたエディタで、テキストや画像などをブロック単位で作成します。

ブロックエディタの特徴は、WEB制作に必要なHTMLやCSSの知識がなくても、簡単にレイアウトや装飾を作れて、直感的に扱える点です。

また、再利用するような定型文などを登録できる機能があり、より効率的に記事作成ができるようになりました。

では、実践あるのみなので使い方を確認して行きましょう!

ブロックエディタの編集画面の構成

ブロックエディタの編集画面の構成

まずは、ブロックエディタの編集画面の構成を解説します!

編集画面の全体図

編集画面の全体図

管理画面の左メニューから「投稿」の「新規追加」を選択すると編集画面が表示されます。

記事を作成するエディタは、大きく分けて4つのエリアがあり、これらを使いブロックの操作や記事の作成をします。

  1. ツールと設定メニューバー ⇒ ナビゲーション系や下書き・プレビュー・公開・エディタ設定
  2. 編集エリア ⇒ 記事のタイトルや本文(コンテンツ)を作成するエリア
  3. 設定パネルメニュー ⇒ 記事設定や各ブロックの設定
  4. 追加パネルメニュー ⇒ 追加の記事設定【※初期状態は非表示】

WordPressの有効化しているテーマやWordPressのバージョンで、編集画面に表示される項目やレイアウトが若干異なる場合があります。

ツールと設定メニューバー

ツールと設定メニューバーの詳細
No機能利用頻度
ブロックの追加1.0
編集/選択モード切替1.0
操作を1つ戻す(元に戻す)1.0
操作を1つ進める(やり直す)1.0
コンテンツ詳細表示2.0
ブロックリストビュー1.0
下書き保存5.0
プレビュー5.0
公開5.0
設定パネルメニューの表示・非表示1.0
エディタ設定2.0

主に、ブロックの追加や下書き保存など、記事に共通した操作するボタン類が並んでいます。

「7~9」以外は、あまり使用することはないです。

「3:操作を1つ戻す(元に戻す)」は、パソコン操作の「元に戻す」と同じでキーボード入力の ctlr + Z で実行できるので基本的には使うことは少ないでしょう。

「7:下書き保存」は、記事作成の途中に適度に行うようにしょう。

WordPressの記事保存には主に2種類の保存機能があります。

1つは自動保存機能(上書き保存機能)があり、60秒毎に自動的に行われています。

もう1つが、リビジョン機能(別名で保存機能)があり、記事の内容を編集後に、下書き保存や公開などの実行の際に自動保存され、保存の履歴が残るので過去記事に戻ることができます。

編集エリア

WordPressの編集エリア
No機能
記事のタイトル
記事の本文(コンテンツ)

記事を編集するエリアにあり、ここに記事の本文(コンテンツ)を書いていきます。

新規作成時では「2:記事の本文(コンテンツ)」の部分に「文章を入力、または/でブロックを選択」の何も入力されていない『段落ブロック』が1つある状態から始まります。

ここに、文章や画像の挿入などを行って記事を作成していきます。

設定パネルメニュー

WordPressの設定パネルメニュー

右側にある設定パネルメニューは、投稿する記事に関する設定やブロックに関する設定を行います。

ブロックを選択していない場合、は『投稿タブ』のメニューが表示され、ブロックを選択している場合は、『ブロックタブ』のメニューが表示されます。

投稿タブ

WordPressの設定パネルメニューの投稿タブ
No機能利用頻度
公開状態の確認や公開の設定を行います。5.0
リビジョン:過去に保存した記事を確認比較できます。
リビジョンがないと表示されません。
3.0
パーマリンク設定を行います。
下書き保存前には表示されません。
5.0
カテゴリー選択・追加を行います。5.0
タグ選択・追加を行います。5.0
アイキャッチ画像の追加・削除を行います。5.0
記事の要約文を入力します。3.0
コメントの許可設定などをします。1.0

投稿に関する設定は、基本的にそれぞれ設定を行います。

「2:リビジョン」は必要に応じで、過去記事に戻したい時などに使います。

「8:ディスカッション」は、ブログ運営方針により利用頻度は変わりますが、使わないケースが多いですね。

ブロックタブ(段落)

WordPressの設定パネルメニューのブロックタブ(段落)
No機能利用頻度
ブロックの説明
フォントサイズや行の高さの設定(段落ブロック固有)3.0
文字色や背景色を設定(段落ブロック固有)3.0
ドロップキャップの設定(段落ブロック固有)1.0
ブロックにCSSのクラス指定やアンカーを設定3.0

上記では、『段落ブロック』の例で説明してます。

ブロックに関する設定は、選択しているブロックによって設定できる項目は変わります。

また、有効化しているテーマによって設定項目が追加される場合もあります。

追加パネルメニュー

WoPressの追加パネルメニュー
No機能利用頻度
記事独自の情報を追加して利用できる機能2.0

追加パネルに関する設定は『カスタムフィールド』以外の項目も、有効化しているテーマによっては設定項目が追加される場合があります。

なお、追加パネルメニューは初期状態では表示されませんので表示の方法を説明します。

WordPressの追加パネルメニューの表示01

追加パネルの表示は「設定メニューバー」の「エディタ設定(…)」をクリックして「設定」を選択します。

WordPressの追加パネルメニューの表示02

「追加パネル」の「カスタムフィールド」に☑を入れると「有効化してリロード」ボタンが表示されるので選択すると表示できます。

「カスタムフィールド」は、WordPressテーマの機能により使われる場合があり、いつの間にか項目が登録されているケースがありますが心配しないでください。

WordPressの記事作成から投稿するまでの流れ

WordPressで記事を投稿するまでの流れ

記事作成から投稿するまでの流れは以下になります。

記事の新規作成から投稿するまでの流れ見出し
  1. 記事の新規作成
  2. 記事のタイトル・本文・見出しなどを作成
  3. 記事のテキスト装飾・画像の追加
  4. 記事のアイキャッチ画像・パーマリンク・カテゴリー、タグの設定
  5. 記事のプレビュー・公開【完成!】

まずは、順に沿って記事作成と各種設定を行い、公開までを行って流れを把握しましょう!

記事の新規作成

WordPressで投稿の新規作成を選択

左メニューの「投稿」⇒「新規作成」を選択します。

記事作成は「投稿」から新規作成します。投稿と似たページ作成ができる「固定ページ」がありますが、こちらは使用用途が違いますので間違わないようにしましょう。

記事のタイトル・本文・見出しなどを作成

記事のタイトル・本文・見出しを作成を行います。

記事のタイトルを入力

WordPressでタイトルを入力

タイトルを追加」を選択して、記事のタイトルを入力します。

記事の本文(コンテンツ)を書く

ここからブロックを使いながら記事の本文を作成していきます。

WordPressのブロックメニューについて
No機能利用頻度
ブロックタイプまたはスタイルを変更3.0
ブロックをドラック移動3.0
ブロックを上下に1ブロック毎に移動3.0
テキスト配置の変更3.0
テキストを太字5.0
テキストをイタリック1.0
リンクの追加5.0
その他のテキスト装飾3.0
ブロックの設定3.0

上記のブロックメニューは「段落ブロック」に表示される項目になります。

ブロックメニューに表示される項目はブロックのタイプで異なり、段落ブロックの場合は「5:テキストを太字」「7:リンク追加」はよく利用します。

WordPressで段落ブロックを追加と段落ブロック内で改行

『段落ブロック』は「Enter」を押すだけで、段落ブロックを追加できます。

段落ブロック内で「改行」したい場合は「Shift + Enter」を押します。

記事に見出しを挿入

WordPressで記事に見出しを挿入

「ブロック追加」から「見出しブロック」を挿入する手順です。

  1. 「ブロック追加」を選択
  2. 「見出し」を選択
  3. 挿入された「見出しブロック」に見出し名を入力

見出しは、長文の文章を読みやすくするために使います。

WordPressで記事の見出しの使い方

見出し』は「見出し2」「見出し3」など複数あり、入れ子構造の順番で見出しを正しく使いましょう。

記事にリストを挿入

WordPressで記事にリストを挿入

「段落ブロック」を「リストブロック」に変換で挿入する手順です。

  1. 変換する段落ブロックの「ブロックタイプまたはスタイルを変更」を選択
  2. 「リスト」を選択
WordPressの記事でリストブロックメニュー
No機能利用頻度
箇条書きリスト3.0
番号付きリスト3.0
インデントを上げる3.0
インデントを下げる3.0

リスト』は、要点を箇条書きでまとめ書きする時に使い、番号付きのリストも使えます。またインデント構造(字下げ)のリストも作成できます。

その他に「引用ブロック」「コードブロック」「テーブルブロック」など、用途に応じたブロックを駆使して記事の本文(コンテンツ)を作成します。

記事のテキスト装飾・画像を追加

記事の本文(コンテンツ)がテキストだけで書かれていては、訪れたユーザーにうまく伝わりません。

記事で伝えたい重要な文を明確にしたり、文章だけでは伝わりにくい場面などは画像など使い補いましょう。

記事のテキストを装飾

WordPressで記事のテキストを太字にする

テキストを太字にできます。

  1. 「太くするテキスト」をドラッグで選択
  2. 「B(太字)」を選択
WordPressで記事のテキストをドラッグして文字色を選択
WordPressで記事のテキストの色を選択

テキストのを変えれます。

  1. 「色付けするテキスト」をドラッグで選択
  2. 「その他のテキスト装飾」を選択
  3. 「A 文字色」を選択
  4. 「デフォルトのカラー」または「カスタムカラー」を選択
  5. 「任意のカラー」を選択 ※カスタムカラー選択時のみ

記事に画像を追加

WordPressで記事のブロック追加の画像を選択
  1. 「ブロック追加」を選択
  2. 「画像」を選択
WordPressで記事に画像を追加する方法を選択

画像の追加』は、以下の3つのいずれかで追加できます。

  • アップロード ⇒ 新しく画像をアップロードして追加
  • メディアライブラリ ⇒ 既にアップロード済みの画像を追加
  • URLから挿入 ⇒ 画像URLを直接指定して画像を追加
WordPressで記事に画像の設定
No機能利用頻度
配置を左寄せ、右寄せ、中央寄せ、全幅など設定3.0
切り抜き、縦横比、拡大、向き(回転)などの設定2.0
画像の置換(入れ替え)3.0

画像をアップロードして追加すると、編集画面に画像が表示されます。

画像のスタイルや位置、大きさの調整、Altテキストなどの設定ができます。

Altテキスト」は、リンク切れなどで画像が正しく表示されない時に代わりに表示されるテキストになります。

また、Googleの画像検索などの時に、Altテキストの設定により記事の画像が検索にヒットする可能性が上がるので、設定をおすすめします。

記事のパーマリンク・カテゴリー、タグ・アイキャッチ画像を設定

記事の本文ができたら、記事を公開するための設定を行いましょう。

記事のパーマリンクを設定

パーマリンク』は、記事毎に設定できるURLのことです。

WordPressの初期状態では、数字や日本語などが設定されているので、英語表示に変更しましょう。

設定パネルメニューの「パーマリンク」⇒「URLスラッグ」を選択して、パーマリンクを英語表示に書き換えます。

WordPressの設定によっては、パーマリンクの編集できない場合があります。

編集ができない場合は、WordPressでブログを書き始める前に行う初期設定!【パーマリンク設定】を参考にして、WordPressの設定を先に行いましょう。

パーマリンク設定は、下書き保存を行わないとパーマリンク設定が表示されませんので、下書き保存をした後に設定しましょう。

記事のカテゴリー、タグを設定

カテゴリーやタグ』は、記事を関連記事としてまとめるもので、「カテゴリー=フォルダ」「タグ=付箋」とイメージしてもらえば良いです。

記事に対して「カテゴリーは1つ」「タグは複数」で設定されることが一般的と言われてます。

WordPressで記事のカテゴリー、タグを設定
  1. 記事に対する「カテゴリー」を選択
  2. 記事に対する「タグ」を入力

新しくカテゴリーを追加したい場合は、「新規カテゴリーを追加」を選択して追加してください。

タグは、タグ名を入力後に既に作成されたタグと同じタグ名であれば、タグが表示されるのを選択してください。

また「初心者」と「beginner」など、同じ意味を日本語と英語でタグを作成すると、管理が煩雑なったり訪れたユーザーにも分かりづらくなるので、ルールを決めておきましょう。

新規でカテゴリー・タグを作成したときの注意点!

新規カテゴリーを追加」や「新規タグを追加」を日本語で追加した場合、URLの一部となるスラッグが日本語で登録されるため、新規作成したあとは英語表示に修正しましょう!

カテゴリーもタグも修正する手順は同じなので、WordPressでブログを書き始める前に行う初期設定!【カテゴリーの設定】を参考にして、スラッグの修正を行いましょう。

記事にアイキャッチ画像を設定

アイキャッチ画像』は、記事のトップや記事の一覧画面などで表示されるメイン画像です。

訪れたユーザーに画像で興味を引くだけでなく、ブログのデザインの一部にもなりますので設定しましょう。

WordPressで記事にアイキャッチ画像を設定を選択

設定パネルメニューの「アイキャッチ画像」の「アイキャッチ画像を設定」を選択します。

WordPressで記事にアイキャッチ画像の追加方法を選択
  1. 「ファイルをアップロード」タブをクリックして画像を選択
  2. 設定するアイキャッチ画像を選択 ※選択すると☑が入ります。
  3. 「アイキャッチ画像を設定」を選択

代替テキストは「Altテキスト」として使用できますので、記事のタイトルなどにしておくと良いでしょう。

記事のプレビュー・公開【完成!】

WordPressで記事をプレビューしてブログを確認

記事の作成と設定が完了したら、『プレビュー』で出来上がりを確認しましょう!

編集画面上と実際のブログ記事では、レイアウトなど見え方が違うので問題ないか確認を必ず行いましょう。

WordPressで記事を公開する

プレビューで確認して、問題なければ「公開」を選択して、世界に公開しましょう!

初めての場合は、記事を書くことや設定などたくさんあってとても大変に感じたと思いますが、誰でも最初は同じなので心配しないでください!

記事を書く』ことで上達し慣れやコツが掴めてくれば、もっと簡単にできるようになります!

ブロックエディタの基本的な操作

ブロックエディタの基本的な操作方法を紹介します!

ブロックエディタならではの便利な機能がありますので、これらを知って使いこなしましょう!

ブロックの追加

WordPressで記事にブロックを追加
  1. 「設定メニューバー」の「ブロックの追加」を選択
  2. 追加するブロックを選択

ブロックの削除

WordPressで記事のブロックを削除
  1. 「ブロックメニュー」の「ブロックの設定」を選択
  2. 「ブロックを削除」を選択

ブロックの移動

WordPressで記事のブロックを移動

6点のアイコン」をドラックでブロックを任意の場所に移動でき、「∧∨」で1ブロックずつ上下に移動できます。

記事構成の修正や改善する時など、コピペが不要で順番を入れ替える時は便利なので重宝します。

ブロックの変換

WordPressで記事にリストを挿入
  1. 変換する段落ブロックの「ブロックタイプまたはスタイルを変更」を選択
  2. 「リスト」を選択 ※変換するブロックは一例です。

入力した内容を保持したまま変換できるのは便利ですね。

ブロックタイプによっては変換できるブロックが決まっているため、全てに変換できない場合があります。

ブロックの複製

WordPressで記事のブロックを複製
  1. 「ブロックメニュー」の「ブロックの設定」を選択
  2. 「複製」を選択

ブロックをまとめて複製して文章だけ変更するなど、装飾を再利用などしたい時に便利に使えます。

ブロックの再利用

WordPressの記事でブロックメニューの再利用ブロックに追加を選択
  1. 「ブロックメニュー」の「ブロックの設定」を選択
  2. 「再利用ブロックに追加」を選択
WordPressの記事で再利用ブロックに名前を付ける
  1. 再利用ブロックに追加したブロックに「ブロックの名前」を入力
  2. 「保存」を選択

これだけで、他の記事でも再利用ブロックに登録したブロックを簡単に呼び出せるようになりました!

WordPressの記事で再利用ブロックの呼び出し
  1. 「設定メニューバー」の「ブロックの追加」を選択
  2. 「再利用可能」を選択
  3. 呼び出すブロックを選択

登録したブロックを簡単に呼び出せるので、よく使用する定型文などを登録すれば、記事の作成も時短になりますね。

再利用ブロックに登録したブロックを呼び出した後、通常ブロックに戻して編集することで、個別ブロック(通常ブロック)に戻すことができます。

定型文として使用するけどブログの記事毎で部分変更したい時などは、通常ブロックに戻して編集するという活用もできます。

WordPressの記事で再利用ブロックと通常ブロックに戻す

もっと便利にする機能と時短のコツ

ひとつ前で紹介した「再利用ブロックの追加」も便利な機能のひとつですが、ブロックエディタならではのもっと便利な機能を紹介します!

覚えるまでに多少時間はかかりますが、よく利用するブロックは覚えるとスムーズに記事作成できるようになりますよ!

/(スラッシュ)ショートカットでブロックを呼び出し

WordPressの記事でスラッシュでブロックを呼び出し

まずは、ブロックの呼び出しを早くする機能で、『/(スラッシュ)』入力だけでブロックの候補を素早く呼び出せます。

すべてのブロックが表示されるわけではありませんが、よく利用するブロックが候補として表示されるので、とっても時短になります!

/(スラッシュ)ショートカット+ブロック名で呼び出し

WordPressの記事でスラッシュ+ブロック名で呼び出し

「/list」など『スラッシュ+ブロック名』でブロックを指定して呼び出して選択することができます。

ブロックタイプショートカットブロック名
見出し/heading or /見出し
リスト/list or /リスト
画像/image or /画像
テーブル(表)/table or /テーブル
埋め込み/embed or /埋め込み
区切り/separat or /区切り
ショートコード/short or /ショートコード
ボタン/button or /ボタン

記事作成時にはショートカットブロックの便利な機能をガンガン使って行きましょう!

またショートカットブロックは、WordPressテーマ固有のブロックも「/ブロック名」で呼び出しできます。

その他のキーボードショートカット

その他の『キーボードショートカット』として、ブロックの操作をキーボードショートカットで扱えるとマウス操作が減りさらに快適になります。

ブロックエディタの基本操作で紹介した移動や複製など、いくつかキーボードショートカットが割り当てられてます。

ブロックの動作ブロックショートカット
選択したブロックを複製Ctrl+Shift+D
選択したブロックを削除Shift+Alt+Z
選択したブロックの前に新しいブロックを挿入Ctrl+Alt+T
選択したブロックの後に新しいブロックを挿入Ctrl+Alt+Y
選択された複数のブロックを削除del
backspace
選択したブロックを上に移動Ctrl+Shift+Alt+T
選択したブロックを下に移動Ctrl+Shift+Alt+Y
WordPressの記事でキーボーショートカットを表示する

キーボードショートカットを忘れた時には『Shift+Alt+H』で、キーボードショートカットを表示して確認しましょう。

最初は慣れなくて時間がかかるように感じると思いますが、徐々に当たり前になれば確実に効率的に記事作成ができます!

Mackdown記法(マークダウン)を覚えよう!

「/(スラッシュ)ショートカットキー」や「キーボードショートカットキー」だけでも時短になりますが、もうひとつの時短のコツが『Markdown記法』になります。

Markdown記法を使えば、今よりも執筆速度がアップできます!

なぜなら、ボクもMarkdown記法を使うようになって約20%ぐらいの時間短縮になり手間も減ったからです。

執筆速度を早くしたい人は、Markdown記法でWordPressブログの執筆速度アップとおすすめ無料ツールを紹介で詳しく解説していますので、ご覧になってください!

まとめ

この記事では、WordPressブロックエディタ(グーテンベルク)での「記事作成の流れ」と「基本な編集画面の構成」と「便利で時短できる使い方」などを紹介しました。

ブロックエディタを使いこなすには、とにかく触ってブロック操作や記事作成の経験値を積み上げることが一番早く上達します!

新規投稿で練習用に1つ記事を作るのも良いでしょう。

最後まで読んでいただきありがとうございました。この記事であなたの悩みが解決できれば幸いです!

ブログを始める人におすすめのレンタルサーバー!

ブログを始めようとお考えの人向けに、おトクなキャンペーン中のレンタルサーバーをご紹介します!

ConoHa WING(コノハウィング)

キャンペーン中!

「ConoHa WING」では、WINGパック「ベーシックプラン」新規でお申込みいただくと、ConoHa WING通常料金から最大36%OFFでご利用いただけます。36ヶ月契約なら月額836円からWINGパックをご利用いただけます。

さらに、初期費用無料で、初回お申込み月はご利用料金無料なので月初のお申込みで、最大31日間無料でご利用いただく事ができます!

また、WINGパックはレンタルサーバーと独自ドメインがセットになったおトクな長期利用割引プランです。お好きなレンタルサーバープランと独自ドメインが2つ永久無料でご利用いただけます。

詳細は、以下のリンクからご確認ください。
⇒Early Summer キャンペーン!

Xserver(エックスサーバー)

キャンペーン中!

「エックスサーバー」では、「独自ドメイン2つ永久無料&初期費用半額」と過去最大級にお得なキャンペーン開催中です!

さらに2021年6月17日(木)18時まで、キャンペーン期間中に新規でお申込みいただいた方は、通常3,300円の初期費用が半額!

さらに「.com」や「.net」などの人気独自ドメイン2つが永久無料と大変おトクです!

キャンペーンの詳細は、以下のリンクからご確認ください。
⇒独自ドメイン2つ永年無料&初期費用半額キャンペーン

ロリポップ!

ロリポップ!『ドメインずーっと無料』!

『ムームードメイン』の対象ドメインと、『ロリポップ!』のレンタルサーバーの両方を新規でご契約いただく場合、レンタルサーバーをご契約中はドメインを無料でご利用いただける『ドメインずっと無料』の提供を開始しました。

ロリポップ!でレンタルサーバーを契約期間中はずっと無料でドメインを利用することができます。

サービスの詳細は、以下のリンクからご確認ください。
⇒ドメインの新規取得・更新が無料になるサービス『ドメインずっと無料』

ボクがおすすめするレンタルサーバーの特徴や違い、選び方など知りたい方は、WordPressに最適なレンタルサーバーの選び方とおすすめサービス比較!の記事に詳しく解説してますのでご覧になってください!

ブログの書き方
スポンサーリンク
otsuをフォローする
スマライログ
タイトルとURLをコピーしました