【図解あり】WordPress(ワードプレス)ブロックエディタの使い方

  • 2022.04.02

この記事はこんな方に役立ちます!
  • WordPress管理画面へログインする方法が知りたい
  • ブロックエディタでできることが知りたい
  • タイトル・文字・画像の入力方法を知りたい
  • まずは、記事を投稿したい

ブロックエディタってなあに?

ブロックエディタ(Gutenberg-グーテンベルグ-)は、WordPress(ワードプレス)で記事を書くための投稿ツールです。ブロックを積み上げていくように文字や画像などをレイアウトしていくのでブロックエディタと言われています。

WordPress5.0から標準搭載された新エディタで、HTMLやCSSといった専門的な知識がなくてもページが作れます。慣れる必要はありますがより直感的に操作できるようになりました。今後は、主流になると思われるので今のうちに慣れておくと良いと思います。

ブロックエディタでできることー機能一覧ー

上部ツールバー

  1. 管理画面(ダッシュボード)へ戻る
  2. ブロックの表示
  3. ブロックの選択、ナビゲーション、編集に異なる操作方法が提供されます。「Escape」キーと「Enter」キーを押すことで「選択」と「編集」が切り替わります。
  4. 元に戻す
  5. やり直す
  6. 文字数やタイトル数、文章の概要などが表示されます
  7. 文章で使用しているブロックがリスト表示されます
  8. 下書き保存 【重要】記事を書いていく時はこまめに保存しましょう!
  9. 公開前にページを確認できます
  10. 公開
  11. 右ツールバー表示、非表示 投稿やブロックの設定を行います
  12. タイトル分析 ※All inone seoプラグインが入っていると表示されます
  13. 検索結果表示 ※All inone seoプラグインが入っていると表示されます
  14. オプション 編集画面の設定が行えます

メインエリア

記事編集スペースです。各ブロックの見え方や配置を確認しながら進めることができます。あらかじめタイトルブロックと段落ブロックが配置されています。

右ツールバー

ブロックエディタ 右ツールバー

投稿や各ブロックの編集ができます。作成している文書全体の編集メニューが表示されます。投稿タグは、「カテゴリー」や「アイキャッチ画像」などの設定ができます。またブロックを選択しているときは、ブロックタブ内のメニューが表示されます。「文字の大きさ」「文字の色」などの設定ができます。

慣れてきたら編集機能を拡張するプラグインを導入すると、より幅の広い表現ができるようになります。

おすすめプラグイン

useful blocks

痒いところに手が届く使いやすいプラグインです

VK Blocks

シンプルな機能ながら必要なブログ装飾の機能を備えています

記事を投稿してみよう

記事を投稿するには、WordPressの管理画面(ダッシュボード)にログインする必要があります。

いつでもログインしやすいようにログイン情報(ユーザー名とパスワード)は入力しやすい状態にしておくと良いと思います。

WordPressにログインする

  1. ユーザー名またはメールアドレスを入力します
  2. ログインボタンをクリックすると管理画面(ダッシュボード)が表されます

管理画面のURLについて

https://〇〇〇〇〇〇〇〇.com /wp-admin

「https://〇〇〇〇〇〇〇〇.com /」まではご自身のサイトのURLになります。

黄色いアンダーラインが引いてある「wp-admin」は管理画面共通の部分になります。

なので、ご自身のサイトURLのうしろに「wp-admin」を付け加えれば管理画面のURLになります。「ログイン画面がわからない」方は、やってみてください。いつでもすぐにログイン画面が表示できるようにGoogleやYahooなどのブラウザのお気に入りに入れておくと便利です。

投稿を新規追加する

  1. ダッシュボード画面の左メニューの「投稿」にカーソルを合わせます。
  2. 図のように右下に「新規追加」が現れるのでそれをクリックします。

※私のダッシュボード画面の色は、設定で変更しているので、ダッシュボード画面の色が違っていても問題ありません。

タイトルを入力する

※画面は使っているテーマやプラグインによって表記は変わりますので、同じでなくても気にしないでください。

  1. 「タイトルを追加」にカーソルを合わせます
  2. タイトルにしたい文字を入力します。

文章を入力する

  1. 編集画面の「+」マークをクリックするとブロックリストが表示されます。
  2. ブロックリストの「段落」を選びます。
  3. 段落ブロックの中にカーソルが表示されるので文字を入力します。
  4. 段落ブロック内にカーソルを合わせると、装飾したり色を変えたりと編集を加えられるメニューバーが表示されます。

段落ブロックの編集機能はまた、改めて別記事にしますね。

画像を入力する

画像ブロックを表示する

  1. 編集画面の「+」マークをクリックするとブロックリストが表示されます。
  2. ブロックリストの「画像」を選びます。

画像をアップロードする

  1. 編集画面の「アップロード」をクリックします。
  2. パソコンに保存されている画像を選んで「開く」をクリックするとアップされ画像が表示されます。

ここまでで、「タイトル入力」「文字入力」「画像入力」ができました。これで、基本的な投稿スタイルはできるようになりました。あとは公開するだけです。もう少しです。頑張りましょう!

記事を公開する

  1. お花みたいな設定アイコンをクリックします。
  2. 「投稿」タブをクリックし投稿関連の設定ができる項目を表示させます。

パーマリンクの設定

  1. 「パーマリンク」を開きます。閉じている場合、V印をクリックすると表示されます。
  2. URLスラッグ」に半角英数字で任意の文字列を入力します。この場合、春のキャンペーンなので「campaign-spring2022」と入力しています。ここに入力した文字列がページのURLアドレスになります。

カテゴリーの設定

  1. パーマリンク設定に続いて、「カテゴリー」設定をします。カテゴリー群の中から適切なカテゴリーにチェックを入れます。

サムネイル( アイキャッチ)の設定

  1. カテゴリー設定に続いて、「アイキャッチ画像」を設定します。「アイキャッチ画像を設定」をクリックします。
  2. メディアライブラリーが表示されるので、アイキャッチにする画像にチェックを入れます。このとき、必ず代替テキストを入れてください
  3. 「アイキャッチ画像を設定」をクリックします

いよいよ公開!

  1. 「公開」をクリック。
  2. 再度「公開」画面が表示されたら、また「公開」ボタンをクリックしてください。

お疲れ様でした!これで記事を公開できました。

まとめ

記事投稿の手順

  1. WordPressにログインする
  2. 投稿画面から記事を新規でつくる
  3. タイトルや文章、画像を記入する
  4. 記事を公開する

慣れてくれば簡単に投稿できるようになり、レイアウトの幅も広がりますよ。

投稿を楽しんでください。

  • プラグインの導入の仕方がわからない
  • 記事の投稿のやり方がわからない
  • 記事を自分で更新できるようになりたい
  • いつも単調なレイアウトしかできないのでパターンを増やしたい、などお気軽にご相談ください。
ご相談は無料ですのでお気軽にご質問ください。

関連記事

Profile~プロフィール~


田中ちはる

こんにちは。
ピサンリデザインの田中ちはるです。
40代後半のアラフィフwebデザイナーです。

出産を機に第2の人生を楽しく有意義に自分で選択する人生を生きようと心に決め、子供が年長になる年に40代から…

続きをみる

カテゴリー