スタイルが表示されない!TinyMCE Advancedの設定方法と使い方【LION MEDIA】

スタイルが表示されない!TinyMCE Advancedの設定方法と使い方【LION MEDIA】

目次

スタイルが表示されない!?

「考える外国人」[モデル:Max_Ezaki]

WordPressブログを始めてから、かなり長い期間ビジュアルエディタを、ほぼデフォルトの状態で使っていました。

今更ながら、 『TinyMCE Advanced』というビジュアルエディタのプラグインを入れました。

入れてみると、それまでにあったスタイルという、ドロップダウンメニューが消えてしまいました。

この記事では、なぜスタイルが表示されなかったのか、その理由と『TinyMCE Advanced』の設定方法をご紹介します。

TinyMCE Advancedとは?

TinyMCE Advancedは、WordPressのデフォルトのビジュアルエディタより、多彩な設定を行えるプラグインです。

スタイルではマーカーやBOXなど、ブログの装飾設定を行うことができます。

僕がそもそもTinyMCE Advancedを入れたのは、マーカー機能を使ったり文字の大きさを変えたりなど、今まで使えなかった機能も使いたかったからです。

プラグインを入れたとき、この機能が増えたのはいいのですが、僕のブログは、スタイルに入っている装飾だけで行っていました。

これが消えたのには、非常に困りました。

TinyMCE Advancedの設定方法

僕がTinyMCE Advancedを上手く使いこなせていなかったのは、設定がちゃんとできていなかったからでした。

ここでは、設定の仕方を紹介していきたいと思います。

自分が使っているエディタを確認

2018年12月のアップデートでWordPressのエディタは、 Block Editor (Gutenberg)に変わりました。

このアップデートで、それまでに使っていたエディタと大きく仕様が変わりました。

Gutenbergは、慣れると使いやすそうな感じなのですが、旧エディタを使っていた人には使いにくいといった意見が多いようです。

そこで『Classic Editor』というプラグインが登場しました。このプラグインを使うと、今までと同じエディタを使うことができます。

僕はアップデートの日に、Classic Editorを入れてずっと使っていました。

設定が、上手くいかないのは、このプラグインのせいでした。

設定画面を開く

ダッシュボードより、設定画面にカーソルをあわせます。

開いた設定のなかから、TinyMCE Advancedを探してクリックします。すると、以下のような画面になります。

自分が使っているエディタで設定をする

TinyMCE Advancedは、GutenbergとClassic Editorの両方に対応しています。

僕は、ずっとGutenbergにカーソルを合わせて設定していました。

Classic Editorを使っているのに、Gutenbergで設定をして、使っているビジュアルエディタが変わらないことに首を傾げていました。

意外な盲点でした。これだけの問題で、結構な時間を消費しました。

自分が使っているエディタに合わせて、設定を始めましょう。

実際に設定してみる

このプラグインに、立ちはだかる壁はもうクリアしました。あとは簡単です。

自分が使っているエディタで、設定していきます。ここは自分の使いやすいように、項目を設置していきます。

マウスでドラッグすれば移動するので、感覚的にできます。

スタイルも、ここのメニューから選んで配置しましょう。

僕はこんな感じで作りましたが、使いやすいようにアレンジしてみてください。


もっと早くに、TinyMCE Advancedを入れておけばよかったと思いました。濃い色の蛍光マーカーの、使い勝手が非常にいいです。まだ入れていない人は、入れてみてください!

コラムカテゴリの最新記事