![WordPressブロックエディタの使い方は?便利なブロックも紹介のアイキャッチ画像](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/c21914df1c7d48798e2a059017fdbb0d/Group%20707.png?w=1200&fm=webp)
wordpress
更新日: 2024/5/8
WordPressブロックエディタの使い方は?便利なブロックも紹介
![character_balloon](/media/character/pink_question_left.png)
ブルーちゃん聞いて。WordPressを立ち上げてみたんだけど、ブロックエディタ?っていう編集方法がなんだか難しそうで、、、
WordPressは初心者向きとは言われているけど、初めて触ってみて戸惑うこともあるよね。
![character_balloon](/media/character/blue_happy_right.png)
![character_balloon](/media/character/pink_troublesome_left.png)
そうなの。使える機能がたくさんありすぎて、ちょっと敬遠しそうになっちゃったわ。
WordPressのブロックエディタは正しい使い方をマスターすれば、簡単に使えるようになるんだ。
![character_balloon](/media/character/blue_up_right.png)
じゃあ、WordPressのブロックエディタの使い方を詳しく説明するね!
![character_balloon](/media/character/blue_normal_right.png)
目次
- 1. WordPressのブロックエディタとは?
- 2. ブロックエディタの画面構成をわかりやすく解説
- 3. WordPressでページを公開するための5ステップ
- 3-1. 1.記事タイトルを入力する
- 3-2. 2.見出しを追加する
- 3-3. 3.記事の本文を書く
- 3-4. 4.プレビューと下書き保存をする
- 3-5. 5.記事を公開する
- 4. ブロックの基本的な操作方法5選
- 4-1. 1.ブロックの追加
- 4-2. 2.ブロックの移動
- 4-3. 3.ブロックの複製
- 4-4. 4.ブロックのグループ化
- 4-5. 5.ブロックの削除
- 5. クオリティを上げる便利なブロック5選
- 5-1. 1.画像ブロック
- 5-2. 2.リストブロック
- 5-3. 3.テーブルブロック
- 5-4. 4.カラムブロック
- 5-5. 5.動画ブロック
- 6. まとめ
WordPressのブロックエディタとは?
![character_balloon](/media/character/blue_down_left.png)
ブロックエディタとは、文章や画像をブロック単位で操作し、記事やページを編集できる機能だよ。
「見出しのブロック」、「画像のブロック」というブロックはあったわね。
![character_balloon](/media/character/pink_happy_right.png)
![character_balloon](/media/character/blue_normal_left.png)
それぞれを自由に移動させたり、複製できたり、かなり直感的な操作ができるんだ。
初心者の方でも簡単に操作できると言われているものね。
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/blue_up_left.png)
以前採用されていた「クラシックエディタ」という機能は、プラグインを導入することで使用でるよ。
でも、ブロックエディタの方が使いやすくて機能にも優れているから、これから始める人には「ブロックエディタ」がおすすめなのね!
![character_balloon](/media/character/pink_happy_right.png)
ブロックエディタの画面構成をわかりやすく解説
![character_balloon](/media/character/blue_up_left.png)
ブロックエディタの画面は、3つのエリアに分かれているよ。
箇所 | 機能 |
ヘッダーメニューバー(上部) | ブロックの追加や下書き保存、記事の公開などの設定 |
執筆エリア(左側) | ページの中身を作成する作業場所 |
設定サイドバー(右側) | 投稿に関する設定と選択したブロックの各種設定 |
![character_balloon](/media/character/blue_down_left.png)
ヘッダーメニューバーには、編集で必要な様々なツールが並んでいるんだ。
左側にはブロックの追加、リストの表示が並んでいるのね。
![character_balloon](/media/character/pink_up_right.png)
右側には下書き保存やプレビューなど、公開に関係するツールがあるのね。
![character_balloon](/media/character/pink_up_right.png)
![character_balloon](/media/character/blue_up_left.png)
執筆エリアには実際にブロックを追加し、見出しを追加したり本文を書いたりなどメインコンテンツの編集ができるよ。
![character_balloon](/media/character/blue_up_left.png)
設定サイドバーでは、「投稿に関する設定」と「選択したブロックの各種設定」を行うよ。
WordPressでページを公開するための5ステップ
![character_balloon](/media/character/blue_smile_left.png)
早速WordPressでページを公開する方法を教えるね!
1.記事タイトルを入力する
2.見出しを追加する
3.記事の本文を書く
4.下書き保存とプレビュー確認をする
5.記事を公開する
![character_balloon](/media/character/blue_normal_left.png)
ほかにもいろんな機能はあるけど、まずは基本の操作だけに絞ってみたよ。
基本から押さえたいものね!
![character_balloon](/media/character/pink_smile_right.png)
![character_balloon](/media/character/blue_normal_left.png)
じゃあ早速手順通りにやってみよう!
1.記事タイトルを入力する
![character_balloon](/media/character/blue_confidence_left.png)
はじめに、ブロックエディタのど真ん中にある「タイトルを追加」は見えるかな?
見えるわよ!ここにタイトルを入れていくのね。
![character_balloon](/media/character/pink_smile_right.png)
![character_balloon](/media/character/blue_happy_left.png)
そう!一目でわかるのは嬉しいよね。
ここをクリックして、記事のタイトルを入力したら完了ね。
![character_balloon](/media/character/pink_normal_right.png)
2.見出しを追加する
![character_balloon](/media/character/blue_smile_left.png)
ここからは「ブロック」を使っていくよ。
しっかりマスターしたいわ!
![character_balloon](/media/character/pink_smile_right.png)
![character_balloon](/media/character/blue_up_left.png)
執筆エリアにあるタイトル下の「+」ボタン、もしくはヘッダーメニューバー左側にある「+」ボタンをクリックするよ。
![character_balloon](/media/character/blue_down_left.png)
「見出し」をクリックすると見出しブロックが表示されるよ。
横長のバーみたいなものが出てきたけど、これは何かしら?
![character_balloon](/media/character/pink_question_right.png)
![character_balloon](/media/character/blue_up_left.png)
これは「ブロックツールバー」といって、選択しているブロックの細かい設定ができるんだ。
本当だ!今は見出しを追加したいから、大見出しとか、小見出しの設定がしたいわ。
![character_balloon](/media/character/pink_down_right.png)
![character_balloon](/media/character/blue_down_left.png)
一般的な見出しルールはこれだよ。
H1:タイトル
H2:大見出し
H3:中見出し
H4:小見出し
ありがとう!参考にするわね!
![character_balloon](/media/character/pink_smile_right.png)
3.記事の本文を書く
見出しまでできたから、次は本文かしら?
![character_balloon](/media/character/pink_happy_right.png)
![character_balloon](/media/character/blue_up_left.png)
本文を書きたい場合は、先ほど同様「+」ボタンをクリックした後、「段落」を選択するよ。
![character_balloon](/media/character/blue_smile_left.png)
段落の中に本文を書く際に改行したい場合は「Shiftキー」と「Enterキー」を同時に押してね。
Enterキーのみを押すと、新しい段落ブロックが表示されるのね。
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/blue_happy_left.png)
さらに、ブロックツールバーにはこんな機能があるよ。
1.テキスト配置の変更
2.太字
3.斜体(イタリック体)
4.リンク
5.その他テキスト装飾
6.ブロックの設定
![character_balloon](/media/character/blue_happy_left.png)
これだけでかなり読みやすいページにできるんだ。
4.プレビューと下書き保存をする
![character_balloon](/media/character/blue_normal_left.png)
プレビューで出来栄えを確認し、下書き保存をするよ。
どんな見栄えになっているかの確認は重要ね。
![character_balloon](/media/character/pink_down_right.png)
![character_balloon](/media/character/blue_up_left.png)
プレビューは、ヘッダーメニューバーの右側「プレビュー」をクリックするよ。
![character_balloon](/media/character/blue_down_left.png)
そうすると実際のページが表示されるので、イメージ通りに仕上がっているかを確認してね。
イメージ通りの出来栄えだったわよ!
![character_balloon](/media/character/pink_happy_right.png)
![character_balloon](/media/character/blue_up_left.png)
そしたら下書き保存を押して完了だよ。
WordPressは自動保存の希望がついているけど、こまめに下書き保存をしておくことがおすすめね。
![character_balloon](/media/character/pink_smile_right.png)
5.記事を公開する
記事の準備が整ったわ!
![character_balloon](/media/character/pink_smile_right.png)
![character_balloon](/media/character/blue_up_left.png)
じゃあ早速記事の公開をしよう。
![character_balloon](/media/character/blue_normal_left.png)
ヘッダーメニューバーの右側にある「公開」をクリックするよ。
![character_balloon](/media/character/blue_smile_left.png)
これで記事が全世界に公開されたよ!
嬉しいわ!手順通り丁寧にやっていけば、必ず公開できるのね!
![character_balloon](/media/character/pink_smile_right.png)
ブロックの基本的な操作方法5選
一通り公開までできるようになったわ。
![character_balloon](/media/character/pink_down_right.png)
でももっとブロックを使いこなせそうな気がするわね。
![character_balloon](/media/character/pink_question_right.png)
![character_balloon](/media/character/blue_up_left.png)
じゃあ次は、ブロックな基本的な操作方法を教えるよ。
1.ブロックの追加
2.ブロックの移動
3.ブロックの複製
4.ブロックのグループ化
5.ブロックの削除
![character_balloon](/media/character/blue_confidence_left.png)
これらの操作を覚えておくと、記事の編集がサクサク進むんだ。
1.ブロックの追加
![character_balloon](/media/character/blue_down_left.png)
ヘッダーメニューバー左側にある「+」ボタンをクリックするよ。
これはさっきやったわね。
![character_balloon](/media/character/pink_up_right.png)
ばっちりよ。
![character_balloon](/media/character/pink_up_right.png)
![character_balloon](/media/character/blue_happy_left.png)
ブロックにもいろんな種類があるから、ここから必要なブロックを選んでね。
![character_balloon](/media/character/blue_normal_left.png)
利用したいブロックをクリックすることで、執筆エリアに追加されるよ。
これでブロックの追加は完了ね。
![character_balloon](/media/character/pink_smile_right.png)
2.ブロックの移動
![character_balloon](/media/character/blue_up_left.png)
ブロックを別の場所に移動させる方法は2種類あるよ。
・1つずつ上下に移動
・リスト表示して移動
![character_balloon](/media/character/blue_down_left.png)
1つずつ上下に移動するには、移動したいブロックを選択後、ブロックツールバーで「上に移動」もしくは「下に移動」をクリックするよ。
それか、「︙︙」部分をドラッグ&ドロップでも移動可能ね。
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/blue_up_left.png)
リスト表示して移動するには、ヘッダーメニューバーの3本線、「リスト表示」をクリックするよ。
![character_balloon](/media/character/blue_happy_left.png)
左側にリストが表示されるから、移動したいブロックをドラッグ&ドロップで移動させてね。
ちょっとした移動は「1つずつ上下に移動」、大きく移動させたい場合は「リスト表示して移動」がおすすめね!
![character_balloon](/media/character/pink_confidence_right.png)
3.ブロックの複製
![character_balloon](/media/character/blue_smile_left.png)
複製をうまく使えば、作業時間の短縮ができるよ。
![character_balloon](/media/character/blue_down_left.png)
複製したいブロックをクリックし、ブロックツールバーのオプション「︙」をクリック、「複製」を選択するよ。
![character_balloon](/media/character/blue_smile_left.png)
これで複製は完了だよ。
こんなに簡単なら、使わないと損ね!
![character_balloon](/media/character/pink_up_right.png)
4.ブロックのグループ化
![character_balloon](/media/character/blue_up_left.png)
複数のブロックをグループ化すると、まとめて操作ができるのでとても便利なんだ。
![character_balloon](/media/character/blue_normal_left.png)
まずはグループ化したいブロックを選択するよ。
選択するときは「Shiftキー」を押しながら、グループ化したい1番上のブロック→グループ化したい1番下のブロックの順にクリックするのね。
![character_balloon](/media/character/pink_down_right.png)
![character_balloon](/media/character/blue_down_left.png)
次にブロックツールバーのオプション「︙」をクリックし、「グループ化」を選択するよ。
これでグループ化は完了ね!
![character_balloon](/media/character/pink_happy_right.png)
![character_balloon](/media/character/blue_up_left.png)
右側の設定サイドバーでグループ全体の設定を確認できるから見てみてね!
5.ブロックの削除
「削除」も必要な機能だから、使い方を知っておきたいわ!
![character_balloon](/media/character/pink_down_right.png)
![character_balloon](/media/character/blue_happy_left.png)
ブロックツールバーのオプション「︙」をクリックし、削除を選択するよ。
とっても簡単ね!
![character_balloon](/media/character/pink_confidence_right.png)
![character_balloon](/media/character/blue_up_left.png)
ブロックの基本操作を紹介したよ!
![character_balloon](/media/character/blue_normal_left.png)
でもまだまだ他にも機能はたくさんあるんだ。
必要な操作を覚えて、作業の効率化を目指したいわね!
![character_balloon](/media/character/pink_inspiration_right.png)
クオリティを上げる便利なブロック5選
基本的な使い方がわかってきたわ。
![character_balloon](/media/character/pink_smile_right.png)
![character_balloon](/media/character/blue_confidence_left.png)
もっとページのクオリティを上げるための機能を紹介するね。
1.画像ブロック
2.リストブロック
3.テーブルブロック
4.カラムブロック
5.動画ブロック
![character_balloon](/media/character/blue_smile_left.png)
これらをマスターすれば、もっと質の高いサイトを作っていけるんだ!
よろしくお願いします!
![character_balloon](/media/character/pink_smile_right.png)
1.画像ブロック
画像ブロックは、写真やイラストなどの「画像ファイル」を挿入するためのブロックね?
![character_balloon](/media/character/pink_happy_right.png)
![character_balloon](/media/character/blue_confidence_left.png)
そうそう!ヘッダーメニューバー左側にある「+」ボタンをクリックし、「画像」を選択するよ。
![character_balloon](/media/character/blue_up_left.png)
画像の挿入方法は3つあるんだ。
アップロード | メディアライブラリ | URLから挿入 |
端末にある画像をアップロードして使う | すでにアップロード済みの画像ファイルから選んで使う | 画像が置いてあるURLを指定して使う |
![character_balloon](/media/character/blue_up_left.png)
画像の幅や高さは、直接ドラッグ、または右側の「パネル」で操作できるんだ。
Altテキストやキャプションの設定もできるのね!
![character_balloon](/media/character/pink_confidence_right.png)
2.リストブロック
![character_balloon](/media/character/blue_happy_left.png)
リストブロックは、箇条書きや番号付きのリスト表示をする際に使用するよ。
![character_balloon](/media/character/blue_up_left.png)
リストはこんな感じで表示されるんだ。
・リスト
・リスト
1.リスト
2.リスト
項目によって使い分けて、より分かりやすい表示にできるのね。
![character_balloon](/media/character/pink_happy_right.png)
![character_balloon](/media/character/blue_down_left.png)
ヘッダーメニューバーの3本線、「リスト表示」をクリックすると、どこにリストがあるのかを確認できるよ。
3.テーブルブロック
![character_balloon](/media/character/blue_up_left.png)
テーブルを利用すると、「表」を作成することができるよ。
![character_balloon](/media/character/blue_down_left.png)
ヘッダーメニューバー左側にある「+」ボタンをクリックし、「テーブル」を選択するよ。
![character_balloon](/media/character/blue_confidence_left.png)
次に列数と行数を指定します。
縦列を3行にしたい場合は「列数を3」、横列を2行にしたい場合は「行数を2」と設定するのね。
![character_balloon](/media/character/pink_down_right.png)
![character_balloon](/media/character/blue_happy_left.png)
さらに、右側の「設定サイドバー」で様々な設定ができるよ。
たとえば「設定」タブにある「ヘッダーセクション」を選択すると、表の1番上にヘッダーが追加されるのね。
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/blue_smile_left.png)
ほかにもたくさんあるから、使いこなしてみてね!
4.カラムブロック
![character_balloon](/media/character/blue_happy_left.png)
カラムとは、1つのブロックを複数に分割し、横並びに画像やテキストを並べることができる機能のことだよ。
たとえば左側にテキスト、右側に画像を配置することができて、レイアウトの幅が広がるのね!
![character_balloon](/media/character/pink_confidence_right.png)
![character_balloon](/media/character/blue_down_left.png)
まずヘッダーメニューバー左側にある「+」ボタンをクリックし、「カラム」を選択するよ。
![character_balloon](/media/character/blue_up_left.png)
次にカラムの割合を選択するよ。
テキストと画像の2つを並べたい場合は、「50/50」を選択するのね。
![character_balloon](/media/character/pink_happy_right.png)
![character_balloon](/media/character/blue_happy_left.png)
そうすると2つのブロックが表示されるので、片方は画像、もう片方は段落を選択してね。
テキストと画像が横並びになったページが完成したわ!
![character_balloon](/media/character/pink_smile_right.png)
5.動画ブロック
![character_balloon](/media/character/blue_smile_left.png)
ブロックエディタでは、なんと動画も挿入できるんだ。
今回はYoutubeを例にお願いします。
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/blue_normal_left.png)
掲載したいYoutubeの共有リンクをコピーするよ。
![character_balloon](/media/character/blue_down_left.png)
直接執筆エリアにURLを貼り付けるよ。
![character_balloon](/media/character/blue_up_left.png)
動画のサムネイルが表示されれば完了だよ!
とっても簡単ね!
![character_balloon](/media/character/pink_confidence_right.png)
![character_balloon](/media/character/blue_happy_left.png)
WordPressのブロックエディタについてまとめると、こんな感じだよ。
まとめ
◆ブロックエディタは直感的に操作できる初心者におすすめの編集方法
◆ブロックエディタではたった5つのステップを踏めば簡単に記事の公開が可能
◆ブロックの種類は多種多様のため、必要な機能をどんどん使って効率アップが可能
WordPressのブロックエディタを使いこなせれば、初心者でもクオリティの高いサイトが作れるのね!
![character_balloon](/media/character/pink_confidence_right.png)
とても参考になったわ。ブルーちゃん、今日はありがとうね。
![character_balloon](/media/character/pink_smile_right.png)
![character_balloon](/media/character/blue_smile_left.png)
またいつでも聞いてね!
![character_balloon](/media/character/blue_writer.png)
ブルー
SEOやエンジニアリングマーケティングが得意。非常にめんどくさがりで、動きたくないがために自分でコードを書いて自作のMAを組んだりする。自動化のためなら努力は惜しまない。
最新の記事一覧
広報戦略とは?必要な理由や策定方法、フレームワークを解説!
広報・PR
マテハンとは?初心者向けに意味を解説!マテハン機器の種類も紹介
ビジネス
デザイン経営とは?概要やメリット、取り組み方法を徹底解説
ビジネス
ミラーリング効果とは?ビジネスで信頼を深めるための方法を紹介
ビジネス
Z世代マーケティングの手法を紹介!Z世代の名前の由来や特徴も解説
マーケティング
サンクコスト効果の例は?意味やマーケティングへの活用例も解説
ビジネス
2025年問題とは?どのような影響があるか解説【国の対策も】
ビジネス
やる気とは?努力してもできないものはできない理由を解説
ビジネス
モチベーションの上げ方を紹介!理想と現実のギャップを生かそう!
ビジネス
ノベルティとは?コツや作り方、販促品との違いについても解説!
広報・PR
リーフレットとは?作る目的や作り方、パンフレットとの違いを解説!
広報・PR
広報とは?種類や仕事内容、PRとの違いについても解説!
広報・PR
プレスリリースの書き方は?構成要素やポイント、コツを解説!
広報・PR
ブランド戦略とは?必要な理由や戦略の立て方について解説!
広報・PR
戦略PRとは?重要な理由や実施方法、注意点などについて解説!
広報・PR
広報とPRの違いは?目的や仕事内容の違い、スキルについて解説!
広報・PR
広報とIRの違いは?IRの仕事内容や注意点についても解説!
広報・PR
【初心者向け】WordPressのショートコードの使い方を解説!
wordpress
ステークホルダーとは?重要性や良好な関係を築くポイントを解説
経営・会計
フィードバックとは?意味や効果、具体的な手法を徹底解説
ビジネス
最新の記事一覧
広報戦略とは?必要な理由や策定方法、フレームワークを解説!
広報・PR
マテハンとは?初心者向けに意味を解説!マテハン機器の種類も紹介
ビジネス
デザイン経営とは?概要やメリット、取り組み方法を徹底解説
ビジネス
ミラーリング効果とは?ビジネスで信頼を深めるための方法を紹介
ビジネス
Z世代マーケティングの手法を紹介!Z世代の名前の由来や特徴も解説
マーケティング
サンクコスト効果の例は?意味やマーケティングへの活用例も解説
ビジネス
2025年問題とは?どのような影響があるか解説【国の対策も】
ビジネス
やる気とは?努力してもできないものはできない理由を解説
ビジネス
モチベーションの上げ方を紹介!理想と現実のギャップを生かそう!
ビジネス
ノベルティとは?コツや作り方、販促品との違いについても解説!
広報・PR
リーフレットとは?作る目的や作り方、パンフレットとの違いを解説!
広報・PR
広報とは?種類や仕事内容、PRとの違いについても解説!
広報・PR
プレスリリースの書き方は?構成要素やポイント、コツを解説!
広報・PR
ブランド戦略とは?必要な理由や戦略の立て方について解説!
広報・PR
戦略PRとは?重要な理由や実施方法、注意点などについて解説!
広報・PR
広報とPRの違いは?目的や仕事内容の違い、スキルについて解説!
広報・PR
広報とIRの違いは?IRの仕事内容や注意点についても解説!
広報・PR
【初心者向け】WordPressのショートコードの使い方を解説!
wordpress
ステークホルダーとは?重要性や良好な関係を築くポイントを解説
経営・会計
フィードバックとは?意味や効果、具体的な手法を徹底解説
ビジネス