WORDPRESS

【2021年】Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法を初心者向けに解説【WordPressプラグイン/クラシックエディタ版】

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法
 

あずきです🐥

WordPressをやるなら確実に入れておきたい、おすすめなプラグインの1つ…

Advanced Editor Tools
(旧:TinyMCE Advanced)

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

 

まず!

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 top-01

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

  • アイコンの種類を増やしたり
  • アイコンの配置を並べ替えたり
  • 使わないアイコンを非表示にしたり

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

WordPressには実質「必須」とも言えるくらい定番で、もちろん無料のプラグイン!
 

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 top-02

↑ このように…

  • ブロックエディタ(=グーテンベルグ)用の設定
  • 旧エディタ(=クラシックエディタ)用の設定

という【2パターン】の編集エディタにわかれていますが、今回ご紹介していくのはあくまで…

旧エディタ(=クラシックエディタ)

における設定手順です

 
 

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

  1. 「Advanced Editor Tools」の導入手順【インストールと有効化】
  2. 「Advanced Editor Tools」の基本的な設定方法
  3. ツールバーの「2行目以降」のアイコンが表示されない場合の対処方法

さっそく見ていきましょー🐥

 

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

今ならプラグイン「すごいもくじLITE」を期間限定で配布中!

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

【2021年】Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法を初心者向けに解説【WordPressプラグイン/クラシックエディタ版】

ステップ1:Advanced Editor Tools(旧:TinyMCE Advanced)をWordPressに導入する手順【インストール&有効化】

WordPress ヘッダー c-01

 

注意

プラグインを使用することで、ご利用中のWordPress環境などによっては不具合が生じてしまう可能性があります。 プラグインの使用に際しては、あらかじめデータやファイルをバックアップされたうえで、ご自身の責任にて行ってください

 

関連:WordPressプラグイン「BackWPup」の設定方法を初心者向けに解説【ブログに必須な自動バックアップ】

 

はじめに…

プラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の導入手順

について

 

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

WordPressプラグイン インストール 1-01

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

 

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

WordPressプラグイン インストール 1-02

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-1-01

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

 

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

WordPressプラグイン インストール 1-03

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

今度は本題の「設定方法」を見ていこう!

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

今ならプラグイン「すごいもくじLITE」を期間限定で配布中!

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

 

ステップ2:Advanced Editor Tools(旧:TinyMCE Advanced)の基本的な設定方法【旧エディタ「クラシックエディタ」版】

WordPress ヘッダー c-02

 

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

「Advanced Editor Tools」の基本的な設定方法

について

 

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-top-01

↑ 設定 > Advanced Editor Tools(TinyMCE Advanced) をクリックします

 

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-top-02

↑ こちらの「旧エディター (TinyMCE) 」というタブをクリックしましょう

 

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

  • ツールバー設定
  • オプション設定
  • 上級者向け設定
  • 管理設定

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

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

ツールバー設定

WordPress ヘッダー c-03

 

まずは…

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-1-01-a

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

 

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-1-01-b

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

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

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

各種アイコン

を選択していきます

 

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-1-02-a

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-1-02-b

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

 

例えば!

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-1-03-a

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-1-03-b

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-1-03-c

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-1-03-d

↑ ドロップ(=クリック解除)するだけ

 

反対に!

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-1-04-a

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-1-04-b

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

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

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-1-05

↑ こちらになります

あとから変更はいくらでも可能だから、まずはとりあえずでセットしてみよう!
 

ということで!

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-1-06-a

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-1-06-b

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

 

ちなみに!

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-1-07

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

導入しているテーマ

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

上の画像例は、「AFFINGER」の場合だよ!
 
 

そしてもう1点!

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-1-08

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

「自分の画面とぜんぜん違う…」という場合は、「テキスト」モードになってないか確認しよう!
 
 

ということで…

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

 

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

ここからは一瞬だよ!
 

オプション設定

WordPress ヘッダー c-04

 

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

Advanced Editor Tools(TinyMCE Advanced) > 「旧エディター (TinyMCE) 」タブ

の画面内で、今度は…

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-2-top

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

 

基本的にはデフォルト設定のままでOKですが、唯一…

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-2-01-a

