ブロックエディタの基本の使い方！練習問題で実践しながらわかりやすく解説 2025 3/05 ブログ立ち上げ 2025-01-062025-03-05 当ページのリンクには広告が含まれている場合があります。 このページでは、ワードプレスの記事を書く部分である「ブロックエディター」の使い方をご紹介します。 ワードプレスのエディターは、2018年末に大幅リニューアルされて、「ブロックエディター」というものになりました。 それ以降にブログを始めた方はそれが「当たり前」なんだと思いますが、それ以前からブログをやっていた方の中には、まだまだ古いエディターに馴染みがあって使い続けてる方もいらっしゃると思います。 でも、ブロックエディターは、一度覚えると非常に楽しいエディターですので、ぜひ、これを機にマスターしてみてください。 この記事が役に立つ人 いまだにブロックエディターがわからないけど、今さら誰にも聞けないと思っているあなた これからブログを始めるからブロックエディターの使い方を知りたいあなた 昔ブログをやっていたけど、新たにスタートしたいと思っているあなた 目次この記事がほかの記事と違うところ 実は私も、古いエディターが肌に馴染みすぎていて、新しいブロックエディターを覚えるのにすごく時間がかかってしまいました。 その理由はおもに以下の2つ 古いやり方に固執していて、新しいブロックエディターに拒絶反応があった ブロックエディターの使い方を、わかりやすく解説している記事がなかった １番は私の問題なので置いておくとして、問題は2番です。 せっかく新しいエディターをマスターしようと思って、「ブロックエディターの使い方」という記事をググっても、教科書のような機能の解説が載っているものばかりで、実際にどうしたらいいか？が全然わからなかったんですよね。 知りたいのは、ブロックエディターのすべての機能のうんちくではなくて、「実際に記事を書くにはどうしたらいいか？」ですよね。なのですごく時間がかかってしまいました。 これからマスターしようと思うあなたには、私のような思いをして欲しくない。そんな想いで、この記事は「実践形式」を取ることにしました。 必要な要素を詰め込んだ「サンプル記事」を用意して、実際にその記事を書くためにはどうしたらいいのか？という視点で解説をしていきます。 さらに、文字だけじゃ～わからないよ！というあなたのために動画解説も用意しました。 あの頃の私を思い出して「こんなのがあったら良かった」と思える内容にしていますので、きっとあなたにも喜んでいただけるのではないかと思っています。 ぜひ、あなたのブログの新規記事を開いて、マネしながら実践してみてください。 このページが終わるころにはきっと、ブロックエディターで記事が書けるようになっているはずです。 ではやっていきたいと思います。 動画解説 全体を動画で説明して欲しい！と思うあなたのために、動画解説も作成しました。よろしければご覧ください。 音が出ますのでご注意ください。 </noscript><iframe width="560" height="315" data-src="https://www.youtube.com/embed/GDjnjyGOoM4?si=113Hi98378LOJ9ER" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen class="lazyload" > この記事の進め方 サンプル記事を練習問題にします このページでは、サンプル記事を「練習問題」にして、その記事を実際に書いていくという設定で、ブロックエディターの使い方を解説します。 サンプル記事はこちらです。 サンプル記事 サンプル記事とは？ このサンプル記事は、私が、このブロックエディターの解説をするために用意した記事でして、普段よく使用するであろうおもな機能を、盛り込んだものになっています。 そして、前半部分は解説用、後半部分は復習用となっています。 前半部分を使用して、ブロックエディターの操作方法とブロックの設定方法を解説しますので、 後半部分は、あなたの復習用に使用してください。 後半部分は、前半部分で解説した内容をもう一度繰り返すことで完成できるようになっているからです。 著作権について サンプル記事は、この記事の練習用に特別に用意したもので、自由に練習に使っていただいてかまわないのですが、著作権はららにありますので、あくまでも練習用ということで公開はしないでください。noindexでの公開ならOKです。 テーマはcocoonを使用 実は、ブロックエディターの細かい仕様はテーマによって異なります。 なので、本当は、あなたのテーマに合わせたレッスンができたらいいのですが、そうもいかないので、ここでは、無料テーマの中でもおそらく一番有名な「cocoon（コクーン）」を使用します。 ここで覚えたことをあなたのテーマに応用してもいいですし、もし「ちゃんと一緒にやりたい！」と思ったら、cocoonは無料で使用できますので、一度テーマをcocoonに変えてやってみるといいと思います。 cocoonのダウンロードはこちら ブロックエディターのブロックってなに？ まずは、「ブロックってなに？」というところから始めます。 「ブロックエディター」という名前なんですから「ブロック」が何か関係してそうですよね。その「ブロック」とはいったい何なんでしょうか？ まさにブロックを積み上げるイメージ ブロックというのは、まさにこのようにブロックを積み上げるイメージです。 青いブロックの上にピンクのブロック、その上が水色でその上が黄緑で、また青いブロックで…という感じに、積み上げて記事を作っていくイメージなんです。 じゃあ、青いブロックが何でピンクのブロックが何に相当するんでしょうか？ 実際の記事での「ブロック」 こちらは、サンプル記事の一部分です。このいったいどこがブロックなんでしょうか？ この赤枠がその「ブロック」です。 ほかにもこのサンプル記事にはこんなブロックがあります。 こんなふうに、ブロックを積み上げていく感覚で記事を作成していくんです。各ブロックごとに、それを修飾するメニューが出てきますので、きめ細やかで詳細な設定をすることができます。 今までのエディターは修飾メニューが共通だったので、細かいところはコードを書いたり別の設定が必要だったりしましたよね。そこが1番の違いです。 「？？？」という部分も多いと思いますが、ここでは「ブロックとは？」というところをイメージで説明しただけなので、な～～んとなくつかめればそれでOKです。このあと、実際の操作をしていくと、もっと具体的にわかってくると思います。 ブロックエディターの外見 次に、ブロックエディターのざっくりした使用方法をご紹介します。 ブロックエディターを開くと、こんな形をしています。 昔のエディターに執着する部長 もうこの段階で昔と違い過ぎて拒絶反応なんだよね～＾＾； ですよね、わかります。 １には記事のタイトルを書き、２に本文を書きます。 昔のエディターに執着する部長 うん…。何となくそれはわかるんだけどね…。 ですよね～ ここの部分が、 ← 昔のエディターのこの部分に相当します。 昔のエディターに執着する部長 そこはあまり変わってなさそうだな。 でも、昔のエディターを知っているあなたはこう思ってるんじゃないでしょうか？ 昔のエディターに執着する部長 ここの部分がないのが、超違和感なんだよね！ そうなんですよね。前は上の図のように、修飾のメニューが一カ所にまとまっていたのですが、今は、この機能は、ブロックごとに表示されるようになっています。 そこが今回、見た目的に非常に変わっている部分です。逆に言うとそこさえクリアできれば、今まで拒絶反応だったブロックエディターは攻略したも同然になります。 昔のエディターに執着する部長 ん～、全然ピンと来ないぞ ここから先は、ピンと来てもらうために、サンプル記事を元にして、どのように書けばいいのかをご紹介していきます。 ブロックエディターを使った具体的な記事の書き方 では、サンプル記事を頭から書いていく形で解説します。 サンプル記事はこちら 記事タイトルを書く 記事タイトルはここに書きます。ただ書くだけでOKです。 アイキャッチ画像の設定 アイキャッチ画像はここで設定します。 削除や置換もここで行います。 「アイキャッチが作れない」「アイキャッチを作るのに超時間がかかる」というあなたには、アイキャッチ画像の簡単な作り方について、こちらの記事で解説していますのでぜひご覧ください。 詳細はこちら 初心者さん必見！アイキャッチ画像をたった３stepで作る方法（canva使用） 毎度毎度アイキャッチ画像を用意するのって、面倒ですよね～。最近はクオリティ高いアイキャッチが増えてるから、適当に作ると素人感丸出しになっちゃうし…。そんなあなたに、ジャストサイズのアイキャッチ画像を超簡単に作る方法をご紹介します。 下書き保存する 記事作成中はここを押してこまめに下書き保存しましょう。 プレビューを見る プレビューを見るには、ここをクリックします。 文字を書く（段落ブロック） 記事タイトルの下に、いきなり文字を書けば文字が書けます。ENTERキーで次の段落に移るまでが1つの段落ブロックです。 改行する ENTERで改行すると、次の段落になり、段落が変わるとブロックもかわります。 段落を変えずに改行だけをしたい場合は「Shift+ENTER」を押します。 文字を書くだけなら、このようにしてどんどん書いていくことができます。 箇条書きを書く（リストブロック） ここのやり方です。 2つ目の段落ブロック（文字を書いたところ）の最後でENTERキーを押して次の段落にカーソルを持っていき、右端に現れる「＋」ボタンを押します。 このようなブロックのメニューが出てきますので「リスト」を選択してください。もし選択肢に「リスト」がなかったら、検索窓に「リスト」と入力すると出てきます。 「リスト」をクリックすると、本文のところが、リストを入力する画面になります。また、上部に現れるメニューは、リストブロックに関係あるメニュー一覧です。 いろいろなメニューが並んでいますが、必要に応じて覚えればいいので、ここでは全部知る必要はありません。 リストの中身を書いていきます。ENTERで次の行に移ります。最後はENTER2回で終了できます。 このあと、このリストを枠で囲っていきます。 cocoonの場合、1つのブロックを、一発でいろいろなデザインの枠で囲うことができます。枠で囲いたいブロックにカーソルを置いた状態で、右側のメニューの「ボーダー」もしくは「スタイル」から好きな枠のデザインを選択します。 今回はリストを枠で囲うのですが、リストの場合、カーソルを置く場所（選択する場所）を間違うと、ちゃんと囲うことができません。 正しく選択するには、左側のここをクリックして、 「リスト」をクリックしてください。そうすると、本文の方で正しくリスト全体が選択されます。 実はリストブロックは入れ子になっていて、「リスト」という親の中に「項目」という子供がいる形なんです。 なので、本文の中で適当にクリックすると「項目」が選択される可能性があり、そうなると出てくるメニューも変わるので、思ったような操作ができない結果になります。 そのため、上記のような方法を取るのが確実、というわけなんです。 「リスト」を選択したら、右側のメニューの「ボーダー」から好きな枠を選択します。ワンクリックで簡単にデザインが変えられるのが、ブロックエディターのいいところです。 また、「スタイル」からは先頭のマークが選べます。こちらも、ワンクリックで簡単にいくらでもデザインを変更することができます。 どんなデザインがあるか？は、完全にテーマに依存してます。cocoonは種類がすごく多い印象です。 はい、このようになりました。 検索する文字がわからない場合 ブロックの名前がわからなくて検索する文字がわからない場合は、どうしたらいいでしょうか？ そんな場合は、こちらの「すべて表示」をクリックします。 そうすると、左側にブロックの一覧が出ますので、そこから選択することができます。 見出しを作る 次はこの見出しの部分です。左が「見出し２」、右が「見出し３」になります。 見出しのデザイン変更は、「cocoon設定」で行ってください。 見出しの文章を書いたあと、1番左のメニューをクリックします。 「見出し」をクリック デフォルトは「H2」なので、「見出し２」のデザインになりますが、「H3」に変えると「見出し３」のデザインに変わります。「見出し４」「見出し５」も同様です。 画像を入れる では、見出しの下に画像を入れてみたいと思います。 画像はネット上からフリー素材を手に入れて使用します。その方法についてはこちらの記事を参考になさってください。 「＋」マークを押してメニューを出し、「画像」を選択します。一覧に「画像」がなかったら、検索窓に「画像」と入力して検索してください。 本文が、画像を入れるモードになりますので、「メディアライブラリ」を選択します。 画像を選択します。 画像が入りました。このあと、画像のすぐ上のメニューと右側の設定画面から、細かい設定をしていきます。 編集している画面のすぐ上に現れるメニューは「ブロックツールバー」と言いますが、このメニューが邪魔で見たいところが見えなくなったりして不便なこともあります。そんな時は、画面右上の三点メニューの「トップツールバー」をONにすると、ブロックツールバーが最上部に固定されてスッキリします。好きな方を選んでください。この記事ではデフォルトの状態で解説します。 手で直接大きさを変更することができます。 右側の画面から数字を入力して大きさを変更することもできます。 数字で指定すると、記事内の画像のサイズが綺麗に揃うので、数字で指定がおすすめです。 ここで画像を中央寄せできます。 画像の代替テキストはここから入力します。 その他、こちらからいろいろとデザインを変更できますので試してみてください（ここはテーマに依存します）。 ブロックごと削除する 文字を間違えた場合は、普通にDELETEキーやBackSpaceキーで修正しますが、ブロックごとドカンと消してしまう方法があります。先ほど作った箇条書きの部分を一気に消してみましょう。 リストを正確に選択して、 3つの点のメニューから「削除」を選択します。これでリスト部分が一気に消えます。 ブロックの順番を変える 先ほど作ったリストブロックを、1つ下の文章のその下に移動させたい場合はどうしたらいいでしょうか？ リストブロックを選択した状態で、赤枠のメニューをクリックするだけで、1つずつ下に移動していきます。上にも移動できます。 ブロックとブロックの間にブロックを入れる 上から順に書いていけば、最後にこのような「＋」マークが出ますが、 たとえば、この見出しと画像の間に別のブロックを入れたい場合はどうしたらいいんでしょうか？ そんな場合には、画像を選択したのち、点3つのメニューから「前に追加」をクリックすると、 このように新しい隙間ができます。 見出しを選択して「後に追加」でもOKです。 画像と文字を横並びにする（メディアとテキスト） 次はここの部分の作り方です。 このように、画像の横に文字がズラっと入っているブロックのことを「メディアとテキスト」と言います。「画像」で検索すると出てきます。 まずは左側に画像を入れます。「メディアライブラリ」をクリックして、画像を選択してください。 画像が大きすぎる場合は手動で調整します。その後、右側に文章を入力します。ここは文章以外のブロックを入れることもできます。 このメニューから、簡単に左右を反対にすることができます。 吹き出しを入れる このように、イラストにセリフを言わせるブロックのことを「吹き出し」と言います。吹き出しを使用すると、記事がすごく読みやすくわかりやすくなります。これのやり方を解説します。 「吹き出し」で検索すると出てきます。 とりあえずの画像が出てくるので、ここから詳細を設定していきます。 まずはセリフを入力します。 次に、右側のメニューから、あらかじめ登録してある画像を選択します。 その他にもメニューがあるので、左右や枠線などを設定して完了です。 吹き出しの画像は、cocoon設定から事前に登録してください。吹き出しは良く使用するのに、あらかじめ登録しておかないといけないのは面倒ですよね～。 私が試してみた限り、吹き出しの画像は事前登録が一般的ですが、唯一、事前登録なしに画像を自由に使えるのは「SWELL」です。SWELLは非常に吹き出しの扱いが簡単なのでおすすめです。 ブロックをコピーする では、この吹き出しブロックをコピーして2つにしてみましょう。 吹き出しブロックを選択して、3つの点のメニューから「コピー」を選択します。 コピーしたい場所で「貼り付け」をすればコピー完了です。あとはコピーしたブロックを修正して別の内容にしていきます。 アイコンボックス 次は、ここの部分のやり方です。 普通に文章を書いたあと、右側のメニューから「スタイルを開き」、 「情報」というボックスを選択すればOKです。 この部分は、 こちらの「付箋風ボックス」です。 ほかにもいろいろなデザインが用意されていますが、これらはcocoon独自のデザインになっていますので、テーマが違う場合は違うデザインが表示されるかと思います。 ブロックの間にスペースを入れる（スペーサー） このように、ブロックの間に大きめの間隔を空けたい時はどうしたらいいでしょうか？ この場合は「スペーサー」を挿入します。 このような長方形が挿入されますので、丸いところを掴んで好きな大きさに調整します。その分だけ空間が入る形です。 ワードプレスは昔から行間を空けるのが難しかったので、この機能は本当に嬉しいです。 内部リンクを入れる（ブログカード） 次はこちらです。記事の途中で他の記事を紹介する「内部リンク」は、読者さんに多くの記事を読んでもらうためには非常に有効なパーツですよね。このパーツのことを「ブログカード」と言います。 「＋」ボタンをクリックして 「ブログカード」ブロックを探してクリックしてください。 うまく探せなかったら「すべて表示」を押して左側の一覧から探してくださいね。 ブルーの部分に、リンクしたいページのURLをコピペします。 ここの部分は、 右側のこちらの一覧から選択します。 １を変更すると２が変わります。 これで完成です。見た目は変ですが、プレビューするとちゃんとブログカードになっています。 前のブロックとの間がちょっと狭いので スペーサーを入れました。 なお、ブログカードのデザインは、cocoon設定から行えます。 後半の実践はあなたがやってみてね 以上、サンプル記事の前半部分の作り方をご紹介しましたが、後半部分については、ここまでご紹介した機能のみが使われていますので、復習ということで、あなたが自分で考えてやってみてくださいね。 わからなくなったら、前に戻ってやり方を確認してください。 公開、抜粋、カテゴリーなど 記事以外の機能については以下のようになっています。 公開 最後に記事を公開するのは、ここから行います。 抜粋 抜粋はここに記入します。この小さい四角の中に書いたあと、特に保存ボタンなどはないので、×で消して完了です。 カテゴリー カテゴリーはここで設定します。 タグ タグはここで設定します。 ディスクリプション ディスクリプションの記入欄はテーマによって異なりますが、cocoonの場合は、記事を書くエリアの下にあるここで設定します。 表示オプションのオンオフ この、記事編集エリアの回りに置くオプションは、数が多くて全部置いたらごちゃごちゃしてしまいます。 なので、必要なものだけを置くために設定する画面があります。 古いエディターで言うと、この部分がそれにあたります。 ブロックエディターではどこにあるのでしょうか？ ブロックエディターでは、ここにその機能がありますので、ここで必要か不要かを切り替えてください。 記事の公開 最後に、記事の公開はこちらのボタンから行えます。 まとめ 以上で、ブロックエディターの使い方の解説を終わります。 いかがでしたでしょうか？初めてブロックエディターに触るあなたも、ブロックエディターに拒絶反応のあったあなたも、少しは理解していただけたのではないでしょうか？ 私も最初は、拒絶反応がハンパなく、本腰を入れて勉強するまでに5年かかりました。勉強をスタートしたのだって、人から仕事をいただいたので、イヤイヤやり始めただけなんです。 なのに！ 覚えてみたら楽しいこと楽しいこと♪ どのテーマを使っても、基本のやり方は変わらないのでテーマが変わっても苦労しませんし、どんなブロックがあるか覚えてしまえば、今まで時間をかけていたデザインが一瞬でできてしまうんです。 ハッキリ言って、もう昔のエディターには戻れません！ これからワードプレスを始めるよ～ってあなたも、「ブログ書くの楽しい！」と思ってもらえると思いますので、頑張って練習してみてくださいね。 ブログ立ち上げ よかったらシェアしてね！ URLをコピーしました！ URLをコピーしました！ 初心者さん必見！アイキャッチ画像をたった３stepで作る方法（canva使用） この記事を書いた人 rara ららです。40代になってから家事育児の合間にブログを始め、早14年。自分の力で稼ぐことができるようになり、生き甲斐や夢が増えました。このブログでは、そんな私の経験や知識が、これから始めるあなたの役に立つように、ブログ作成・ブログ運営についてのあれこれを、わかりやすく発信しています。 関連記事 サイトアイコン（ファビコン）てなに？本当に必要なの？ 2024-12-26 プロフィールの設定方法 2024-12-19 プラグインの入れ方 2024-12-19
