あずきです🐥
WordPressをやるなら確実に入れておきたい、おすすめなプラグインの1つ…
Advanced Editor Tools
(旧:TinyMCE Advanced)
について、その導入手順と「基本的な設定方法」をブログ初心者さん向けに1から解説していきます
まず!
この「Advanced Editor Tools(旧:TinyMCE Advanced)」とは、WordPressにおける投稿・固定ページの編集画面で…

↑ こちらの、「ツールバー」と呼ばれるエリアに表示されている各種アイコンについて…
- アイコンの種類を増やしたり
- アイコンの配置を並べ替えたり
- 使わないアイコンを非表示にしたり
といったことができるプラグインです

ちなみに大前提として、「Advanced Editor Tools(旧:TinyMCE Advanced)」の設定は…

↑ このように…
- ブロックエディタ(=グーテンベルグ)用の設定
- 旧エディタ(=クラシックエディタ)用の設定
という【2パターン】の編集エディタにわかれていますが、今回ご紹介していくのはあくまで…
旧エディタ(=クラシックエディタ)
における設定手順です
関連
「クラシックエディタとグーテンベルグってなに…?」という場合は、こちらをどうぞ ↓
-
【2021年】WordPressのクラシックエディタとグーテンベルグとは?初心者向けに1から解説【プラグイン「Classic Editor」の導入方法】
続きを見る
「クラシックエディタ」の今後のサポート状況については、こちらから ↓
-
【2021年版】WordPressクラシックエディタはいつまで使える?2021年末でサポート終了って本当?【少なくとも2022年までClassic Editorは使えそう/代替プラグインもあり】
続きを見る
ということで、今回は3つのステップで丁寧に解説していきます
- 「Advanced Editor Tools」の導入手順【インストールと有効化】
- 「Advanced Editor Tools」の基本的な設定方法
- ツールバーの「2行目以降」のアイコンが表示されない場合の対処方法
さっそく見ていきましょー🐥
2020年1月から毎日コツコツ作ってきたワードプレス初心者ガイド、
・役に立ちました!
・わかりやすかったです!みたいな大変ありがたいお言葉を頂けるケースが最近増えてきたので、改めて載せておきますhttps://t.co/QJohn2MGlF
— あずき@ブロガー (@azuki_rinrin) July 13, 2020
-
【愛用】「WING AFFINGER5」って実際どうなの?気に入ってる点・気になる点をガチレビュー【WordPressのおすすめテーマ/専業ブロガー4年目】
続きを見る
-
WordPressの「タグ管理」とは?どれだけブログに必須な機能か、3分で解説【よく使う文章や広告をテンプレート化/一括修正が最強に便利】
続きを見る
注意
プラグインを使用することで、ご利用中のWordPress環境などによっては不具合が発生してしまう可能性があります。 プラグインの使用に際しては、あらかじめデータを「バックアップ」されたうえでご自身の判断と責任のもと行ってください
-
【2021年】WordPressプラグイン「BackWPup」の基本的な設定方法を初心者向けに解説【ブログに必須な自動バックアップ】
続きを見る
※プラグインを使用されたことで生じたいかなる損失、損害につきましても当ブログでは一切の責任を負いかねます
Contents
- 1 【2021年版】WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の導入手順と、クラシックエディタにおける基本的な設定方法
【2021年版】WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の導入手順と、クラシックエディタにおける基本的な設定方法
ステップ①:Advanced Editor Tools(旧:TinyMCE Advanced)をWordPressに導入する手順【インストール&有効化】
はじめに…
プラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の導入手順
について
WordPress管理画面の左側にある一覧メニューから…

↑「プラグイン」という項目にカーソルを合わせ、開いたメニュー内にある「新規追加」をクリックしましょう
つづいて、画面の右上にある…

↑ こちらの検索フォームに Advanced Editor Tools と入力し、その下の検索結果から…

↑ このアイコンが目印のプラグイン「Advanced Editor Tools」を探します
無事見つかったら…

↑ こちらの「今すぐインストール」ボタンをクリックし、このボタンが…

↑ このように「有効化」という表示に切り替わったことを確認したら、こちらの「有効化」ボタンもクリックして、プラグインの導入は完了です🐥

ステップ②:Advanced Editor Tools(旧:TinyMCE Advanced)の基本的な設定方法【旧エディタ「クラシックエディタ」版】
つづいて【ステップ②】は…
「Advanced Editor Tools」の基本的な設定方法
について
WordPress管理画面の左側にある一覧メニューから…

↑ 設定 > Advanced Editor Tools(TinyMCE Advanced) をクリックします
設定画面が開いたら、今回は「クラシックエディタ」用の設定なので…

