この記事ではワードプレス5.x系より
標準のエディターとなった
ブロックエディターの使い方・編集の方法を
徹底的に解説します。
過去のワードプレスのクラシックエディターや
無料ブログ等で慣れている方は
少し使いにくさを感じると思います。
ですがブロックエディターには
様々なメリットもあります。
余談ですが僕はブロックエディタが登場する前は
エックスサーバーを使っていました。
しばらくブログ作成はやめていたのですが
少し期間が開いて、またブログを書きたくなり色々調べたら
コノハウィングの方がWordpress開設が楽だと知り
レンタルサーバーに変えました。
コノハウィングで勝手に設定してくれるcocoonという
無料のワードプレステーマがあったので
使用してみたら勝手にブロックエディタになってました汗
《初心者向け》ConohaWINGの登録方法ワードプレスブログの始め方【記事作成まで15分】
記事書こうとしてビックリ
「なにこれ・・」と思いましたが
慣れるとクラシックエディタより使いやすいです。
例えばブロックエディターの場合、
- 文章、画像の移動が楽
- 装飾もたくさんあって便利
ざっくり言うとこんな感じです。
ゆくゆくはクラッシックエディターは
なくなるらしいので
ここでしっかり覚えて慣れてしまいましょう。
ブロックエディターとは
ワードプレスにブロックエディターが
登場したのは2018年です。
大幅なアップデートがあり、
ワードプレスの標準エディターは
WordPress 5.x Bedoから
従来のクラシックエディターから
ブロックエディターへ新しく生まれ変わりました。
ブロッグエディターの特徴
![ブロックエディター使い方](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image.png?resize=1024%2C369&ssl=1)
ブロックエディタは従来の記事作成と違い、
記事の構成パーツをブロックという形で
扱い作成していきます。
ブロックエディタのメリット
ブロックエディタのメリットは
従来のクラッシックエディターや
無料ブログなどの記事作成とは違い、
視覚的な操作で記事作成が出来るところです。
従来のブログ記事作成では
編集画面はざっくり言うと
HTML編集と観覧用のまま作成する
記事作成をするというものが一般的でしたね。
例えばワードなどに近い感覚で作成する感じでしたが
ブロックエディタの記事作成は
Note(無料ブログ)に近いイメージです。
コンテンツ(見出し、1文、1画像など)を
それぞれブロックとして組み立てていく感じです。
それぞれの装飾も簡単です。
ブロックにコンテンツを当てはめることで
すぐ上に装飾バーが出てきます。
![ブロックエディター使い方](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-40.png?resize=1024%2C395&ssl=1)
このバーで見出し、文装飾、画像加工、
内部リンク挿入、ブロックの移動などが出来ます。
これをすることでレイアウトを細かく調整できるので
見た目が良くなり、リソースコードも綺麗になり
SEO的にも有効になるというメリットがあります。
ブロックエディタのデメリット
ブロックエディタのデメリットは慣れれば
従来の記事作成より快適ですが
従来の記事作成のものに慣れ過ぎていると
違和感を感じます。
従来のものだとタイトルと本文が完全に別れていて、
装飾は本文上と固定されています。
ですがブロックエディタの場合
タイトルはただ一番上にあるという感じです。
また装飾などの項目の場所を変えられたりするので、
パッと見た感じ色んな場所に触るものがあるので
混乱すると思います。
![ブロックエディター使い方](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-42.png?resize=1024%2C457&ssl=1)
一度触って慣れてしまえば使いやすいですが、
一番のデメリットは抵抗感で嫌になってしまうとことです。
冒頭でも言いましたがワードプレスの標準が
ブロックエディタになり、近い将来、
従来のクラッシックエディタはなくなるらしいので
早めに慣れてしまいましょう。
ブロックエディタの使い方【入門】
ここからはブロックエディタの基本的な使い方を説明していきます。
まずはブロックエディタの上部ツールの解説をしていきます。
ブロックエディタの上部ツールの説明
上部のツールを知ることでほぼ全ての操作性が分かります。
![ブロックエディター使い方](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-72.png?resize=1024%2C328&ssl=1)
左から順に説明します。
![](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-73.png?resize=57%2C65&ssl=1)
ワードプレスのダッシュボードへ戻ります。
![](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-74.png?resize=38%2C40&ssl=1)
左カラムツールを表示します。
![ブロックエディター使い方](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-75.png?resize=950%2C835&ssl=1)
![](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-76.png?resize=43%2C46&ssl=1)
通常の編集とブロックの選択を切り替えます。
![](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-77.png?resize=92%2C50&ssl=1)
右は戻る、左は進めるで操作した編集を間違えてしまった場合
進めたい場合などに使います。
![](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-78.png?resize=45%2C47&ssl=1)
記事の概要を表示(文字数、見出し数、ブロック数などを確認)
![ブロックエディター使い方](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-79.png?resize=447%2C787&ssl=1)
![](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-80.png?resize=60%2C47&ssl=1)
記事内のアウトライン(段落や画像)の配置を確認し
クリックすることでそのアウトラインへ移動できます。
![ブロックエディター使い方](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-81.png?resize=385%2C797&ssl=1)
![](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-82.png?resize=292%2C58&ssl=1)
これは通常のブログと同じで記事を下書き、
プレビュー、公開です。
![](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-83.png?resize=35%2C45&ssl=1)
右カラムを表示します。
![ブロックエディター使い方](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-84.png?resize=342%2C741&ssl=1)
![](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-68.png?resize=45%2C43&ssl=1)
これも右カラムですが記事編集画面を少し変えたり、
エディタの種類を変えたり、設定、ヘルプなどを表示します。
![ブロックエディター使い方](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-85.png?resize=393%2C788&ssl=1)
ブロックエディタで記事を書く
まず初めにワードプレスのダッシュボードより
記事投稿を開くとこんな画面になります。
タイトルはそのままタイトル入力で
「文章を入力、または/でブロックを選択」を
選択することで記事本文を書きます。
![ブロックエディター使い方](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-43.png?resize=1024%2C452&ssl=1)
記事を書き始めるとこんな感じになります。
タイトルはそのままタイトルですが、
本文はエンターキーで改行した場合、
文と文の間隔が多少広くなります。
![](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-44.png?resize=1024%2C450&ssl=1)
次に本文の文章を改行せず
そのまま続けて書いた場合はこんな感じです。
![](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-45.png?resize=1024%2C445&ssl=1)
記事をプレビューで見ても記事作成時と
改行具合の間隔や改行せずに
書いた感じは変わりません。
![](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-46.png?resize=1024%2C663&ssl=1)
ブロックエディタで特殊な改行方法
ああああああ
ああああああ
↑こんな感じで改行したい場合は
改行したい部分で
「shiftキー」を押しながら
「Enterキーを」押すと出来ます。
クラシックエディタと比べ
改行間の間隔が結構広いと思う場合もあります。
その場合はダッシュボードで
改行間の間隔を狭くする設定をしましょう。
改行の幅調整はこちらの記事で詳しく解説しています。
画像の入れ方
画像を挿入したい場合は左上のをクリックして
スクロールするとメディア欄に画像という項目が出てくるので
選択すれば画像を記事に入れられます。
![](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-47.png?resize=830%2C374&ssl=1)
ブロックエディタのツールバー機能 【見出し、文章加工、リスト、リンク、ブロック移動など】
文章の装飾も簡単で文章を書くと
すぐ上にツールバーが表示されます。
これでだいたいの文章装飾が可能になります。
![](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-50.png?resize=824%2C424&ssl=1)
![](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-51.png?resize=830%2C368&ssl=1)
![](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-69.png?resize=1024%2C458&ssl=1)
ツールバーの一覧表
左から順に解説していきます。
![](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-52.png?resize=883%2C58&ssl=1)
![]() | 文を見出し、引用、リストなどへ変換 |
![]() | ←この部分を掴みながらブロック(文、画像)を好きな位置へ移動 |
![]() | ブロックを上下へ移動 |
![]() | テキストの配置設定 中央寄せ、左右寄せ |
![]() | 文字の太さ、色替え |
![]() | 文字背景へ色付けマーカー、マーカーアンダーライン |
![]() | 選択した文字を色別のバッジ(アイコンみたいの)にする バッジ |
![]() | フォントサイズの変更 |
![]() | ショートコードの挿入、記事一覧などの挿入やダッシュボードで設定した広告などを挿入できる |
![]() | テンプレートの挿入、あらかじめ用意した広告などを挿入できる |
![]() | アフィリエイトタグの挿入、あらかじめ用意した広告などを挿入できる |
![]() | 選択した文字を太文字にする |
![]() | イタリック変換(文字を斜めにするが日本語には対応してない)aaaaa→aaaaa |
![]() | 外部、内部リンクの挿入 |
![]() | 様々な装飾(ふりがな、インラインコード、インライン画像、キーボード入力、文章上下付き、取り消し線) |
![]() | ブロック設定(コピー、複製、前後ろにブロック挿入、移動、HTML編集、再利用ブロックへ追加、グループ化、削除) |
ブロックエディタ右側のカラムツールの表示・機能(アイキャッチ画像、カテゴリ、タグ設定など)
右側のカラムでは投稿と
ブロックの2種類の操作が出来ます。
![](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-70.png?resize=1024%2C459&ssl=1)
投稿の方が長くなるのでブロックから説明します。
右カラムのブロック
右カラムのブロックを選択して
作成した文章や画像を選択すると
簡単な編集や装飾ができます。
![](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-71.png?resize=1024%2C319&ssl=1)
文章の場合
- フォントサイズ、
- 背景、文字色の変更、
- ドロップキャップ(先頭文字を大きな表示にする)、
- 高度な設定(HTMLアンカー、追加CSSクラス)の変更、
- 挿入
ができます。
画像の場合は
- スタイル
- Altテキスト
- 画像サイズ
- 高度な設定(タイトル属性、HTMLアンカー、追加CSSクラス)
が出来ます。
右カラムの投稿
投稿はその名の通りですが
投稿する際の設定が出来ます。
アイキャッチ画像とカテゴリ、タグ作成
![](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-48.png?resize=1024%2C454&ssl=1)
もし右側のカラムが表示されていない場合は
右上の部分をクリックすれば表示します。
投稿とブロックという項目が出てきますが
投稿をクリックすると
記事投稿時に作成したい項目がずらっと出てきます。
それぞれをクリックすれば編集できます。
よく使うのはアイキャッチ画像と
カテゴリ、タグだと思います。
その他の設定
- パーマリンク(記事のURL)の個別設定(ダッシュボードにてカスタムURL選択が必要です。)
- 抜粋は「続きを読む」の設定をした際に表示されるものです。
- ディスカッションはコメントの許可、ピンバックとトラックバックの許可をどうするかです。
- AMPはスマホなどのモバイル端末に最適化するかを決めます。
ここはワードプレスのテーマテンプレートによって少し項目が変わり、メモなどはcocoonというテーマでのみ表示されるものです。
![](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-49.png?resize=1024%2C459&ssl=1)
ブロックエディタ左側カラムツールの表示・機能(様々な装飾と挿入)
ここまでを使えれば
基本的な記事作成をすることには
困らないでしょう。
後は左カラムに表示される部分ですが
ツールバーの強化版といったところです。
左カラムが表示されていない場合は
上部左側のをクリックすれば表示されます。
ブロックとパターンに分かれており
ブロックは記事内の文章の装飾などができます。
ブロック
ブロックは
- テキスト、
- メディア、
- デザイン、
- ウィジェット、
- 埋め込み
- テーマによっては文字範囲の枠や吹き出し
の挿入ができます。
・テキスト
テキストは文字の加工です。
よく使うことになるのは見出し、リストでしょう。
![](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-86.png?resize=411%2C587&ssl=1)
・メディア
メディアは画像、動画などを
記事内に埋め込む際に使用できます。
![](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-87.png?resize=409%2C485&ssl=1)
・デザイン
![](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-88.png?resize=392%2C443&ssl=1)
・ウィジェット
![](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-89.png?resize=397%2C584&ssl=1)
・埋め込み
埋め込みはSNSの投稿などを記事内に記載する際に使用します。
![](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-90.png?resize=382%2C537&ssl=1)
![](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-91.png?resize=399%2C649&ssl=1)
装飾したいものの上でカーソルを合わせると
プレビューが表示されます。
お使いのワードプレステーマによって
使用できる独自の装飾も
ここに収められています。
パターン
パターンはボタンの挿入や
予め用意したテンプレートを
記事内へ挿入できます。
ボタン、カラム、ギャラリー、ヘッダー、テキストの
項目を選ぶことができ、
選択するとプレビューが出てきます。
![](https://i0.wp.com/syu1987.com/wp-content/uploads/2021/03/image-92.png?resize=423%2C566&ssl=1)
テーマによっては文字範囲の枠や吹き出し
これはお使いのテーマやプラグインにもよりますが
それによって文字範囲を囲ってくれる
枠などの装飾が出てくる場合もあります。
例えば無料テーマであるcocoonを
使用している場合↓
![](https://i0.wp.com/syu1987.com/wp-content/uploads/2022/02/image-163.png?resize=499%2C563&ssl=1)
このようなものが追加表示されます。
室内ボックス
白抜きボックス
付箋ボックス
タブボックス
![](https://i0.wp.com/syu1987.com/wp-content/themes/cocoon/images/man.png?w=1256&ssl=1)
吹き出し
ブログカード
このようなものが追加できます。
以上で左カラムの紹介を終わります。
ブロックエディタの使い方・編集の全てまとめ
以上でブロックエディタの説明を終わりますが、
クラシックエディタや無料ブログ画面との
ブロックエディタの記事作成画面の違いに
惑わされずに使用してみれば、
意外と簡単で使いやすいです。
まずはタイトル、ブロック、画像挿入を理解して
通常と同じように記事を書いてみましょう。
装飾などはやりながら覚えられるので
積極的に使ってみましょう。
ワードプレスのその他の機能について知りたい場合は
こちらの記事にまとめてあるので
参考にしてみてください。
- nelio contentの使い方【主要SNS自動化】時短の極意とは?
- レンタルサーバー【個人】比較一覧【表アリ】
- レンタルサーバーの注意点は?【初心者ガイド】
- WordPress記事内にワンクリックコピーでクリップボード保存!プラグイン【Copy Anything to Clipboard】とは?
- WordPressアプリの使い方【図解アリ】
- WordPressから各SNSへ自動投稿するプラグイン設定で時短集客する方法
- Googleサーチコンソールをcocoonに設定する方法
- wordpressからfacebookへ自動投稿する方法
- wordpressでinstagramへ自動投稿する無料プラグイン
- WordPressでX(Twitter)自動投稿するプラグイン厳選2選
- Jetpackでinstagramと連携する方法
- WordPressメタタグ追加【初心者でもSEO効果がある書き方】
- サイトをGoogle検索エンジンにヒットさせない方法
- WordPressでインデックスするプラグイン【自動登録】とは?
- 画像に枠線を入れる【Wordpressブロックエディタ】
- 【サイトマップ】プラグインおすすめ自動生成の2ステップとは?
- WordPress内部リンク貼り方【SEO効果抜群の3つのコツ】
- WordPressブログの始め方・実践≪完全ガイド≫
- Twitter(SNS)とワードプレスを連携し自動投稿する簡単な方法
- 【ブログの方向性が決まらない】時の極意とは?
- ブログ内の画像へピンタレスト保存を表示させる方法
- ブログとピンタレストを連携方法【ブログPVアップ】
- WordPressテーマ何を使えばいいか【自動設定4選の紹介】
- ピンタレストブログ連携【シェアボタン】を表示する方法
- cocoonで画像に枠線を入れる・消す方法
- 【ワードプレス内部リンクで自分からコメント】を15秒で解決
- GoogleサーチコンソールをWordpressへ設定する方法
- WordPress【ブロック】編集・作成・移動方法
- ワードプレスで改行できない・消える・行間が広い場合の対処法
- WordPressクラシックエディタ切り替え方法【プラグインなしもあり】
コメント