WordPress『ブロックエディタの使い方ガイド』記事作成から公開までの手順を解説!

WordPress『ブロックエディタの使い方ガイド』記事作成から公開までの手順を解説!WordPressブログの始め方

この記事はこんな方におすすめです!

・WordPressブログを始めたばかりの人。

・これから初めてWordPressで記事を書く人。

・ブロックエディタの基本的な使い方について知りたい人。

基本的な内容からコツや注意点も交えて順番に説明していきます。
理解を深めるため、ぜひ最初から最後までお付き合いください!

それでは、レッスンスタートです!

ブログの記事を書こう!

これまで環境作りやフロントページの作成など、
準備に近いお話ばかりでしたが、

いよいよ記事を書く時がやってきました!

 ブロガー

まずはWordPressの操作に慣れていく為に、

記事のネタが決まっている人も、そうでない人も、
とにかく記事を作ってみましょう!

ブログの記事は、投稿ページを使って作成します。

投稿ページの作成方法については以下で説明しています!

最初はわからないことも多いと思いますが、
初めて書くんだからあたりまえです!

ブログの記事は書けば書くほど上達します。

文章力だけでなく、技術的な知識も増えて、
見た目を整理する技やコツが身についてくるので、

まずは思いつくままに
記事をガンガン書いていきましょう!

ブロックエディタとは?

WordPressで記事を作成する時は、
ブロックエディタというツールを使います。

ブロックエディタとは、
WordPressに標準搭載されているページ作成用のエディタ
のことです。

ブロックエディタは、
固定ページや投稿ページの編集画面で使います。

WordPress_ブロックエディタについて

赤枠 … ページの内容を書き込む部分。

青枠 … SEOに関する設定を行う部分。

緑枠 … ページに関する各種設定を行う部分。

青枠、緑枠の細かな設定に関わるところは
後から1つずつ覚えていけば大丈夫なので、

まずは難しいことを考えずに、
メインのコンテンツを作成する赤枠の部分
いろいろ触って操作に慣れていくようにしましょう!

投稿とブロック(単位)

ブロックエディタでは、以下2種類のまとまりで
コンテンツ(文章や画像)を操作します。

投稿単位   … ページ全体。

ブロック単位 … 1つの段落、または、画像やリンク。

画面上は、以下のような表示になります。

WordPress_投稿とブロック単位

ページ内をブロックと呼ばれる単位で編集を行いますが、

この例で言うと、1つの投稿内に、

タイトル、文章1、文章2、文章3の
4つのブロックが存在することになります。

ブロックエディタを使うメリット

ページをブロック単位で編集することで、
以下のようなメリットが出てきます。

・ブロックの場所を簡単に入れ替えできる。

・ブロック単位で選択してコピーや切り取り、削除ができる。

実際に使ってみると便利さがより理解できるので、
環境がある人はWordPressを開いて試してみてください。

メリット①:ブロックの場所を簡単に入れ替えできる

例えば、普通のテキストエディタで
文章2と文章3の場所を入れ替えるとなったらどうしますか?

ブロック3の文章を切り取って、
ブロック1と2の間にスペースを作って
貼り付けるという作業になると思います。

例では単文なので簡単ですが、
これが長文になるとまた話が変わってきますよね。

 パソコンで困っている人

でも、ブロックエディタは違います。

文章2の位置を1つ下にずらすだけです。

WordPress_ブロックエディタを使うメリット_1

テキストエディタでは、
テキスト全体が1つのコンテンツですが、

ブロックエディタでは、
ブロック1つ1つがコンテンツなので、

この場合は、コンテンツを並び替える
というイメージになります。

メリット②:ブロック単位で選択してコピーや切り取り、削除ができる

文章を切り取ったり、コピーしたり、削除する場合、

先ほどと同様、コンテンツが長文になってくるほど、
細かく範囲選択するのが大変になりますが、

