【Wordpress】ブロックエディタとクラシックエディタの違い

https://toreblog0928.com

ブログ

【WordPress】ブロックエディタとクラシックエディタの違い

この記事では、「Wordpressのブロックエディタとクラシックエディタの違い」を分かりやすく解説していきます。

  • エディタってなんですか?
  • ブロックエディタとクラシックエディタの違いは?
  • 切り替えはどうやればいいですか?

このような悩みを解決していきます。

このページでは

  • 完全初心者の方でも大丈夫
  • できる限りシンプルに
  • ブログに多い専門用語は使わず
  • 画像や図解を使いながら
  • 分かりやすく解説していきます

「エディタ…」

WordPressでブログを始めると、よく聞く言葉です。

ブログを始めたばかりの方や、Wordpressを使い始めたばかりの方にとって、新しい言葉が出てくるたびに…

ググる…

そしてこう思うのです…

WordPressって覚えることいっぱいあって大変じゃん…

いつになったらブログ書けるの…?

このような方のためにエディタの説明をしていきます。

この記事を書きながら、順を追って解説していきますので、最後まで見ると記事を書き始めてから書き終わりまでの流れを知ることができます!

この記事の内容

  • エディタとは
  • ブロックエディタとクラシックエディタの違い
  • 各エディタの切り替え方法
  • ブロックエディタ基本的な使い方

WordPressのエディタとは

【Wordpress】ブロックエディタとクラシックエディタの違い

WordPressでよく聞く「エディタ」とは、

WordPress独自の記事編集画面のことです。

WordPressのヘルプにはこのように記載されています。

”WordPress エディターはまったく新しいパブリッシング体験です。WordPress エディターを使用すると、メディアを駆使したページや投稿を作成し、簡単にレイアウトを管理できます。投稿やページのすべての要素にそれぞれのブロックができたため、テキスト、引用、画像の配置や構成を気にすることなく、作成に集中できます。”

WordPressサポートより引用

エディタ

  • エディタは記事編集画面と編集機能
  • 2種類のエディタがある
    ❶ブロックエディタ
    ❷クラシックエディタ
  • ブロックエディタはGutenBergとも呼ばれる

WordPressのクラシックエディタ

WordPress5.0以前の記事編集画面が

クラシックエディタです。

クラシック=旧タイプ

このように覚えておきましょう!

【Wordpress】ブロックエディタとクラシックエディタの違い

クラシックエディタの画面はこのようになっています。

【Wordpress】ブロックエディタとクラシックエディタの違い

記事のタイトル以外は、すべて一緒になっているのがクラシックエディタの特徴です。

WordやGoogleドキュメントのような使用感だと思っていただいて大丈夫です。

同じ箱の中に記事を書いていき、見出し文の設定をしたりする作業はあとから「書式設定」を使って変更をしていきます。

画像も文字と文字の間に「挿入」をしていく感じです。

テトリスみたいな感じです。

このような人には使いやすい

  • 記事はWordやGoogleドキュメントで書く
  • WordやGoogleドキュメントを一気に貼り付ける
  • あとから変更して記事を完成させる

WordPressのブロックエディタ

WordPress5.0以降の記事編集画面が

ブロックエディタです。

クラシック=新タイプ

別名をGutenBergとも言う

このように覚えておきましょう!

【Wordpress】ブロックエディタとクラシックエディタの違い

ブロックエディタの画面はこのようになっています。

クラシックエディタと比べて、記事編集用のパーツが増えました。

【Wordpress】ブロックエディタとクラシックエディタの違い

ブロックエディタの構成は、クラシックエディタと違います。

その名の通り、各項目が「小さなブロック」になっています。

全体で編集するクラシックエディタと違い、小さなブロックを組み立てながら記事を完成していくイメージです。

見出しや画像、本文はすべて小さなブロックです。

なので

ブロックの移動や削除も非常に簡単にできます。

クラシックエディタがテトリスなら、

ブロックエディタはマインクラフトです。

このような人には使いやすい

  • クラシックエディタを使ったことがない
  • WordやGoogleドキュメントは使わずに編集画面に記事を書き始める
  • 見返したときに配置の変更などを簡単に行いたい

ブロックエディタ基本的な使い方

ここからは、この記事を書く工程のスクリーンショットを使って解説をしていきます。

使用しているテーマによっては若干の違いがあるかもしれませんが、基本的な使い方は一緒です。

