ブロックエディタ

WordPress 5.0 以降に搭載されている「ブロックエディタ」および WordPress 4.9 以前の「クラシックエディタ」の特徴・使い方に関して説明します。

WP 5.0 以降のバージョンでは、記事編集画面のエディタに大きな仕様変更が加えられています。

全く新しいエディタである「ブロックエディタ」が搭載されました。新しいブロックエディタでは、今までにない新機能が多数搭載され、高機能なエディタを利用できます。

ブロックエディタは操作方法に少し癖があります。上達方法は実際に使ってみて慣れるしかありません。ブロックエディタを使って記事を書いてみましょう。

はじめに

必要に応じてエディタを使い分ける

初心者

現在、WordPressには2種類のエディタが存在します。
それぞれ特徴・操作方法が異なります。必要に応じて使い分けて利用しましょう。

初めてWordPressを利用する方は、新しい「ブロックエディタ」の利用をお勧めします。

もし、あなたが「ブロックエディタ」を使いにくいと感じる場合は、下記で紹介するプラグインを活用して、以前のエディタを利用することができます。

賛否両論あり

初心者

記事編集画面の操作方法が以前のエディタと大きく変わっており、以前のエディタに慣れている方が操作方法で戸惑うことも多いようです。

高機能で将来性のあるエディタではありますが、現状では賛否両論があり、評価が分かれるエディタです。

まだ発展途上の段階でもあり、今後の発展に期待しましょう。

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

ブロックエディタは「WordPress 5.0」以降に搭載される新しいエディタです。

ブロックエディタ ブロックを積み重ねるように、柔軟に記事の内容を編集できます。
高機能である反面、操作性が他のエディタと異なります。
コードエディタ コード(HTML)を手動で編集したい方向けのエディタです。
ブロックエディタ

ブロックエディタ

コードエディタの切り替え

ブロックエディタからコードエディタへの切り替えは、右側のアイコンをクリックすると表示されるメニューから切り替えることができます。

エディタの切り替え

クラシックエディタについて

クラシックエディタは「WordPress 4.9」以前の旧エディタです。

ビジュアルエディタ 視覚的に記事の内容を見ながら編集できるエディタです。
「Microsoft Word」のような感じで記事を編集できます。
テキストエディタ テキスト・HTML・CSSを手動で編集したい方向けのエディタです。
クラシックエディタ

ビジュアルエディタ

テキストエディタの切り替え

ビジュアルエディタからテキストエディタへの切り替えは、エディタの右上にある「タブ」をクリックすることで切り替えることができます。

ブロックエディタの基本

初心者

ブロックエディタは「WordPress 5.0」以降に搭載されている新しいエディタです。

新しい「ブロックエディタ」では、今までにない新機能が多く搭載されています。ブロックを積み重ねるように、柔軟に記事の内容を編集できるのが特徴です。

基本的な使い方

ブロックエディタの基本的な操作方法は、記事の中にブロックを積み重ねるようにブロックを追加・編集して記事を作成します。

記事の中に追加したブロックは、ブロックごとに移動・編集・削除ができます。

エディタの「画面上部・画面左側」には、選択したブロックの設定項目が表示されます。必要に応じて設定を調整して下さい。

ブロックエディタ

ブロックエディタ

ブロックエディタの表示モード

ブロックエディタの表示モードは3種類用意されています。
表示モードは組み合わせて利用できます。自分好みにエディタを調整して利用しましょう。

トップツールバー

右上のメニューから「トップツールバー」を選択すると、エディタの上部にツールバーが固定表示されます。トップツールバーを利用すると、ブロックやテキストを編集できます。

トップツールバーの固定表示

ブロックツールバー

右上のメニューから「トップツールバー」の選択を解除すると、ツールバーが選択中のブロックごとに表示されます。ブロックツールバーを利用すると、ブロックやテキストを編集できます。

ブロックツールバーの表示

スポットライトモード

右上のメニューから「スポットライトモード」を選択すると、選択中のブロック以外が薄い色になり、選択中のブロックが強調された状態になります。

この機能は選択中のブロックを強調することで、選択中のブロックの編集に集中できるように補助する機能です。

スポットライトモード

フルスクリーンモード

右上のメニューから「フルスクリーンモード」を選択すると、ブロックエディタが全画面表示になり、気が散る要素を非表示にします。集中して文章を書きたい場合に役立つ機能です。