ブロックという箱でコンテンツを取り扱うことによって、
細かな範囲を意識せずに操作ができます。

WordPress_ブロックエディタを使うメリット_2

また、ページ内には、
文章だけでなく、画像やリンクなど、

いろいろな種類のコンテンツがありますが、
それらをすべて「ブロック」として取り扱うので、

まとめて切り取ったり、ページ内のどこかに貼り付けたり、
といった操作が効率的にできます。

ブロックエディタの使い方

ブロックエディタの基本的な使い方について説明します。

ページを作成してネットに公開するまでの流れ
を簡単にまとめると以下のようになりますが、

今回はこの流れに沿って操作を説明します。

操作①:ブロックを追加する

操作②:文章を書く

操作③:投稿の設定を変える

操作④:ブロックの設定を変える

操作⑤:プレビューを確認する

操作⑥:プレビューを確認する(タブレット、モバイルの表示)

操作⑦:記事を公開する

操作①:ブロックを追加する

まずはページにブロックを追加します。

ブロックといっても、
文章を書く為の段落ブロックだけではなく、

見出しを作るブロック、画像やリンクを差し込むブロック、
表を作成するブロックなど、様々なものがあるので、
必要なものを選択して追加していきます。

操作方法は以下です。

ブロックの追加手順(パターン1)

画面の右側にある「+」ボタンをクリックすると、
ブロックのリストが下に出てくるので、

ブロックの種類を選択して追加します。

WordPress_ブロックを追加する_1

ブロックの追加手順(パターン2)

もう1つの方法として、
画面の上にある「+」ボタンをクリックしても
先ほどと同様にブロックを追加できます。

WordPress_ブロックを追加する_2

この場合は画面の左側に
ブロックの種類がリスト表示されるので、

使いたいブロックを選択して追加します。

WordPress_ブロックを追加する_3

追加できるブロックの種類については、
WordPressのテーマや追加したプラグインによって
専用のブロックが使える場合もある
ので、

利用する環境でどのようなブロックが使えるのか、
記事を書く前にしっかり調べておきましょう。

ちなみに、本ブログは以下で紹介しているCocoonを使っています。

操作②:文章を書く

次に、文章をブロックの中に入力します。

WordPressで文章を書く時は
文書ツールというものを使います。

文書ツールとは、文字を大きくしたり、
色を付けたり、下線をつけたり、
ページ内に書いた文章を装飾する為のツールです。

操作方法は以下です。

文章を書く手順

段落ブロックに文字を入力すると、
ブロックの上にボックスが表示されます。

これが文書ツールです。

WordPress_文章を書く_1

対象の文字列を選択し
ツールのアイコンをクリックすると文字を装飾できます。

文書ツールの表示場所を変更する手順

ブロックエディタの標準設定でページを編集していると、

文書ツールで上のブロックが隠れてしまって、
内容が見えず編集しにくいことがあります。

そんな時は、以下の方法で
文書ツールの場所を固定しましょう!

画面右上にあるオプションボタンをクリックすると、
メニューが出てくるので、

「トップツールバー」を選択します。

WordPress_文章を書く_2

画面の上に文書ツールが固定されました。

WordPress_文章を書く_3

これでページの内容を見ながら文章を書くことができます!

他にも効率的に文章を書く為に用意されたモードがあるので、
自分のスタイルに合うモードを探してみてください!

操作③:投稿の設定を変える

次は投稿の設定、つまり、
ページ全体の設定を行う方法です。

具体的には、パーマリンクの設定、
目次の表示、アイキャッチ画像の設定など

記事を公開する上で必要になる設定項目が多くあります。

投稿の設定を変える手順①

画面右上にある設定用のアイコンをクリックすると、
設定用のウィンドウが右端に表示されます。

WordPress_投稿やブロックの設定を変える_1

投稿の設定を変える手順②

設定用のウィンドウの上にある「投稿」タブをクリックします。

投稿の設定を変える手順③

