WordPressブロックエディター記事更新マニュアル 初心者向け完全ガイド

WordPressでブログを始めたばかりで、ブロックエディターの使い方に戸惑っていませんか?実はブロックエディターは、HTMLやCSSの知識がなくても直感的に記事を作成できる優れたツールです。この記事では、WordPress初心者の方でもすぐに記事更新ができるように、ブロックエディターの基本から応用まで画像付きで丁寧に解説します。

ブロックエディター(Gutenberg)とは

ブロックエディターは2018年12月にWordPress5.0から標準搭載されたエディタ機能で、文章や画像などのまとまりをブロック単位で管理できます。各要素を独立したブロックとして扱うことで、レイアウトの変更や順序の入れ替えが簡単に行えるのが特徴です。

ブロックエディターのメリット

  • HTMLやCSSの専門知識が不要で直感的に操作できる
  • 文章や画像の配置変更がドラッグ&ドロップで簡単
  • 定型文やパターンを登録して効率的に記事作成
  • レイアウトの自由度が高く、デザイン性の高いページが作れる

クラシックエディターとの違い

クラシックエディターは文章全体を一つのまとまりとして編集しますが、ブロックエディターは見出しや段落、画像などをそれぞれ独立したブロックとして管理します。WordPressの開発はブロックエディターを中心に進められているため、これから始める方はブロックエディターの使用をおすすめします。

記事を公開するまでのステップ

WordPressのブロックエディターで記事を公開するまでの基本的な流れを解説します。

新規投稿を作成する

WordPressダッシュボードの左メニューから「投稿」→「新規投稿を追加」をクリックします。または画面上部の「+新規」ボタンからも新規投稿を作成できます。

エディタ画面上部の「タイトルを追加」と表示されている部分をクリックして、記事のタイトルを入力しましょう。タイトルは32〜40文字程度で、キーワードを左寄せで含めるのがSEO的に効果的です。

ブロックを追加しながら記事本文を作成します。

投稿設定を行う

記事本文の作成が完了したら、公開前に必要な設定を行います。

パーマリンクの設定

画面右側の設定サイドバーにある「URL」の項目から、パーマリンクを英語表記に変更します。日本語のままだと文字化けしてしまうため、必ず英数字とハイフンで構成されたURLに設定してください。

カテゴリーの選択

関連する記事をグループ化するために、適切なカテゴリーを選択します。1記事につき1つのカテゴリーを設定するのが基本です。

アイキャッチ画像の設定

アイキャッチ画像は記事一覧ページなどでサムネイルとして表示される重要な要素です。設定サイドバーの「アイキャッチ画像」から、記事の内容を表す画像を設定しましょう。

プレビューで確認して記事を公開する

画面右上の「プレビュー」ボタンをクリックして、実際の表示を確認します。エディタ画面と実際のブログでは表示が異なることがあるため、必ずプレビューで確認することをおすすめします。

すべての設定が完了したら、画面右上の「公開」ボタンをクリックします。確認画面が表示されるので、もう一度「公開」をクリックすれば記事が公開されます。

ブロックエディターの画面構成

ブロックエディターの画面は大きく3つのエリアに分かれています。

ヘッダーメニューバー

画面上部のメニューバーには、ブロックの追加や下書き保存、公開などのボタンが並んでいます。

主な機能:

  • ブロック追加(+ボタン)
  • 元に戻す/やり直し
  • リストビュー(記事全体の構造を確認)
  • 下書き保存
  • プレビュー
  • 公開

執筆エリア(中央)

記事本文を執筆するメインのエリアです。ブロックを追加しながら記事を作成していきます。

設定サイドバー(右側)

記事全体の設定や、選択したブロックの詳細設定を行うエリアです。

投稿タブで設定できる項目:

  • パーマリンク
  • カテゴリー
  • タグ
  • アイキャッチ画像
  • 抜粋
  • ディスカッション(コメント設定)

ブロックタブで設定できる項目:

  • 選択中のブロックの詳細設定
  • 文字色や背景色
  • フォントサイズ
  • 余白の調整

ブロックの基本操作マスター

ブロックエディターを使いこなすための基本操作を解説します。

ブロックの追加方法

エディタ画面左上の「+」ボタンをクリックすると、ブロック一覧が表示されます。検索機能を使えば、目的のブロックをすぐに見つけられます。

よく使うブロックの種類:

  • 段落:通常のテキスト入力
  • 見出し:h2〜h6の見出し
  • 画像:画像の挿入
  • リスト:箇条書きや番号付きリスト
  • 引用:引用文の表示
  • ボタン:リンクボタンの作成

ブロックの移動

ブロックを選択すると表示される上下の矢印ボタンで、ブロックの位置を移動できます。ドラッグ&ドロップでも移動可能です。

ブロックの複製

ブロックツールバーの詳細メニュー(三点リーダー)から「複製」を選択すると、同じ設定のブロックをコピーできます。装飾を施したブロックを再利用したい場合に便利です。

