【2022年】Advanced Editor Tools（旧：TinyMCE）の設定方法を初心者向けに解説【WordPressプラグイン／クラシックエディタ版】

専業ブロガー５年目のあずきです🐥

WordPressで確実に入れておきたい、超定番プラグインの１つ…

について、その導入手順と設定方法をブログ初心者さん向けに１から解説していきます

「Advanced Editor Tools」は、WordPressにおける投稿・固定ページの編集画面で…

↑ こちらの、「ツールバー」と呼ばれるエリアに表示されている各種アイコンについて…

といったことができるプラグインです

もちろん無料のプラグインだよ！

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

↑ このように…

という「２パターン」の編集エディタにわかれていますが、今回ご紹介するのはそのうちの…

における設定手順となります

ということで、今回は３つのステップで丁寧に解説していきます🐥

さっそく見ていこー！

【2022年】Advanced Editor Tools（旧：TinyMCE）の設定方法を初心者向けに解説【WordPressプラグイン／クラシックエディタ版】

ステップ１：WordPressプラグイン「Advanced Editor Tools」の導入手順【インストールと有効化】

はじめに…

について

WordPress管理画面の左側にある一覧メニューから…

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

つづいて、画面の右上にある…

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

↑ このアイコンが目印のプラグイン「Advanced Editor Tools」を探し、右上の「今すぐインストール」ボタンをクリックします

上の画像例はすでに「有効化」済みの状態だから、「今すぐインストール」ボタンは表示されてないよ！

「今すぐインストール」ボタンが「有効化」という表示に切り替わったら、つづいて「有効化」ボタンもクリックしましょう

↑「プラグインを有効化しました。」と表示されたら、プラグインの「インストール＆有効化」は完了です

お次は肝心の「設定方法」を見ていこう！

ステップ２：WordPressプラグイン「Advanced Editor Tools」の基本的な設定方法【旧エディタ「クラシックエディタ」版】

つづいて２つ目のステップは…

について

WordPress管理画面の左側にある一覧メニューから…

↑　設定　＞　Advanced Editor Tools（TinyMCE Advanced）　をクリックします

設定画面が開いたら、今回は「クラシックエディタ」用の設定なので…

↑「旧エディター（TinyMCE）」というタブをクリックしましょう

ここから、「４つ」の設定エリアにわけて解説していきます

といってもメインは一番最初の「ツールバー設定」で、残りの３つは一瞬です🐣

ということで、まずは「ツールバー設定」から！

ツールバー設定

はじめに…

↑「エディターメニューを有効化する」という項目に、チェックが入っていることを確認しましょう

チェックを入れておくことで、「ツールバー」エリアに…

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

使わなければチェックを外すのもありだけど、最初はチェックありのままが無難だよ！

つづいてここから、「ツールバー」エリアに表示させる…

を選択していきます

やり方はいたって簡単で、画面の上部に表示されている…

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

↑ こちらのエリア（左端に「使用しないボタン」と表示されている場所！）に、アイコンを移動させていくだけ

例えば、デフォルトでは「使用しないボタン」側に入っている…

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

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

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

↑ ドロップ（＝クリック解除）するだけ

反対に！

最初から「ツールバー」側にセットされている、例えば…

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

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

各アイコンの機能は、そのアイコンにカーソルを合わせると表示されるよ！

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

↑ こちらになります

あとから変更はいくらでも可能だから、試しに色々セットしてみよう！

ということで！

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

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

↑ 自分が使いやすいと思うアイコンの配置に、任意で入れ替えましょう

ちなみに！

投稿・固定ページの編集画面（記事作成で実際に使う画面のこと）を開いてみると、今回セットした各種アイコンとはまた別で…

↑ このようにいくつかのアイコンが並んでいる可能性がありますが、これらは「Advanced Editor Tools」によるものではなく…

ごとで追加される、”そのテーマ専用” のアイコンだったりします

上の画像例は、「ACTION AFFINGER6」の場合だよ！

そしてもう１点！

今回「Advanced Editor Tools」でセットした各種アイコンというのは、「クラシックエディタ」の編集画面だと…

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