フルスクリーンモード

編集中のHTML

ブロックエディタ編集中のHTMLは「コードエディタ」から確認できます。
編集中のHTMLには下記のようなコメントタグが含まれています。
このコメントタグはブロックエディタの制御に利用されます。絶対に削除しないで下さい。

コードエディタの見本

出力されるHTMLの見本

ブロックの追加

ブロックエディタのブロックは、エディタの上部にある追加アイコンをクリックすると、追加するブロックの種類が表示されます。ブロックの種類を選んで記事に挿入します。

ブロックの追加画面

ブロックの追加画面

一般ブロック

一般的なブログで利用される要素が予め用意されています。

一般ブロック

段落 文章を配置する際に利用します。
Pタグで囲った文章のHTMLが出力されます。
見出し 見出しを配置する際に利用します。
H1〜H6タグで囲った見出しのHTMLが出力されます。
画像 画像・説明文を配置する際に利用します。
IMGタグのHTMLが出力されます。
カバー テキストオーバーレイを含む画像・動画を表示できます。
記事の先頭などで利用するのに最適です。
ギャラリー 複数の画像をギャラリーのように表示する際に利用します。
リスト 文章を箇条書きで表示したい場合に利用します。
引用 引用文・引用元を表示したい場合に利用します。
音声 MP3などの音声ファイルを配置したい場合に利用します。
動画 MP4などの動画ファイルを配置したい場合に利用します。
ファイル PDFなどのファイルをダウンロードさせるリンクを配置したい場合に利用します。
フォーマット

様々な形式の要素を配置できます。

フォーマット

コード HTML・JavaScriptなどのソースコードを記事に表示するためのコードスニペットです。
クラシック クラシックエディタで記事を書けるブロックです。
カスタムHTML 入力したHTMLをそのまま出力するブロックです。
整形済みテキスト PREタグで囲まれたテキストが出力されます。
スペース・改行などを含んだテキストを、そのまま等幅フォントで表示します。
プルクオート 視覚的強調を加えた引用文を表示できます。
表(TABLE)を作成できます。
表の形式で情報を表示したい場合に利用します。
詩・歌詞などを引用文として表示する際に利用します。
レイアウト要素

記事のレイアウトに関連する要素を配置できます。

レイアウト要素

ページ区切り 記事を複数のページに分けて表示します。
ボタン リンクをボタンのようなスタイルで表示します。
リンクのテキストを視覚的に強調する効果があります。
カラム 記事本文を複数のカラムで縦方向に分割表示できます。
グループ 複数のブロックをグループ化できます。
メディアと文章 画像と文章を横並びで表示できます。
続きを読む このブロックより前に配置されたコンテンツをアーカイブページの抜粋に表示します。
区切り 水平の区切りを配置できます。
コンテンツの区切りとして利用します。
スペーサー ブロックとブロックの間に高さを調整可能な余白を追加できます。
ウィジェット

WordPressのウィジェット機能の要素を記事に配置できます。

ウィジェット

埋め込み

様々なソーシャルメディア(SNSなど)に対応する埋め込み機能(EMBED)を記事に配置できます。

埋め込み

クラシックエディタの基本

初心者

「Classic Editor」のプラグインを利用することで「WordPress5.0」以降から搭載されている「ブロックエディタ」を無効化して、以前のクラシックエディタ(ビジュアルエディタ&テキストエディタ)を利用可能にできます。

このプラグインはWordPressの開発元が提供している公式プラグインです。少なくとも2022年まで、またはそれ以降も必要な限り、完全にサポート・保守される予定なので、安心して利用できます。

プラグインの使い方に関しては、下記の記事をご覧下さい。

参考記事

Classic Editor – 記事編集エディタを旧エディタに戻せるWPプラグイン

エディタの切り替え

「Classic Editor」のプラグインを利用すると、ブロックエディタの画面からクラシックエディタに切り替えることができます。

もし、クラシックエディタを使いたい場合は、必要に応じてエディタを切り替えて使い分けることもできます。

ブロックエディタからの切り替え

ブロックエディタからの切り替え

クラシックエディタからの切り替え

クラシックエディタからの切り替え

次の記事

ブロックエディタの使い方に関しては、次の記事で詳しく説明しています。

ブロックエディタの実践的な使い方