MENU

固定ページ・投稿の編集画面「ブロックエディタ」の基本

WordPressの固定ページ・投稿を編集する際の編集画面、ブロックエディタの各名称を解説します。

ここで解説している内容は、「固定ページ・投稿」共通の内容になります。

目次

編集画面の基本となる各エリアについて

ブロックエディタ編集画面は以下の4つのエリアに大きく分けられます。

  • トップバー(左)
  • トップバー(右)
  • タイトルと本文
  • 設定パネル
  • ブロックナビゲーション

以下に詳しく解説します。

1. トップバー「左」

編集画面の最上部左側にあるエリアです。このエリアでは以下の操作が可能です。

  • 投稿一覧に戻る
  • ブロックツール挿入を切り替え
  • 編集・選択の切り替え
  • もとに戻す・やり直す
  • ブロックのリスト表示

以下に詳しく解説します。

1. 投稿一覧に戻る

現在編集しているページの投稿一覧ページに移動します。

2. ブロックツール挿入を切り替え

ブロックの一覧を表示できます。

本文中の「」ボタンをクリックして表示される「すべて表示」と同様です。

3. 編集・選択の切り替え

ツールでは、ブロックの選択、ナビゲーション、編集に異なる操作方法が提供されます。「Escape」キーと「Enter」キーを押すことで「選択」と「編集」が切り替わります。

4. もとに戻す・やり直す

PC操作でもよく使用される作業を1つ前に戻す際に使用します。使用頻度の高い操作のためショートカットキーを覚えておくとよいでしょう。

Windows:Ctrl+Z

5.ブロックのリスト表示

コンテンツエリアのすべてのブロックを詳細に表示してくれます。ブロックの階層構造もわかるだけでなく、一覧からブロックの選択、移動、削除などの操作も可能です。

トップバー「右」

編集画面の最上部右側にあるエリアです。このエリアでは以下の操作が可能です。

  • 下書き保存・自動保存の表示
  • プレビュー
  • 公開・更新
  • 「設定」パネルの表示・非表示
  • オプション

1. 下書き保存

「下書き保存」で公開前の記事を保存できます。

その他に、自動保存や保存されたことを通知する表示がされます。

2. プレビュー

投稿を編集している際に、実際に公開される内容がどのように表示されるかをリアルタイムで確認できる機能です。これにより、テキストのフォーマット、画像の配置、リンクの動作などを事前に確認し、公開前に必要な修正を行うことができます。

3. 公開・更新ボタン

公開ボタンは、投稿内容を最終的にウェブサイト上で公開するためのボタンです。これにより、作成した投稿が他のユーザーに見えるようになります。

公開後は、表示が「更新」となります。修正内容を公開に反映する際は「更新」をクリックしてくださ。

4.「設定」パネルの表示・非表示

編集画面の右サイドに表示される「設定」パネルを表示・非表示。

「設定」パネルでは、「固定ページ・投稿」と「ブロック」の詳細な設定を行うことができます。上部のタブを選択して表示を切り替えます。

5. オプション

このオプション画面では、編集作業を効率化するための設定ができます。モードで特定の部分に集中して作業したり、フルスクリーンモードで作業エリアを広げたりできます。ビジュアルエディターで簡単に編集したり、コードエディターで細かいカスタマイズも可能です。

3. タイトルと本文

タイトルは読者が最初に目にする部分で、興味を引くかどうかを決める重要な要素です。投稿内容を簡潔に伝え、読者に何が書かれているかを示します。

本文は、ブログやニュース記事の主要なエリアです。この部分はブロックエディタを使用して作成され、段落、見出し、画像などのブロックを追加し、編集できます。

4. 設定パネル

編集画面の右側に位置する設定パネルは、投稿の管理に不可欠なツールです。このパネルは、「投稿 or 固定」、「ブロック」という2つの主要なタブに分かれており、それぞれのタブには異なる機能が備わっています。

「投稿/固定」タブでは、記事の公開の設定やアイキャッチ画像、カテゴリーの選択など、投稿に直接関連する多くの設定を行うことができます。

次に、「ブロック」タブでは、記事内で使用する各種ブロック(段落、画像、リストなど)の設定が可能です。ブロックごとに用意された細かなスタイル調整でカスタマイズが可能です。

5. ブロックナビゲーション

選択中のブロック位置を確認できます。複数のブロックで入れ子にしている際に、確認するのに便利です。

例)ボックスブロックで段落を囲んでいる場合

投稿 > ボックス > 段落

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次