↑ こちらの「フォントサイズ」という項目だけ、チェックを入れておきます

 

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-2-01-b

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-2-01-c

↑ この状態から…

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-2-01-d

↑ このように、その種類を大幅に増やすことができます

 

ちなみに!

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-2-01-e

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

導入しているテーマ

ごとの機能が反映されている可能性が高いです

上の画像例も「AFFINGER」の場合だよ!
 

ということで…

「フォントサイズ」の項目にチェックを入れたら、この【オプション】エリアにおけるそのほかの項目については、通常デフォルトのままでOKです🐥

 

上級者向け設定

WordPress ヘッダー c-05

 

はじめに

この「上級者向け設定」については、プラグイン「Classic Editor」を有効化しているかどうかによって、表示される項目が若干変わってきます

 

ここでは、「Classic Editor」をすでに有効化している前提で解説していきます

 

「Classic Editor」の概要と導入手順については、こちらをどうぞ ↓

WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで
【2021年】WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで1から解説

続きを見る

 

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

Advanced Editor Tools(TinyMCE Advanced) > 「旧エディター (TinyMCE) 」タブ

の画面で、今度は…

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-3-top

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

 

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-3-01-a

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

 

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

自動変換

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

 

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-3-01-b

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-3-01-c

↑ このように…

  • pタグ(=段落のこと)
  • brタグ(=改行のこと)

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

 

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

ブログに広告を貼れるようになったとき

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

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

ということで…

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

 

管理設定

WordPress ヘッダー c-06

 

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-2-4-top

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

 

ということで!

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

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

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

今ならプラグイン「すごいもくじLITE」を期間限定で配布中!

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

 

ステップ3:Advanced Editor Tools(TinyMCE Advanced)で、ツールバーの「2行目以降」のアイコンが表示されない場合の対処方法【原因は「ツールバー切り替え」アイコン】

WordPress ヘッダー c-07

 

最後の3つ目のステップでは、今回の「Advanced Editor Tools(旧:TinyMCE Advanced)」でありがちなトラブルである…

ツールバーの「2行目以降」のアイコンが表示されない

といったケースの対処方法について、サクッと解説しておきたいと思います

 

というのも、WordPressでは例えば…

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-3-01

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-3-02

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

 

原因はズバリ…

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-3-03

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

 

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

ツールバーの「2行目以降」は非表示

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

WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」の基本的な設定方法 1-3-04

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

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

ちなみに!

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

  • ツールバーの「2行目以降」には設置できない! ※一旦セットしても、「変更を保存」をクリックするとアイコンが消えます
  • 反対に「1行目」のなかであれば、どの場所にセットしてもOK! ※試してみたところ、右端ではなくてもちゃんと機能します

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

▼ 「クラシックエディタ」の基本的な記事作成については、こちらをどうぞ ▼

あずきのWordPressブログガイド 第7章「記事編」TOP アイキャッチ
【2020年】ワードプレスで記事を作って投稿しよう!【あずきのWordPressブログガイド/第7章TOP】

続きを見る

 

今回の記事はこちらの章に属しています

 第4章 プラグイン 編         

次の章はこちらからどうぞ

 第5章 サイトマップ 編        

全9章のTOPです

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

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

ACTION AFFINGER6

 

 ✔ 洗練されたビジュアルと、ターゲットに合わせた「変幻自在」な柔軟性!

 ✔ 時間のかかる面倒なカスタマイズも、「クリック1つ」でさくさく実現!

 ✔ 本気で戦うためのSEO対策と、「稼ぐ」に特化したアフィリエイト機能!

今ならプラグイン「すごいもくじLITE」を期間限定で配布中!

※新エディタ「グーテンベルグ」への対応が強化されましたが、「クラシックエディタ」も引き続き使用できます

 

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで
【2021年】WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで1から解説

続きを見る

 

About me

あずきアイコン main-01 背景透過

- 専業ブロガー・フリーランス -

あずき

 

独立4年目 / 元アパレル → 歴10年

 

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter(@azuki_rinrin)にわりといるので、覗いてもらえると嬉しいです^^

-WORDPRESS