各種設定を変更したら、画面右上の
「下書き保存」をクリックして設定完了です。

操作④:ブロックの設定を変える

次にブロックの設定を変える方法です。

ブロックの種類ごとに設定内容は違いますが、
色を変えたり、大きさを変えるなど、

デザイン変更をする時によく使います。

操作方法は以下です。

ブロックの設定を変える手順①

設定を変更したいブロックをクリックして
選択状態にします。

ブロックの設定を変える手順②

画面右上にある設定用のアイコンをクリックすると、
設定用のウィンドウが右端に表示されます。

WordPress_投稿やブロックの設定を変える_2

ブロックの設定を変える手順③

「ブロック」のタブをクリックします。

ブロックの設定を変える手順④

各種設定を変更したら、
画面右上の「下書き保存」をクリックして設定完了です。

操作⑤:プレビューを確認する

ページが一通り書き終えたら
公開前にプレビューを確認しましょう。

ブロックエディタ上の表示と、
実際にユーザーが見る画面はぜんぜん違うので、

 パソコンの設定に戸惑う人

プレビューを使って、
各ブロックがイメージ通りの表示になっているか
しっかり最終チェックしましょう。

操作方法は以下です。

プレビューの確認手順①

画面右上の「プレビュー」をクリックします。

プレビューの確認手順②

メニューが下に出るので
「新しいタブでプレビュー」を選択します。

WordPress_プレビューを確認する_1

プレビューの確認手順②

ブラウザの別のタブが開いて、プレビューが表示されます!

色や大きさ、インデントなど、
すべてイメージ通りか確認しましょう!

WordPress_プレビューを確認する_2

操作⑥:タブレットやモバイル用の表示で編集する

ブロックエディタを開いた時、
初期状態ではデスクトップ用のサイズになっていますが、

タブレットやモバイル用の画面サイズにして
編集することもできます。

タブレットやモバイル用の表示に変更する手順①

画面右上の「プレビュー」をクリックします。

タブレットやモバイル用の表示に変更する手順②

メニュー「タブレット」または「モバイル」を選択します。

WordPress_プレビューを確認する_1

タブレットやモバイル用の表示に変更する手順②

ブロックエディタのサイズが変わります

デスクトップ用と同様に編集できるので、
モバイル用の表示にあわせて調整しましょう。

WordPress_プレビューを確認する_3

ちなみに、この状態からプレビュー画面を表示しても
デスクトップ用のものが表示されますが、

タブレットやモバイルサイズのプレビューを確認したい時は、
ブラウザのウィンドウを狭める
ことで
自動的に表示が切り替わるので

レスポンシブデザインに対応する際はぜひ試してみてください。

操作⑦:記事を公開する

プレビューで微調整が終わったら、
いよいよネットに公開します!

公開を完了すると、
パーマリンクに設定したURLで
ブラウザからアクセスできるようになります。

 ブログ

操作手順は以下です。

記事の公開手順①

画面右上にある「公開」ボタンをクリックします。

WordPress_記事を公開する_1

記事の公開手順②

確認用のウィンドウが出てくるので、
内容を確認したら、「公開」ボタンをクリックします。

WordPress_記事を公開する_2

完了メッセージが表示されれば公開完了です!

 喜ぶ人

ブラウザから記事のURLにアクセスして
表示を確かめてみましょう

ブロックエディタの使い方 まとめ

ブロックエディタの使い方について以下説明しました。

・ブロックエディタについて

・投稿とブロック(単位)

・ブロックエディタのメリット

・ページの作成手順とブロックエディタの使い方

ブロックエディタを使えば、HTMLを自分で書かずに、
複雑なデザインを簡単に表現
することができます。

ブロックにもいろいろな種類があって、
こだわりだすとキリがないですが、

記事は公開後であっても内容を更新できるので、

初心者のうちは、あまり1つの記事にこだわりすぎず、
どんどん記事を作成することをおすすめします!