ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

クラシックエディターで書いた記事をブロックエディター(Gutenberg)で編集する手順を公開

ブロックエディターの便利さに慣れると、もはやクラシックエディターには戻れません。

私もすっかりブロックエディターに慣れた今、たまに過去にクラシックエディターで書いた記事を更新するとき、『あれ?ブロックエディターだと簡単にできるのにな。』と不便さをあらためて感じます。

そこで本記事では、過去にクラシックエディターで書いた記事をブロックエディターへ変更する方法・手順について解説します。

この記事でわかること

クラシックエディターで書いた記事をブロックエディターで編集するときの
・前提となる投稿設定
・ブロックエディターに変換するときの注意点
・実際の手順

ブロックエディター化するための前提となる投稿設定

クラシックエディターで記事を書いている場合は、おそらくブラグインClassic Editorが有効化されている状態だと思います。

そのときの投稿設定が次のようになっていることを確認します。

①ダッシュボードメニュー 設定>投稿設定 を開く

②エディターの切り替え許可を”はい”にしておく

前提となる投稿設定

もちろん、画面の下までスクロールして設定の保存をしておいてください。

ブロックエディター化するときの注意点

クラシックエディターで書いた記事をブロックエディター化する上での注意点です。

  1. いったんブロックエディター化した記事をクラシックエディターに戻すのは難しい。
    (不可能ではありませんが、うまくいかない場合があります)
  2. 見出し・段落・リスト(箇条書き)・画像といった基本となるコンテンツは、問題なく各ブロックに変換されるが、その他のコンテンツ(表、広告などHTMLでベタ書きしたコンテンツ、その他テーマに依存した囲み記事など)はブロック化後に再度入力しなおす必要がある。
  3. クラシックエディターで作成した余白([Enter]キーの繰り返し入力で作成した余白)は、無視される。したがって、あらたにスペースブロックで余白を整える必要がある。

上記の中で一番問題なのは②でしょう。

使用しているテーマにもよりますが、テーマ依存の装飾を使用している場合、レイアウト崩れが出たり、装飾そのものが消えたりする可能性があります。もちろん、テーマ自体がブロックエディター対応もきちんと考えられていれば全く問題ないこともありえます。

したがって不安な場合は、プラグインduplicate postなどで記事を複製してから、ブロックエディターへの変換お試しをしてみることをおすすめします。

実際にブロックエディター化する手順

手順そのものは簡単です。

  1. クラシックエディターを開ける
  2. ブロックエディターに切り替える
  3. ”ブロックへ変換”をする
  4. スペーサーブロックで余白を整える

実際に例を示しながら手順を紹介します。

①クラシックエディターを開ける

編集したい記事をクラシックエディターで開けます

クラシックエディターを開けた事例
事例:ウェブチル内のクラシックエディターで書いた記事

②ブロックエディターに切り替える

画面右の項目エディターでブロックエディターに切り替え”をクリックします。

ブロックエディターに切り替え

すると、記事の本文全体が”クラシックブロックに格納された状態”に変化します。

ブロックエディターに切り替え直後の記事

これがどういう状態なのかを図示すると次のようになります。

クラシックブロックに記事の全要素が入った状態

③”ブロックへ変換”をする

クラシックブロックの上部に表示されているブロックへ変換”をクリックします。

”ブロックへ変換”をクリック

すると、記事本文の各要素がブロックに変換されます

各ブロックに変換された記事事例
各ブロックに変換された記事

これを図にすると次のようになります。
クラシックブロックの1つしかブロックがなかった状態から、複数のブロックに分かれます。

クラシックブロックが各ブロックに変換される

・段落として書かれていた文章は段落ブロックに、
・見出しとして書かれていた文章は見出しブロックに、
・画像は画像ブロックに、

自動的に適正なブロックに変換されるわけです。

④スペーサーブロックで余白を整える

各ブロックの間はまったく余白がない詰まった状態です(クラシックエディターの余白は無視)。
スペーサーブロックを挿入して余白を適度に入れ、読みやすい記事に整えます

スペーサーブロックで余白をあける

ちなみに、スペーサーブロックはブロック一覧の”デザイン”にあります。

スペーサーブロック

挿入したスペーサーブロックは、マウスで掴んで上下に動かすだけで余白の高さを調整できます。

スペーサーブロックで空白高さの調整

私の場合、見出し2の余白は40pxと決めて、作成した余白をブロックのコピーで各見出し2の前に挿入していきますので、作業時間はさほどかかりません。

うまく変換できなかったブロックは再入力する

以上でブロックエディター化は終了ですが、ブロックエディター化するときの注意点②でも書いたように、一部うまく変換されないブロックがあります。これらを必要に応じて再入力します。

例えば、HTMLでベタ書きした広告は、ブロックエディターに変換後なぜか段落ブロックの中に入ったりします。

そこで、このようなブロックは削除して、カスタムHTMLブロックで広告を挿入しなおすのがよいでしょう。

まとめ

クラシックエディターで作成した記事をブロックエディターに切り替える方法と注意点について解説してきました。

解説手順そのものは

  1. クラシックエディターを開ける
  2. ブロックエディターに切り替える
  3. ”ブロックへ変換”をする
  4. スペーサーブロックで余白を整える

と非常に簡単です。

ただし問題となるのは、テーマ独自の装飾などの場合、うまくブロックに変換されない場合があることです。不安な場合は、プラグインduplicate postなどで記事をコピーしてトライすることをおすすめします。

私は現在この方法で、2019年以前にクラシックエディターで作成した記事は、順次ブロックエディター化していってます。

ブロックエディター化すると、レイアウトを簡単に変更したり、カラムブロック化して見やすくするなど、いろいろと見やすい記事にアップデートすることができます。

あなたの古い記事もブロックエディター化をおすすめします。

ブロックエディターの取り扱いに慣れていない方には、次の記事がおすすめです。

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる