スポンサーリンク

クラシックエディタで書いた記事をブロックエディタ(Gutenberg)に変えるには?

2020年8月11日WordPress,便利なプラグイン

UUPDATE
  • 2022年03月13日「記事を公開したまま下書き保存できるプラグイン」を書き換えました。

最近ようやくWordPressの新エディタ Gutenberg(グーテンベルク)を使いはじめました。「使いづい」と思っていましたが、使ってみるととても便利で今ではクラシックエディタで記事を書かなくなりました。

きらり
きらり

まだそんなにブロックエディタで記事書いてないでしょ!

結耶
結耶

あははっ。バレてた?確かにまだブロックエディタで数えるくらいしか書いてないけどクラシックエディタより樂~。

ブロックエディタで書いたのはまだ少ないです。もちろんブロックエディタを使いはじめる前はクラシックエディタで書いていたので、当然まだクラシックエディタで書いた記事の方が多いんです。

今後、過去の記事を修正することもありますし、クラシックエディタがいつまで使えるか解りません。なので今回は「クラシックエディタで書いた記事をブロックエディタ(Gutenberg)nに変換するには?」ということを書きたいと思います。

スポンサーリンク

テキストエディタで書いた記事

テキストエディタで書いた記事をブロックエディタで開いてみると、クラシックブロックの中に記事の内容が入っています。

そのままでも記事は編集できますが、クラシックブロックに全部入った状態です。このままでは途中でブロックを追加しようと思っても追加することができません。なのでクラシックブロックの中の記事を「見出し」「段落」などのブロックに変換します。

きらり
きらり

そんなことできるの?なんか難しそうだけど。

結耶
結耶

全然難しくなくないよ。超簡単にできてしまいますっ!だからやってみよう!

ブロックに変換する

クラシックブロックを選択して、ツールの一番右のをクリックして、メニューの中の『ブロックに変換』をクリックしてください。

きらり
きらり

結耶さん…もしかしてだけどこれだけ?

結耶
結耶

はい!たったこれだけです!クラシックブロック1つだったのが各ブロックに変換されてます!

「ブロックに変換」するのは超簡単です。ですが、ブロックに変換するには問題点もあります。

問題点

残念ながらブロックに変換は100%完璧に変換できません。一部レイアウトが崩れてしまったり、背景色や枠線などのスタイルが消えてしまったりします。

どの程度レイアウトが崩れたりするかはやってみないと解りません。

きらり
きらり

どうしたらいいの~?

結耶
結耶

崩れたら修正するしかないよね(^^;)だから必ずブロック変換後はプレビューでまずは確認だね!

ブロック変換したらすぐに更新するのではなく、プレビューで確認してみましょう。修正が必要なら修正してください。

また修正途中で「下書き保存」すると公開している記事は「下書き」状態となり公開されなくなってしまいますのでご注意ください。

記事を編集するときに使うと便利なプラグイン

ブロック変換をするとレイアウトが崩れてしまうかもしれません。それでもブロック変換は簡単にできるし、後々のことを考えるとやっておいた方がいいと思います。

修正に手間取り下書き保存をしたくても公開中の記事を下書きにしてしまうと記事は見れなくなってしまいます。出来れば公開したまま下書き保存(一時的に保存)したいですよね。

そこで記事を公開したまま下書き保存ができるプラグインがあります。ブロックに変換する際や記事の書き直し(リライト)したいときなどに使うと記事を公開したまま「下書き保存」できるので便利です。

2022年03月13日

記事を公開したまま下書き保存ができるプラグイン

公開済みの記事を公開したまま下書き保存ができるようにするプラグインは以下のページにまとめましたのでそちらを参考にしてください。

ブロック間の余白

ブロックに変換後の修正は変換してみないとわかりません。ですが、ブロックに変換すると「余白」がなくなってしまうことがあります。

私も以前していましたが、記事を書くときに改行して余白を作っていました。WordPressにはPタグとBRタグを自動で挿入する機能があります。そのため文字も入っていない行を段落や画像などの間に入れて余白を作っていました。

ですが、ブロックエディタ(Gutenberg)には文字も入っていない行で余白を作ることができません。なのでブロックに変換すると空の行は無視され余白がなくなってしまうんです。

きらり
きらり

どうしたらいいの?

結耶
結耶

CSSでmargin(外余白)を指定する方法もあるけど。それはHTMLの知識がちょっと必要になるしね。
あっ!そういえばブロックエディタには簡単に余白を入れられるブロックがあるよ!

ブロックエディタには余白を作るための『スペーサー』というブロックがあります。スペーサーブロックを使うと簡単に余白を入れることができます。

余白を入れる

余白を入れたい場所の上のブロックを選択します。画面左上のををクリックします。

ブロックの一覧の[レイアウト要素]の中に「スペーサー」というブロックがあるのでクリックして挿入します。

挿入した後画面右上のをクリックして余白の調整をしてください。

きらり
きらり

ほんとうだぁー!簡単に入れられるね。しかも再利用ブロックにすれば毎回余白を調整しなくても使いまわせるね。

結耶
結耶

おっ!再利用ブロックを覚えたねw 再利用ブロックにしておけば同じ同じ高さに統一できるしね。

最後に

今回は「クラシックエディタで書いた記事をブロックエディタに変換する方法」について書いてみました。

クラシックエディタはいつまで使えるかわかりません。というか2021年12月31日までは公式サポートされるようですが、サポートが切れた後どうなるかわかりません。

なので今のうちにブロックエディタに移行しておいた方がいいかもしれません。

クラシックエディタで書いた記事をブロック変換するときに参考にしてください。

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM