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

この記事では、WordPressの投稿・記事編集に利用する、クラシックエディターの操作方法について説明しています。

クラシックエディターとブロックエディターの事前知識はこちらの動画から

クラシックエディターの操作説明はこちら

WordPressで記事を入稿(投稿)

記事を書くには「投稿画面」へ移動

ワードプレスの管理画面にログインすると、下の画像のように「ダッシュボード」の画面になりますので、赤枠内の「投稿」にマウスを乗せて表示された「新規追加」をクリックし「投稿ページ(記事投稿)」に移動します。

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

タイトルを書く

投稿ページに移動すると、下の画像のような画面が表示されるので、赤枠内にタイトルを書いていきます。

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

グーグル検索したときに全表示させるのは35文字内におさえる必要がありますので、チェックしておきましょう。

見出し(h2~h4)を作る

タイトルの下にある白い枠内に本文を記載していきます。

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

見出しを作るときは、まず見出しとなる文字を用意します。

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

入力した文章のどこかにカーソルがあると、そのカーソルがあるブロックの装飾を行うためのツールバーが文章上部に表示されます。

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

装飾用のツールバーから一番左のボタンをクリックすると、文章を他のブロックに変換するメニューが表示されます。

その中から、「見出し」をクリックすると、文章が見出しに変換されます。

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

初期状態では、見出しの種類がH2の状態になっています。

WordPressブロックエディターの使い方7
  1. 【見出し1】・・・タイトル用(本文中には使用しません)
  2. 【見出し2】・・・中見出し(いわゆる見出し)に使用
  3. 【見出し3~6】・・・小見出しに使用

「見出し1」は記事タイトルのみに使用する決まりがあるので、本文入力時に使用してはいけません。

記事タイトルは自動的に「見出し1」が設定されるので何もする必要はありません。

その為、記事の執筆は「見出し2」以降の見出しをつけてください。

見出しのレベルを変更したい場合は、ツールバーから「H2」と表示された部分をクリックします。

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

さらに表示されたメニューから、使いたい見出しレベルを選択することができます。

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

見出しを作成したら、次に、見出しの内容となる文章を入力していきます。

本文入力欄は1つひとつの「ブロック」(かたまり)単位で構成していきます。

先ほどは、見出しという1つのブロックを作成した事となります。

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

見出し用のブロックや、文章用の段落にするブロック、画像のためのブロックなど、用途ごとにブロックを作って記事を作成していきます。

使い方は、「エンターキー」を押して、とにかくブロックを増やし、そのブロックを何に使うか後で指定する方法と、「+(プラスマーク)」から、何のブロックを増やすか指定する方法の2種類となります。

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

「エンターキー」が先でも「+(プラスマーク)」でも、どちらにしても、「+(プラスマーク)」でブロックの種類を決めるメニューが表示されます。

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

使いたいブロックの種類を選んで使用してください。

見出しの内容となる文章を入力していくには、ブロックを「段落」にして入力します。

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

※エンターキーでブロックを作成した場合、強制的に段落のブロックとなります。

見出しが再度必要になったら同様の手順で作成します。

本文作成のポイント

先に見出しを用意します。

まず、見出しに必要な文字を入力しておきます。

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

それぞれを、見出しに変換します。

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

用意した文字を全て見出しに変換します。

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

見出しを用意したら、それに合うように文章を入力していきます。

まずは、文章用のブロックを追加したいので、見出しと見出しの間に表示される「+(プラスマーク)」をクリックします。

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

ブロックの種類が選択できるメニューが表示されるので、「段落」を選択します。

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

新しく増えた行に文章を入力してください。

文章を改行したい場合は、「Shiftキー」を押しながら「エンターキー」を押します。

エンターキーのみだと、新しい文章のブロックを作成することができます。

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

同様にして他の文章も見出しに合わせて入力していきましょう。

記事に画像を入れる

記事内に画像を貼り付けていきましょう。画像を挿入する場合は、挿入したい場所にブロックを増やしていきます。

まずは、画像を挿入したい行の中央にカーソルを移動すると、「+(プラスマーク)」が表示されるので、クリックします。

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

表示されたブロックの種類選択メニューから「画像」を選択します。

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

すると、指定した場所に、画像用のブロックが増えるので、「アップロード」をクリックします。

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

次に、パソコン内部の画像が選択できるようになるので、必要な画像をクリックして選択し、そのまま、「開く」ボタンをクリックします。

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

画像を選択して開くと、先ほど用意した画像ブロックに画像が表示されます。

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