↑ こちらの「旧エディター (TinyMCE) 」というタブをクリックしましょう
ここから、「4つ」の設定エリアにわけて解説していきます
- ツールバー設定
- オプション設定
- 上級者向け設定
- 管理設定
といってもメインは1番最初の「ツールバー設定」で、残りの3つは一瞬です🐣

ツールバー設定
まずは…

↑ こちらの「エディターメニューを有効化する。」という項目に、チェックが入っていることを確認しましょう
ここのチェックを入れておくことで、「ツールバー」エリアに…

↑ こちらの行が表示されるようになります

つづいてここから、「ツールバー」エリアに表示させる…
各種アイコン
を選択していきます
やり方はいたって簡単で、画面の上部に表示されている…

↑ こちらの「ツールバー」エリアに、自分が使いたい「任意のアイコン」をセットしていき、反対に「使わないアイコン」については…

↑ こちらのエリア(左上に「使用しないボタン」と表示されている場所!)に、アイコンを移動させていくだけ
例えば!
デフォルトでは「使用しないボタン」側に入っている…

↑ こちらの「下線」というアイコンを「ツールバー」エリアに加えたい場合なら、この「下線」アイコンを…

↑ このようにドラッグ(=クリック押しっぱなしでマウス移動)させていき…

↑「ツールバー」側の好きな場所で…

↑ ドロップ(=クリック解除)するだけ
反対に!
最初から「ツールバー」側にセットされている、例えば…

↑ こちらの「太字」アイコンを「使用しないボタン」側に移したいという場合なら、このアイコンを同じようにドラッグ&ドロップで…

↑「使用しないボタン」側の好きな場所に移せばOKです

参考までに、自分が愛用しているアイコンは…

↑ こちらになります

ということで!
実際に使っていきたいアイコンを「ツールバー」側にセットできたら、今度はツールバー内の並び順を…

↑ 同じくドラッグ&ドロップで…

↑ 自分が使いやすいと思うアイコンの配置に、任意で入れ替えましょう
ちなみに!
実際の投稿・固定ページの編集画面を開いてみると、今回セットした各種アイコンとはまた別で…

↑ このようにいくつかのアイコンが並んでいる可能性がありますが、これらは「Advanced Editor Tools」によって設置されたものではなく…
導入しているテーマ
ごとで追加される、そのテーマ専用のアイコンだったりします

関連
WordPressの「テーマ」については、こちらをどうぞ ↓
-
【2020年】WordPressでテーマ(=テンプレート)をセットしよう!【あずきのWordPressブログ「完全初心者」ガイド/第3章】
続きを見る
そしてもう1点!
今回「Advanced Editor Tools」でセットした各種アイコンというのは、「クラシックエディタ」の編集画面だと…

↑ 右上のタブで、こちらの「ビジュアル」というモードが選択されていないと表示されません

関連
「ビジュアルとテキストってなに…?」という場合は、こちらから ↓
-
WordPressの「ビジュアルエディタ&テキストエディタ」とは?【クラシックエディタにおけるブログ記事編集】
続きを見る
ということで…
ここまでできたら一旦「変更を保存」ボタンをクリックして、【ツールバー設定】については完了です
あとは、残りの細かい設定をサクッと済ませていきましょう🐥

オプション設定
さきほどの「ツールバー設定」と同じく、WordPress管理画面 > 設定 から…
Advanced Editor Tools(TinyMCE Advanced) > 「旧エディター (TinyMCE) 」タブ
の画面内で、今度は…

↑ こちらの「オプション」という設定エリアを見ていきます
基本的にはデフォルト設定のままでOKですが、唯一…

↑ こちらの「フォントサイズ」という項目だけ、チェックを入れておきます
「フォントサイズ」にチェックを入れることで、投稿・固定ページの編集画面で行える…

↑ ここの「フォントサイズ変更」における選択肢が、デフォルトの…

↑ この状態から…

↑ このように、その種類を大幅に増やすことができます
ちなみに!
実際の編集画面を開いてみて、もしも上の画像のような「px」という単位ではなく…

↑ このように「%」になっているという場合、こちらも今回の「Advanced Editor Tools」プラグインとはまた別で…
導入しているテーマ
ごとの機能が反映されている可能性が高いです

