こんにちは！びたろーです。
今回は、WordPressのエディタについて説明します。
最近インストールするWordPressのエディタはブロックエディタ（Gutenberg）になっておりますので、その基本的な使い方を中心にご紹介します。
プラグインを使ってWordPress 5.0以前のクラシックエディタ―（Classic editor）を使うことも可能です。
クラシックエディタのプラグインのサポートは2024年まで伸びたようですが、これから使い方を覚えるのなら断然ブロックエディタ―をおススメします。
ブロックエディタは、ブロック単位の編集エリアを使って記事を書いていきます。
ブロックを並べていくようなイメージで記事や画像を配置していくので、HTMLが分からなくてもきれいにレイアウトされたページを作ることができるのが特徴です。
ブロックエディタの使い方を覚えて、見やすいページ作りをしていきましょう。
◆当ページはリンクの一部にアフィリエイト広告を使用しています。◆
ブロックエディタ（Gutenberg）って何？
ブロックエディタ（Gutenberg）とは、WordPress 5.0から標準となったエディタです。
名前の通り、Webのページをブロック単位で編集するエディタになっています。
ブロック毎に文章を入力したり、画像を挿入します。
ページ内の各要素の配置はブロックを並べて行うイメージです。
HTMLの知識がなくても簡単にレイアウトすることができます。
便利な使い方もあるので、上手に活用すれば効率的に記事を書いていくことが可能です。
それでは、ブロックエディタの超基本的な使い方を、私の記事公開までの流れを例にして、解説いたします。初心者の方の参考になれば幸いです。
ブロックエディタでの記事作成と公開
以下の流れに沿って説明していきます。
- Officeソフトで記事作成
- WordPressの新規投稿画面でタイトル入力
- Officeソフトに書いた記事をWordPressの新規投稿画面にコピペ
- 見出し設定
- レイアウト調整（カラム、スペーサー）
- 画像挿入
- 文字装飾
- All in One SEOの設定（メタ説明入力等）
- パーマリンク、カテゴリー、タグ設定
- 見直し、保存
- 公開（予約投稿）
それでは順番に見ていきましょう。
Officeソフトで記事作成
いきなりWordPressの画面で打ち始めず、Officeソフトなどで原稿を作りましょう。
理由は、記事のバックアップのためです。
直接WordPressで編集したんだけど、操作を誤ってそれまでの作業をパーにしちゃったよ！
なんてミスが私にも何回かあります。
特に慣れないうちは注意が必要です。
そんなときの保険もかねて、原稿は別の場所で作成して保存しておきましょう。
原稿が出来上がってからWordPressにはコピペします。
原稿を作る際のポイントとしては、どこにどんな画像を入れるかを考えながら書いておくとWordPressにコピペした後が早いです。
タイトル入力
原稿ができあがったらWordPressでの作業です。
新規投稿画面を表示し、最初にタイトルを入力しましょう。
入力したら、右上の“下書き保存“を押してすぐに保存します。
作業の区切りには保存する癖をつけた方がいいですよ。
ちょっとした操作ミスで消えてしまったら悲しいですから。
“転ばぬ先の杖“です。
WordPressの新規投稿画面に貼付
原稿ができたら、WordPressの新規投稿画面を開き、全体をコピペします。
コピペしたら、一旦右上の“下書き保存“をクリックしてそれまでの作業を保存しておきましょう。
見出し設定
この段階では、改行やレイアウトなどは整っていない状態ですが、まず記事の見出しの設定をしてしまいます。
コピペしただけだと段落ブロックの集まりになっていて、どこが見出しなのかがわからない状態になっています。
最初に見出しを決めてしまえば、段落がわかりやすくなり、編集がしやすくなります。
見出しにする行にカーソルを移動し、左上のメニューから見出しボタンをクリックします。
見出しボタンをクリックしたとき、最初はH2見出しになっていますので、記事の構成により必要に応じてH3やH4も使って記事全体の構成がわかるようにしましょう。
レイアウト調整（カラム、スペーサー）
次にレイアウトを変えていきます。
- どこに改行をいれるか。
- 空白行をどのように配置するか。
- 画像はどこにいれるか。
- 段組みはどうするか。
などを考えてレイアウトしていきます。
私がよくレイアウトで使うメニュー
★カラム
ページ内でカラム（段組み）を決める場合に使用します。
記事中に画像を配置したいときなどに重宝します。
私は、文章の横に画像を配置するときや、画像を横に並べて表示するときによく使っています。
★スペーサー
文章と文章の間や文末と次の見出しの間など、全てが等間隔で書かれた文章はメリハリがなくだらけた感じになってしまいます。
そこで私は、スペーサーを適宜挿入して、記事や画像の間隔を調整しています。
スペーサーの高さを調整したいときは、スペーサーの下中央にある〇を上下にドラッグするか、右のメニュー欄で調節する。
画像挿入（記事中、アイキャッチ）
記事中へ画像を挿入します。
入れたい場所の上のブロックの下に出てくる“＋”ボタンをクリックしてメニューを表示させます
画像をクリック。
”アップロード”、”画像を選択”、”URLから挿入”の選択肢の中から選び、画像を挿入します。
記事編集画面に戻ったら、大きさを確認・調整します。
画像の挿入はプレビューで確認しながら行います。
たくさん入れすぎると見た目がギトギトした印象になってしまうので、バランスをチェックしましょう。
次にアイキャッチ画像です。
右のメニューの中のアイキャッチ画像をクリックします。
記事への画像の挿入と同じように、画像をアップロードするかメディアから選択します。
アイキャッチ画像は、ブログのトップページなどで新しい記事から順に記事の一覧が表示されるとき、記事のタイトルや本文といっしょに表示される画像です。
記事がSNSなどでシェアされたときや、ブログカードを使う場合などにサムネイル画像として表示されるので設定しておいた方がいいです。
下図の赤枠がアイキャッチ画像。
ブログカードの例
文字装飾
文章を最初から読みながら、重要部分や強調しておきたい単語や文章について、
- アンダーライン
- 蛍光ペンのマーキング
- 太字
- 文字サイズを変える
などの装飾をします。
何もない文章より、文字装飾を施したほうが、強調したいところがはっきりするので、読者にも記事のポイントがつかみやすくなります。
読みやすく、そして理解しやすくするために文字装飾を活用しましょう。
ただし派手にしてしまうとかえってポイントがわかりにくくなるので、控えめに。
All in One SEOの設定（メタ説明入力等）
記事を書き上げ、レイアウトや文字装飾を済ませたら、下側にあるAll in One SEOの入力をしてしまいましょう。
私がいつも入力しているのは、
- 投稿のメタ説明
- Facebookのメタ説明（基本的にGeneralで入力したものと同じにしています）
- Facebookで表示される画像
- Twitterのスイッチ ”ON”
- Twitterのカードタイプ
の設定です。
メタ説明以外は毎回同じにしていますので、何も考えることはありません。
メタ説明だけ160文字以内で要約して記述しています。
パーマリンク、カテゴリー、タグ設定
パーマリ記事が一通り完成し、SEOの設定が終了したら、次は記事に付随するカテゴリーやタグ、パーマリンクの設定を行います。
パーマリンク
パーマリンクは、記事毎に設定されるURLでドメイン以降の部分のことです。
例）このページのURL
記事を作成していて、下書き保存すると右のメニューの欄にパーマリンクの枠が表示され、その中に、自動で記事タイトルが日本語で入力された状態になります。
例）”ダイエット方法”という記事タイトルの場合
何も変更しなければ、上図の下側に表示されているURLとなります。
パーマリンク（ドメイン全体）は日本語のままでもいいのですが、ブラウザ以外では意味のない長い文字列に自動で変換されてしまったり、メールアドレスが作れない、使用できないサーバーがあるなどの理由からおすすめしません。
例）
日本語URL
https://bitarog.com/ダイエット方法/
☟ ☟ ☟
変換後https://bitarog.com/%e3%83%80%e3%82%a4%e3%82%a8%e3%83%83%e3%83%88%e6%96%b9%e6%b3%95/
パーマリンクは、英数字を使って記事の内容を意味する短い言葉にするといいでしょう。
右のメニューの中にある「パーマリンク」をクリックして、スラッグの部分を英数字に変更します。
カテゴリー
カテゴリーは関連する記事をまとめることができ、ブログでこれまで投稿してきた記事をカテゴリーごとに表示することができます。
簡単にいうと“いれもの“。パソコンで例えるとフォルダですかね。
フォルダには１つの名前がつきますが、それがいわゆるカテゴリーとなるわけです。
カテゴリーは投稿メニューのところであらかじめ設定していけば、記事編集画面の右メニューで選ぶことができます。
右メニューの例
階層を作ることもできますが、あまり複雑にしない方がいいでしょう。
タグ
タグはカテゴリーと少し違い、ブログ記事に関連するキーワードを言います。
ダイエットの記事であれば、
“方法”、“食事”、“運動”、“プロテイン” etc
1つの記事に複数のタグをつけることができますので、さしずめ付箋紙といったイメージでしょうか。
タグは記事中の重要なキーワードを表すのに使用されます。
タグを設定することで同じキーワードに関係する記事を見つけることができるようになりますが、タグだらけになると逆にわかりにくくなるので、１記事３つくらいまでを目安にするといいと思います。
右のメニュー欄で設定できます。
見直し、保存
これまでの作業が一通り終了したら、先頭の見出しから最後まで通して読んでみましょう。
記事を書いているときに気が付かなかった、文章のつながりや言い回しなどのおかしなところや、自分が伝えたい内容と微妙にずれている文章などに気が付くことがあります。
記事が出来たからとすぐに公開するのではなく、ひとまず落ち着いて読者目線で自分の書いた記事を読み返してみてください。
読みながら修正し、修正したら再度先頭から読み直す。
気が付く範囲で修正しましょう。
文章の見直しが終了したら、ページの見た目をチェックをします。
右上のプレビューをクリックして、公開状態でのページ表示の確認をしておきます。
この際、モバイル画面（スマホ）についても確認しましょう。
★ワンポイントアドバイス
見直しは記事を書いた翌日にするといいと思います。
少し時間をあけて見直しをすると頭がリセットされて、わりと客観的に判断できますし、冷静に文章を読むことができるので、いろいろ気が付くことがよくあります。
公開（予約投稿）
見直しまで完了したら、あとは公開です。
右上にある「公開」ボタンをクリックします。
その場で直ちに公開する場合は、
予約投稿する場合は、
予約投稿はカレンダーを見ながら日時設定するので、計画的な投稿と記事のストックに役立ちます。活用してみてください。
まとめ
いかがでしたでしょうか。
私の基本的な記事投稿のフローを例に、超初心者向けにブロックエディターの使い方を紹介しました。
私のやり方がベストではありません。
紹介していない機能もたくさんあります。
ブロックエディターで記事の投稿を行いながら、あなたなりの使い方を見つけていっていただければいいと思います。
練習あるのみ。
ブロックエディターはWordなどとは使い方が違うので初めは戸惑うと思います。
最初は時間がかかるかもしれませんが、少しずつでも慣れていけば、いずれ記事作成作業も効率よく行えるようになると思います。
めげずにチャレンジしてくださいね。
最後まで読んでいただきありがとうございました！
コメント
「超初心者向け！ブロックエディタの使い方」分かりやすかったです。ありがとうございました。