「自分の画面とぜんぜん違う…」という場合は、「ビジュアル」じゃなく「テキスト」モードになっちゃってないか確認しよう！

ということで…

ここまでできたら一旦「変更を保存」ボタンをクリックして、「ツールバー設定」については完了です

あとは、残りの細かい設定をサクッと済ませていきましょう🐥

ここからは一瞬だよ！

オプション設定

さきほどの「ツールバー設定」と同じく、WordPress管理画面　＞　設定　から…

の画面内で、今度は…

↑ こちらの「オプション」という設定エリアを見ていきます

基本的にはデフォルト設定のままでOKですが、このなかで１点だけ…

↑「フォントサイズ」という項目を、「チェックあり」に変更しておきます

「フォントサイズ」にチェックを入れることで、投稿・固定ページの編集画面で行える…

↑「フォントサイズ」の選択肢が、デフォルトの…

↑ こちらの状態から…

↑ このように、「フォントサイズ」の種類を大幅に増やすことができます

ちなみに！

実際の編集画面を開いてみて、もしも上画像のような「px」という単位ではなく…

↑ このように「％」になっているという場合、こちらも今回の「Advanced Editor Tools」とはまた別で…

が反映されている可能性が高いです

この画像例も「ACTION AFFINGER6」の場合だよ！

ということで…

そのほかの項目については、通常デフォルトのままでOKです🐥

上級者向け設定

同じく、　WordPress管理画面　＞　設定　から…

の画面で、今度は…

↑ こちらの「上級者向け設定」というエリアを見ていきます

さきほどの「オプション」エリアと同じく、基本はデフォルトのままでOKですが、こちらも１点だけ…

↑「クラシックブロックとクラシックエディター内のパラグラフタグを保持」という項目を、「チェックあり」に変更しておくのがおすすめです

この項目にチェックを入れることで、「クラシックエディタ」のテキストモードにおける…

という機能を ”無効” にすることができます

具体的には、デフォルト設定のままだと…

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

↑ このように…

の部分が、「自動変換」によって ”非表示” になってしまうんですね

一見すると「スッキリした印象」にも見えるかもしれませんが、このままだと例えば…

などに、支障が出かねません

ブログ広告は基本的に、「テキスト」モードに切りかえて広告コードを貼りつけるよ！

ということで…

そのほかの項目については、通常デフォルトのままでOKです🐥

管理設定

「上級者向け設定」エリアのさらに下にある…

↑ こちらの「管理」という設定エリアについては、通常すべてデフォルトのままで問題ありません

ということで！

ここまで一通りできたら、最後に右下の「変更を保存」ボタンをクリックして、基本的な設定は完了となります🐥

最後に１点、大事な注意ポイントを見ていくよ！

ステップ３：Advanced Editor Toolsで、ツールバー「２行目以降」のアイコンが表示されないときの対処方法【原因は「ツールバー切り替え」アイコン】

最後のステップでは、「Advanced Editor Tools」でありがちな質問である…

といったケースの対処方法について、サクッと解説しておきます（一瞬です！）

まず実際の画面上で見ると、今回ご紹介した「Advanced Editor Tools」側の設定で…

↑ このように「２行目」までアイコンを仮にセットしても、いざ編集画面を開いてみると…

↑ このように「１行目だけ」が表示されて、「２行目以降」は非表示になっていることがあるんですね

原因はズバリ…

↑ こちらの「ツールバー切り替え」というアイコンです

この「ツールバー切り替え」アイコンを「ツールバー」エリアの１行目に入れていると、編集画面を開いたときに…

な状態になり、編集画面上で「ツールバー切り替え」アイコンをクリックすることで…

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

つまり「ツールバー切り替えアイコン」をそもそも入れていなければ、最初から「２行目以降」も表示されるよ！

ちなみに！

この「ツールバー切り替えアイコン」における、そのほかのポイントとしては…

この２点を押さえておけば、まずOKです🐥

あずきのワードプレスブログ「完全初心者」ガイド

※2021年発表Infotop Affidemy