deckspace

PDA・デジモノ・その他雑多なジャンルからのレポートやWeb情報、テキトーに書かれる私的日記などからなるブログです。不定期更新。(・∀・)ノ ヨッポ

【WordPress】ブロックエディタでテキストの一部の色を変えるのはクラシックエディタに切り替えるのが結局早い

WordPressで記事を書く場合に利用するエディタには新旧ありますが、新エディタ(ブロックエディタ・グーテンベルクともいう)ではこんなふうにテキストの一部の色を変える機能が何故かない。じゃあどうすればいいか。

旧エディタを使えば問題はないけど

何故かは知らねどブロックエディタで一部テキストの色を変更しようとすると、そのブロック全体の色が変わってしまうという変な仕様になっていて、未だに改善されていない模様です。

結論的に言えば、旧エディタを使う限りは全く問題ない。僕もブロックエディタ(グーテンベルク)を使うのに全く慣れないので普段はクラシックエディタのプラグイン(classic-editor)を入れて旧エディタで編集しています。

 

しかし一部記事ではやむを得ずブロックエディタ使うことがある

ブロックエディタは直感的にブロックのスタイルを(たとえば見出しのスタイルを網掛けだとか上下二重線だとかに)変更できるのが便利なので、作るページによってはブロックエディタのほうが便利な場合もあります(自分でCSSとかいじればいいんでしょうが・・・)。

じゃあどうすればいいか。

いろいろ検討した結果、結局はブロックエディタと旧エディタを切り替えて使うのが手っ取り早いという結論に落ち着きました。

 

ブロックエディタで作ったスタイルを旧エディタでそのまま使うには

ブロックエディタで直感的に作ったスタイルを旧エディタでそのままつかうにはどうすればいいか。

僕の今の所のやり方としては、まずブロックエディタを使ってブログのテンプレートを作る。これをテンプレ化する(僕はTinyMCE Templatesというプラグインを使っています)。

 

このテンプレをそのまま旧エディタで使う。すると旧エディタでもブロックエディタのスタイルをそのまま利用できるようになります。

あとは旧エディタでテキストに色を付けたりしたあと、ブロックエディタに再び切り替えて仕上げを行うという流れです。

 

ブロックエディタでエラーが出る場合は

ところで、やってしまうと後にブロックエディタに切り替えたときに次のようなエラーが出てしまう場合がある。

このブロックには、想定されていないか無効なコンテンツが含まれています。

それは旧エディタにブロックエディタのテンプレを貼ったあと、いきなり「ビジュアル」から「テキスト」に切り替えて編集した場合だ。それをしてしまうと自動的に一文ごとに<p></p>の段落タグが付いてしまう仕様のよう。

そこで旧エディタの「テキスト」で編集したい場合はいったん「ブロックエディタに切り替え」てから、再度旧エディタに切り替える必要がある。そうしておくと勝手な段落タグはつかない。

もし上記エラーが出た場合はテキストから段落タグを削除してもいいが、新規作成からやりなおすほうが手っ取り早い。

 

まとめ

というわけで、旧エディタを使ってるけどブロックエディタで作ったスタイルも使いたい、けど部分的な色が付けられない、という場合は、ブロックエディタで作ったスタイルをテンプレ化して旧エディタに貼り付け、部分的な色変えも旧エディタで行ったあと、新エディタに切り替えて仕上げをする、というような方法が手っ取り早くておすすめです。