【Wordpress】ブロックエディタとクラシックエディタの違い

WordPressにアクセス > ダッシュボード画面を開く

※ダッシュボード画面の説明は別記事

【Wordpress】ブロックエディタとクラシックエディタの違い

投稿 > 新規追加

【Wordpress】ブロックエディタとクラシックエディタの違い

ブロックエディタが表示 > 記事の編集開始

【Wordpress】ブロックエディタとクラシックエディタの違い

記事となるブロックを作っていく

上の画像では6個のブロック

【Wordpress】ブロックエディタとクラシックエディタの違い

ブロックを作る「行」をクリック > 右側に「+」が表示 > 「+」をクリック

【Wordpress】ブロックエディタとクラシックエディタの違い

メニューボックスが展開 > 作りたいブロックを選択してクリック

メニューボックスにない場合 > 「すべて表示」をクリック

【Wordpress】ブロックエディタとクラシックエディタの違い

「すべて表示」をクリック > 左側にメニューボックスが展開

【Wordpress】ブロックエディタとクラシックエディタの違い

メニューボックス内の「画像」をクリック

【Wordpress】ブロックエディタとクラシックエディタの違い
【Wordpress】ブロックエディタとクラシックエディタの違い

「アップロード」をクリック > 写真を選択 > 「開く」をクリック

または

ドラッグアンドドロップにて写真をアップロード

記事を作成するために必要なパーツは、メニューボックスに格納されています。

この記事で使用しいるパーツは下記の通りです。

  • 見出し(h2・h3)
  • 本文
  • 画像
  • リスト(このような箇条書き)
  • ボックス
【Wordpress】ブロックエディタとクラシックエディタの違い

作成したブロックを編集する場合

編集するブロックをクリック > メニューバーが表示 > 編集したい項目を選択しクリック

右端の「・・・」をクリック > さらにメニューが展開 > 削除はこのメニューボックス内

エディタの切り替え方法

WordPressのエディタは、記事編集途中でもエディタを切り替えることができます。

【Wordpress】ブロックエディタとクラシックエディタの違い

編集画面左上「+」をクリック > 「クラシック」をクリック

これでクラシックエディタに変更されます

【Wordpress】ブロックエディタとクラシックエディタの違い

編集画面内のメニューバー > 「ブロックへ変換」をクリック

これでブロックエディタに戻ります

エディタの設定を変更する方法

デフォルトで表示されるエディタは、設定画面から変更することができます。

【Wordpress】ブロックエディタとクラシックエディタの違い

WordPressダッシュボード画面 > 設定 > 投稿設定

【Wordpress】ブロックエディタとクラシックエディタの違い

すべてのユーザーのデフォルトエディタ > 好きな方を選択 > 画面下の「変更を保存」をクリック

  • 旧エディター
  • ブロックエディター

投稿前の投稿設定

記事を書き終え、投稿できるようになりました。

投稿前に最低限確認するポイントが4つあります。
(※人によって違うのであくまでも参考として)

  • 記事内添付画像のAlt設定
  • パーマリンクの設定
  • カテゴリーとタグの設定
  • アイキャッチ画像の設定

ひとつずつ解説をしていきます。

記事内添付画像のAlt設定

記事内画像に説明文を設定しておくことで、画像検索時に表示される可能性があります。

簡単にできるコトなので、面倒くさがらずに1枚1枚の画像に説明を入力していきます。

【Wordpress】ブロックエディタとクラシックエディタの違い

画像をクリック > 右側にメニューボックスが展開 > 「Alt テキスト (代替テキスト)」に画像の説明文を入力

画像貼り付け時にAlt テキスト (代替テキスト)を入力してもいいですし、最後にまとめて入力してもいいです。

未入力・拾ってきた画像にもともと反映しているAlt テキスト (代替テキスト)のまま投稿するのは避けましょう!

パーマリンクの設定

「パーマリンク」とは、ブログの記事毎に設定されるURLのことです。

デフォルトでは記事のタイトルが設定されているため「日本語」で表記されてしまいます。

日本語表記のまま投稿すると、SNSでシェアしたときにURLリンクが文字崩れします。

「%だらけ」の表示になるため、必ず英語表記に修正していきます。

【Wordpress】ブロックエディタとクラシックエディタの違い

右側メニューボックス上部「投稿」をクリック > パーマリンク > URLスラッグに「記事のURLとして設定する英語を入力」

  • 初期表示は上の画面のようにタイトルが日本語表示される
  • 変更できない場合は「下書き保存」を一度クリックすると変更可能になります
【Wordpress】ブロックエディタとクラシックエディタの違い

英語表記の入力が完了 > 下に表示されるURLにも反映されたことを確認

カテゴリーとタグの設定

関連記事をまとめておくために、カテゴリーとタグの設定をしていきます。

  • カテゴリー・・・フォルダ
    → ひとつの記事にひとつだけ設定
  • タグ・・・ふせん
    → ひとつの記事に複数設定可能

このように覚えておけば大丈夫です!

【Wordpress】ブロックエディタとクラシックエディタの違い

カテゴリー > 記事のカテゴリーを選択しチェックボックスをクリック

タグ > 手入力または過去に使ったタグから選択しクリック

アイキャッチ画像の設定

4つ目は記事の顔となる「アイキャッチ画像」の設定です。

【Wordpress】ブロックエディタとクラシックエディタの違い

右のメニューボックス内「アイキャッチ画像」 > 「アイキャッチ画像を設定」をクリック

【Wordpress】ブロックエディタとクラシックエディタの違い

画像を選択しクリック

  • 代替えテキスト(Alt設定と同様)
  • タイトル
  • キャプション
  • 説明

4か所入力しますが、代替えテキストとタイトルだけでもOKです

【Wordpress】ブロックエディタとクラシックエディタの違い

「アイキャッチ画像」が反映

【大事!】投稿前に声に出して読み返す

ここまでで、記事の作成は完了です。

「よし!やっと終わった・・・」

で、

公開ボタンを押してはいけません!

なぜなら

  • 書いてるときには気が付かないこと
  • 書き終わってすぐには見つけられない違和感
  • 誤字や脱字

これらのミスが必ず1個はあります

ミスをそのままにして投稿するのは避けたいところ!

一旦「下書き保存」を押しましょう。

そして

少し休憩をしましょう。

少し休憩をしたら

声に出して読み返しをしましょう!

これは本当に大事なので絶対にやってください!

誤字脱字・違和感がある部分を修正したら完成です。

お疲れ様でした!!

まとめ

この記事では、「Wordpressのブロックエディタとクラシックエディタの違い」をまとめてきました。

この記事の内容

  • エディタとは
    ・Wordpress独自の記事編集画面と機能
  • ブロックエディタとクラシックエディタの違い
    ・古いエディタか新しいエディタかの違い
  • 各エディタの切り替え方法
    ・記事内でも切り替え可能
    ・デフォルト表示の変更は設定画面から
  • ブロックエディタ基本的な使い方

慣れるまでは少し大変ですが、数記事も書く間に使い方は自然に覚えていきます。

どんどん使いながら覚えていきましょう!

ネタに困らない記事ネタ400選

よく読まれている記事

コピーライティング7つのコツ 1

コピーライティング覚えられないんですけど… そんな人のために、この記事では… ライティングスキルがなくても 人の心に訴える 文章を作る(書く)7つのコツ について、紹介していきます。 とくに、Twit ...

ブログで毎月10,000円の収益を生み出す9ステップ 2

この記事では、ブログで収益化を生み出すためにやるべきことを9つのステップに分けて解説していきます。 ブログを書いているのに全然稼げない… 1円の売り上げもつかない… ASPサービスの紹介ばかりで書きた ...

【kindle10冠&ベストセラー】反響を得るためにやったすべてのコト 3

たくさんの人の支えをいただき、自身が出版した【分かりやすい文章に変える40のコツ】、kindleストアで10冠&ベストセラーを達成しました。 この記事では、kindleストアでランキング上位を獲るため ...

【月々200円】通常1,500円の有料版Canva Proを5人でシェアしてお得に使う方法 4

この記事では、【有料版のCanva Proを5人でシェアしてお得に使う方法】を解説していきます。 無料版のCanvaでは物足りない… 有料版を使いたいけど1,500円は高い… お得に使える方法はないで ...

【Googleが掲げる10の事実】理解し実践することが一番有効なSEO対策 5

SEO対策は、なにをどうしたらいいですか?そもそもSEOってなんですか…? 多くのブロガーが悩まされる根源 それが… SEO この記事では、SEO対策の基本中の基本となる【 Googleが掲げる10の ...

-ブログ
-,