さらに、画像をクリックして選択中は、画像上部に画像編集用のツールバーが表示されます。

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

ツールバーにある「左寄せ」などを行うことで、画像を任意の方向に寄せることができます。

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

下の画像では、左寄せにした際の状態で、画像が左に、文章が右に回りこむように配置されます。

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

あくまでも、記事編集画面のイメージなので、実際のWEBページ上の表示とは多少異なる場合があります。

その為、実際の状態を見るには、記事編集画面の右上にある「プレビュー」をクリックします。

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

次に、プレビューしたいデバイスサイズを選択するためのメニューが表示されるので、見たい画面サイズを選択して「新しいタブでプレビュー」をクリックします。

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

すると、新しいタブで実際のWEBページでの表示を見ることができるので、確認して編集画面に戻ってください。

下の画像が、実際のWEBページでの表示で、記事編集画面と表示できる幅などが違うことから、多少の誤差が発生しています。

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

プレビューページが完成後のイメージになるので、配置などはプレビューから確認しましょう。

再度編集する際はタブを記事編集画面に切り替えてください。

「中央揃え」だと、画像の横に文章は表示されず、下のようになります。

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

さらに、「右寄せ」の場合は、画像が右に寄って、文章が左に回りこむ形になります。

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

画像には「代替テキスト」を追加することができます。

代替テキストは該当する画像をクリックして選択した状態で、画面右の「代替テキスト」欄に入力します。

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

「代替テキスト」は画像がうまく表示されなかったときに代わりにコメントが表示されるものです。
検索結果の順位に有利に働くものになるので、「見出しと同じ文章」「画像の意味がわかる文章」を簡単に書き入れましょう。

カテゴリー選定

タイトル → 見出し → 記事 → 画像挿入の順に書いたら、記事の「カテゴリー」を決めます。

カテゴリーを設定するには、画面右側のメニューを「ブロック」から「文書」に切り替える必要があります。

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

右側のメニューを「文書」タブに切り替えたら、その中から「カテゴリー」をクリックして、記事に合うカテゴリーを1つ選択してください。

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

「カテゴリー」はあらかじめクライアントが複数用意しているはずなのでチェックを入れればOKです。

アイキャッチ画像を決める

アイキャッチ画像とは、ブログの記事冒頭や記事一覧ページに配置されているサムネイル画像です。

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

設定するには、画面右側のメニューが「文書」タブの状態で、その中にある「アイキャッチ」をクリックします。

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

さらに、「アイキャッチ画像を設定」をクリックします。

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

すると、WordPress内の画像保管庫である「メディアライブラリ」が表示されます。

画像をアップロードするには、画面左上の「ファイルをアップロード」に切り替えます。

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

次に、画面中央にある「ファイルを選択」をクリックします。

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

アイキャッチにしたい画像を選択して、「開く」をクリックします。

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

すると、選択した画像が、メディアライブラリに追加されます。

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

画像挿入時と同じように、代替テキストを入力したら、画面右下の「アイキャッチ画像を設定」をクリックします。

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

アイキャッチ画像が設定されると、記事編集画面右下に設定した画像が表示されます。

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

プレビューで記事をチェックする

記事ができたらプレビューでチェックしてみましょう。

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

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

次に、プレビューしたいデバイスサイズを選択するためのメニューが表示されるので、見たい画面サイズを選択して「新しいタブでプレビュー」をクリックします。

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

公開はプレビューなどでしっかり確認できるまで押さないように注意しましょう。

プレビューすると、新しいタブで実際のWEBページ上の表示を確認することができます。

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

手直しが必要であれば編集画面のタブに戻って編集します。

下書き保存する

記事ができたら編集画面の右上にある「下書き保存」をクリックします。

「公開」をクリックするとWEB上に記事が公開されてしまうので注意してください!

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

記事の公開

記事を編集し、プレビューなどで最終確認までできたら記事を公開しましょう。

公開した段階で、その記事は全世界で閲覧可能となります。

しっかりと中身の確認を行ってから公開しましょう。

【あきらめないがモットー】ベビー用品・子供おもちゃ企業マネージャー→パソコン教室の教室長→フリーランス/35歳既婚で娘二人は4歳と2歳/WEBサイト・アプリ・SNS全般についてご指導・代行/スキルはHTML・CSS・JavaScript・Jquery・php 企業様からの執筆依頼なども行っています。 WordPressのカスタマイズ・HP作成・各種ご指導やお困りごとはこちらから

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


フォームから

当サイト選択肢に沿ってご依頼

問い合わせする
LINEから

お友達追加で手軽にトーク相談

友達追加する