ブロックの削除

ブロックを選択して詳細メニューから「削除」を選択するか、Backspaceキーで削除できます。

ブロックの変換

段落ブロックを見出しに変換したり、リストに変換したりと、ブロックタイプを変更できます。ブロックツールバーのアイコンをクリックして、変換したいブロックタイプを選択してください。

パターン(再利用ブロック)の活用

よく使うブロックの組み合わせは、パターンとして保存できます。詳細メニューから「パターン/再利用ブロックの作成」を選択し、名前を付けて保存すれば、他の記事でも呼び出して使えます。

文字装飾の基本テクニック

読みやすい記事を作るための文字装飾方法を紹介します。

太字(ボールド)

強調したいテキストを選択して、ツールバーの「B」ボタンをクリックすると太字になります。または選択後にCtrl+B(Mac:Command+B)のショートカットも使えます。

文字色の変更

文字を選択した状態で、設定サイドバーの「ハイライト」から「テキスト」の色を選択できます。ただし、色を使いすぎると逆に読みにくくなるため、重要な部分にのみ使用しましょう。

リンクの挿入

リンクを設定したいテキストを選択し、ツールバーのリンクアイコンをクリックします。URLを入力して確定すれば、リンクが設定されます。

リストの作成

箇条書きリストや番号付きリストは、「リスト」ブロックを使用します。通常の段落から変換することも可能です。

画像の挿入と編集

ビジュアル的に魅力的な記事を作るための画像挿入方法を解説します。

画像ブロックの追加

「+」ボタンから「画像」ブロックを選択し、「アップロード」「メディアライブラリ」「URLから挿入」のいずれかの方法で画像を追加します。

画像挿入の3つの方法:

  1. アップロード:PCから新しい画像をアップロード
  2. メディアライブラリ:すでにアップロード済みの画像を選択
  3. URLから挿入:外部URLの画像を直接指定

画像サイズの調整

画像を選択すると、角や辺にハンドルが表示されます。ドラッグすることでサイズを自由に変更できます。設定サイドバーから数値で指定することも可能です。

代替テキスト(Altテキスト)の設定

画像が表示できない場合の代替テキストや、SEO対策として重要なAltテキストを設定しましょう。設定サイドバーの「代替テキスト」欄に、画像の内容を説明する文章を入力します。

アイキャッチ画像の設定

設定サイドバーの「アイキャッチ画像を設定」をクリックすると、画像追加時と同じように、「アップロード」「メディアライブラリ」が表示されます。アップされている画像を選ぶか、新しくアップロードして設定します。

ブログやサイトの記事一覧を見たとき、記事のタイトルの横に小さな画像が表示されているのがアイキャッチ画像です。記事の内容をパッと見て伝える役割があり、これを設定することで、クリックされやすくなります。

応用的なブロック活用術

記事のクオリティを上げるための応用テクニックを紹介します。

テーブル(表)の挿入

「+」ボタンから「テーブル」ブロックを選択し、列数と行数を指定してテーブルを作成できます。データを整理して見やすく表示したい場合に便利です。

カラムレイアウトの作成

「カラム」ブロックを使用すると、画面を複数の列に分割して、テキストや画像を横並びに配置できます。50/50や30/70などのレイアウトパターンを選択できます。

YouTube動画の埋め込み

YouTubeの共有URLをコピーし、エディタに直接貼り付けるだけで動画を埋め込めます。「YouTube」ブロックを使用する方法もあります。

グループブロックの活用

複数のブロックをグループ化することで、まとめて装飾や移動ができます。グループ化したいブロックを選択し、ツールバーから「グループ」を選択します。

下書き保存とリビジョン管理

記事作成中のデータを守るための機能を理解しましょう。

自動保存機能

WordPressには自動保存機能が標準で備わっており、編集中のデータは定期的に自動で保存されます。万が一ブラウザがクラッシュしても、直前の状態から復元できます。

手動での下書き保存

画面右上の「下書き保存」ボタンをクリックすると、その時点の状態がリビジョンとして記録されます。重要な変更を加える前には、手動で下書き保存しておくと安心です。

まとめ

WordPressのブロックエディターは、最初は戸惑うかもしれませんが、基本操作を理解すれば誰でも簡単に魅力的な記事を作成できます。

この記事で解説したポイントをおさらいしましょう:

  • ブロックエディターは要素をブロック単位で管理する直感的なツール
  • 記事公開まで簡単完結
  • 基本操作をマスターすれば効率的に記事作成できる

まずは実際に記事を作成しながら、少しずつブロックエディターに慣れていきましょう。この記事をブックマークして、分からないことがあればいつでも見返せるようにしておくことをおすすめします。

WordPress初心者の方でも、このマニュアルに従って操作すれば、すぐに記事更新ができるようになります。ぜひ積極的にブロックエディターを活用して、魅力的なブログ記事を作成してください。