この記事では、「Wordpressのブロックエディタとクラシックエディタの違い」を分かりやすく解説していきます。
- エディタってなんですか？
- ブロックエディタとクラシックエディタの違いは？
- 切り替えはどうやればいいですか？
このような悩みを解決していきます。
このページでは
- 完全初心者の方でも大丈夫
- できる限りシンプルに
- ブログに多い専門用語は使わず
- 画像や図解を使いながら
- 分かりやすく解説していきます
「エディタ…」
WordPressでブログを始めると、よく聞く言葉です。
ブログを始めたばかりの方や、Wordpressを使い始めたばかりの方にとって、新しい言葉が出てくるたびに…
ググる…
そしてこう思うのです…
WordPressって覚えることいっぱいあって大変じゃん…
いつになったらブログ書けるの…？
このような方のためにエディタの説明をしていきます。
この記事を書きながら、順を追って解説していきますので、最後まで見ると記事を書き始めてから書き終わりまでの流れを知ることができます！
この記事の内容
- エディタとは
- ブロックエディタとクラシックエディタの違い
- 各エディタの切り替え方法
- ブロックエディタ基本的な使い方
WordPressのエディタとは
WordPressでよく聞く「エディタ」とは、
WordPress独自の記事編集画面のことです。
WordPressのヘルプにはこのように記載されています。
”WordPress エディターはまったく新しいパブリッシング体験です。WordPress エディターを使用すると、メディアを駆使したページや投稿を作成し、簡単にレイアウトを管理できます。投稿やページのすべての要素にそれぞれのブロックができたため、テキスト、引用、画像の配置や構成を気にすることなく、作成に集中できます。”
WordPressサポートより引用
エディタ
- エディタは記事編集画面と編集機能
- 2種類のエディタがある
❶ブロックエディタ
❷クラシックエディタ - ブロックエディタはGutenBergとも呼ばれる
WordPressのクラシックエディタ
WordPress5.0以前の記事編集画面が
クラシックエディタです。
クラシック＝旧タイプ
このように覚えておきましょう！
クラシックエディタの画面はこのようになっています。
記事のタイトル以外は、すべて一緒になっているのがクラシックエディタの特徴です。
WordやGoogleドキュメントのような使用感だと思っていただいて大丈夫です。
同じ箱の中に記事を書いていき、見出し文の設定をしたりする作業はあとから「書式設定」を使って変更をしていきます。
画像も文字と文字の間に「挿入」をしていく感じです。
テトリスみたいな感じです。
このような人には使いやすい
- 記事はWordやGoogleドキュメントで書く
- WordやGoogleドキュメントを一気に貼り付ける
- あとから変更して記事を完成させる
WordPressのブロックエディタ
WordPress5.0以降の記事編集画面が
ブロックエディタです。
クラシック＝新タイプ
別名をGutenBergとも言う
このように覚えておきましょう！
ブロックエディタの画面はこのようになっています。
クラシックエディタと比べて、記事編集用のパーツが増えました。
ブロックエディタの構成は、クラシックエディタと違います。
その名の通り、各項目が「小さなブロック」になっています。
全体で編集するクラシックエディタと違い、小さなブロックを組み立てながら記事を完成していくイメージです。
見出しや画像、本文はすべて小さなブロックです。
なので
ブロックの移動や削除も非常に簡単にできます。
クラシックエディタがテトリスなら、
ブロックエディタはマインクラフトです。
このような人には使いやすい
- クラシックエディタを使ったことがない
- WordやGoogleドキュメントは使わずに編集画面に記事を書き始める
- 見返したときに配置の変更などを簡単に行いたい
ブロックエディタ基本的な使い方
ここからは、この記事を書く工程のスクリーンショットを使って解説をしていきます。
使用しているテーマによっては若干の違いがあるかもしれませんが、基本的な使い方は一緒です。
WordPressにアクセス ＞ ダッシュボード画面を開く
※ダッシュボード画面の説明は別記事
投稿 ＞ 新規追加
ブロックエディタが表示 ＞ 記事の編集開始
記事となるブロックを作っていく
上の画像では6個のブロック
ブロックを作る「行」をクリック ＞ 右側に「＋」が表示 ＞ 「＋」をクリック
メニューボックスが展開 ＞ 作りたいブロックを選択してクリック
メニューボックスにない場合 ＞ 「すべて表示」をクリック
「すべて表示」をクリック ＞ 左側にメニューボックスが展開
メニューボックス内の「画像」をクリック
「アップロード」をクリック ＞ 写真を選択 ＞ 「開く」をクリック
または
ドラッグアンドドロップにて写真をアップロード
記事を作成するために必要なパーツは、メニューボックスに格納されています。
この記事で使用しいるパーツは下記の通りです。
- 見出し（h2・h3）
- 本文
- 画像
- リスト（このような箇条書き）
- ボックス
作成したブロックを編集する場合
編集するブロックをクリック ＞ メニューバーが表示 ＞ 編集したい項目を選択しクリック
右端の「・・・」をクリック ＞ さらにメニューが展開 ＞ 削除はこのメニューボックス内
エディタの切り替え方法
WordPressのエディタは、記事編集途中でもエディタを切り替えることができます。
編集画面左上「＋」をクリック ＞ 「クラシック」をクリック
これでクラシックエディタに変更されます
編集画面内のメニューバー ＞ 「ブロックへ変換」をクリック
これでブロックエディタに戻ります
エディタの設定を変更する方法
デフォルトで表示されるエディタは、設定画面から変更することができます。
WordPressダッシュボード画面 ＞ 設定 ＞ 投稿設定
すべてのユーザーのデフォルトエディタ ＞ 好きな方を選択 ＞ 画面下の「変更を保存」をクリック
- 旧エディター
- ブロックエディター
投稿前の投稿設定
記事を書き終え、投稿できるようになりました。
投稿前に最低限確認するポイントが4つあります。
（※人によって違うのであくまでも参考として）
- 記事内添付画像のAlt設定
- パーマリンクの設定
- カテゴリーとタグの設定
- アイキャッチ画像の設定
ひとつずつ解説をしていきます。
記事内添付画像のAlt設定
記事内画像に説明文を設定しておくことで、画像検索時に表示される可能性があります。
簡単にできるコトなので、面倒くさがらずに1枚1枚の画像に説明を入力していきます。
画像をクリック ＞ 右側にメニューボックスが展開 ＞ 「Alt テキスト (代替テキスト)」に画像の説明文を入力
画像貼り付け時にAlt テキスト (代替テキスト)を入力してもいいですし、最後にまとめて入力してもいいです。
未入力・拾ってきた画像にもともと反映しているAlt テキスト (代替テキスト)のまま投稿するのは避けましょう！
パーマリンクの設定
「パーマリンク」とは、ブログの記事毎に設定されるURLのことです。
デフォルトでは記事のタイトルが設定されているため「日本語」で表記されてしまいます。
日本語表記のまま投稿すると、SNSでシェアしたときにURLリンクが文字崩れします。
「％だらけ」の表示になるため、必ず英語表記に修正していきます。
右側メニューボックス上部「投稿」をクリック ＞ パーマリンク ＞ URLスラッグに「記事のURLとして設定する英語を入力」
- 初期表示は上の画面のようにタイトルが日本語表示される
- 変更できない場合は「下書き保存」を一度クリックすると変更可能になります
英語表記の入力が完了 ＞ 下に表示されるURLにも反映されたことを確認
カテゴリーとタグの設定
関連記事をまとめておくために、カテゴリーとタグの設定をしていきます。
- カテゴリー・・・フォルダ
→ ひとつの記事にひとつだけ設定 - タグ・・・ふせん
→ ひとつの記事に複数設定可能
このように覚えておけば大丈夫です！
カテゴリー ＞ 記事のカテゴリーを選択しチェックボックスをクリック
タグ ＞ 手入力または過去に使ったタグから選択しクリック
アイキャッチ画像の設定
4つ目は記事の顔となる「アイキャッチ画像」の設定です。
右のメニューボックス内「アイキャッチ画像」 ＞ 「アイキャッチ画像を設定」をクリック
画像を選択しクリック
- 代替えテキスト（Alt設定と同様）
- タイトル
- キャプション
- 説明
4か所入力しますが、代替えテキストとタイトルだけでもOKです
「アイキャッチ画像」が反映
【大事！】投稿前に声に出して読み返す
ここまでで、記事の作成は完了です。
「よし！やっと終わった・・・」
で、
公開ボタンを押してはいけません！
なぜなら
- 書いてるときには気が付かないこと
- 書き終わってすぐには見つけられない違和感
- 誤字や脱字
これらのミスが必ず1個はあります
ミスをそのままにして投稿するのは避けたいところ！
一旦「下書き保存」を押しましょう。
そして
少し休憩をしましょう。
少し休憩をしたら
声に出して読み返しをしましょう！
これは本当に大事なので絶対にやってください！
誤字脱字・違和感がある部分を修正したら完成です。
お疲れ様でした！！
まとめ
この記事では、「Wordpressのブロックエディタとクラシックエディタの違い」をまとめてきました。
この記事の内容
- エディタとは
・Wordpress独自の記事編集画面と機能 - ブロックエディタとクラシックエディタの違い
・古いエディタか新しいエディタかの違い - 各エディタの切り替え方法
・記事内でも切り替え可能
・デフォルト表示の変更は設定画面から - ブロックエディタ基本的な使い方
慣れるまでは少し大変ですが、数記事も書く間に使い方は自然に覚えていきます。
どんどん使いながら覚えていきましょう！