ということで…
「フォントサイズ」の項目にチェックを入れたら、この【オプション】エリアにおけるそのほかの項目については、通常デフォルトのままでOKです🐥
上級者向け設定
はじめに
この「上級者向け設定」については、プラグイン「Classic Editor」を有効化しているかどうかによって、表示される項目が若干変わってきます
ここでは、「Classic Editor」をすでに有効化している前提で解説していきます
「Classic Editor」の概要と導入手順については、こちらをどうぞ ↓
-
【2021年】WordPressのクラシックエディタとグーテンベルグとは?初心者向けに1から解説【プラグイン「Classic Editor」の導入方法】
続きを見る
同じく、 WordPress管理画面 > 設定 から…
Advanced Editor Tools(TinyMCE Advanced) > 「旧エディター (TinyMCE) 」タブ
の画面で、今度は…

↑ こちらの「上級者向け設定」というエリアを見ていきます
さきほどの「オプション」エリアと同じく、基本はデフォルトのままでOKですが、こちらも1点だけ…

↑「クラシックブロックとクラシックエディター内のパラグラフタグを保持」という項目に、チェックを入れておくのがおすすめです
この項目にチェックを入れることで、「クラシックエディタ」のテキストモードにおける…
自動変換
の機能を無効にすることができます
具体的には、デフォルト設定のままだと…

↑ こういった「テキスト」モードの状態から、編集画面を1度でも「ビジュアル」モードに切り替え、再度「テキスト」モードに戻してみると…

↑ このように…
- pタグ(=段落のこと)
- brタグ(=改行のこと)
の部分が、「自動変換」によって非表示になってしまうんですね
一見すると「スッキリした印象」にも見えるかもしれませんが、このままだと例えば…
ブログに収益広告を貼れるようになったとき
などに、支障が出かねません

ということで…
「クラシックブロックとクラシックエディター内のパラグラフタグを保持」にチェックを入れたら、この【上級者向け設定】におけるそのほかの項目については、通常デフォルトのままでOKです🐥
管理設定
【上級者向け設定】エリアのさらに下にある…

↑ こちらの【管理】という設定エリアについては、通常すべてデフォルトのままで問題ありません
ということで!
ここまで一通り設定できたら、最後に「変更を保存」ボタンをクリックして、基本的な設定については完了となります🐥

ステップ③:Advanced Editor Tools(TinyMCE Advanced)で、ツールバーの「2行目以降」のアイコンが表示されない場合の対処方法【原因は「ツールバー切り替え」アイコン】
最後の3つ目のステップでは、今回の「Advanced Editor Tools(旧:TinyMCE Advanced)」でありがちなトラブルである…
ツールバーの「2行目以降」のアイコンが表示されない
といったケースの対処方法について、サクッと解説しておきたいと思います
というのも、WordPressでは例えば…

↑ このような形で、ツールバーに「2行目」以上アイコンをセットしても、実際の編集画面を開いてみると…

↑ このように「1行目」だけが表示されて、「2行目」以降は非表示になっていることがあるんですね
原因はズバリ…

↑ こちらの「ツールバー切り替え」というアイコンです
この「ツールバー切り替え」アイコンを「ツールバー」エリアの1行目に入れていると、編集画面を開いたときに…
ツールバーの「2行目以降」は非表示
な状態になり、編集画面上で「ツールバー切り替え」アイコンをクリックすることで…

↑ このように、隠れていた「2行目以降」のアイコンが現れる仕様になっています

ちなみに!
この「ツールバー切り替えアイコン」におけるそのほかのポイントとしては…
- ツールバーの「2行目以降」には設置できない! ※一旦セットしても、「変更を保存」をクリックするとアイコンが消えます
- 反対に「1行目」のなかであれば、どの場所にセットしてもOK! ※試してみたところ、右端ではなくてもちゃんと機能します
この2点を押さえておけば、まずOKです🐥
▼ 「クラシックエディタ」の基本的な記事作成については、こちらをどうぞ ▼
-
【2020年】ワードプレスで記事を作って投稿しよう!【あずきのWordPressブログガイド/第7章TOP】
続きを見る
関連
今回の記事はこちらの章に属しています
\ このブログでも愛用中!/
―― 検証と改善を重ねた唯一無二のテーマ ――
WING AFFINGER5
✔ 洗練された美しいデザイン性と、「変幻自在」な圧巻のバリエーション
✔ 時間のかかる面倒なカスタマイズも、「クリック1つ」でさくさく実現
✔ 「本気で戦う」ための、最適化されたSEO対策と収益UPの機能が標準装備
今なら超時短ツール「タグ管理プラグイン(4,980円)」の無料配布キャンペーン中!
-
WordPressの「タグ管理」とは?どれだけブログに必須な機能か、3分で解説【よく使う文章や広告をテンプレート化/一括修正が最強に便利】
続きを見る
About me
- 専業ブロガー・フリーランス -
あずき
独立4年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^