2021/08/28 (更新日: 2021/12/02)

【2021年最新】Advanced Editor Tools(旧：TinyMCE Advanced)の設定方法と使い方を画像で徹底解説【WordPressプラグイン】

※本ページにはプロモーションが含まれている場合があります。

こんな方におすすめです。

・WordPressでエディターをカスタマイズして、効率的に文字装飾をしたい
・Advanced Editor Tools(旧：TinyMCE Advanced)でのカスタマイズ方法や設定方法を知りたい
・Advanced Editor Tools(旧：TinyMCE Advanced)の使い方を画像でわかりやすく知りたい
・Advanced Editor Tools(旧：TinyMCE Advanced)でのおすすめのカスタマイズ方法を知りたい
・Advanced Editor Tools(旧：TinyMCE Advanced)だけでなく、エディターをさらに便利にする方法を知りたい

本記事の内容

Advanced Editor Tools(旧：TinyMCE Advanced)でできること
インストール・設定・カスタマイズ方法・使い方
おすすめのカスタマイズとおすすめの設定
さらにエディターを便利にする方法

以下の経歴と実績を持つなべたろ(@seonabe)が解説するよ♪

なべたろの実績

ライター100名以上の組織の法人を経営→株式譲渡
立ち上げから半年で月間1,000万PVを達成
1年で月間1200万PVを達成
年商約1億円を達成
法人向けコンサル1社あたり月額60~100万円
PVメディア・アフィリエイトサイト・オウンドメディア・企業ブログなどSEOサイトの立ち上げ・コンサル実績多数

本記事を読むと、Advanced Editor Tools(旧：TinyMCE Advanced)の基本的なカスタマイズ方法や使い方だけでなく、SEOに強いおすすめのカスタマイズやエディターをさらに便利にする方法もわかります。

＼　月間1300万PVのプロが解説　／
↓検索順位1位を取りまくったノウハウを4万文字で解説(無料)↓

>> 【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説！

【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説！ブログのSEO対策にも『抑えどころ』があります。検索順位1位を取りまくってブログを爆速で伸ばすためのSEOの基礎から『抑えどころ』まで約4万文字でプロが解説。読者にもGoogleにも評価されるSEO対策とブログ作りのノウハウがまる分かり。初心者から中級者まで学べるブログのSEO戦略の決定版。

Advanced Editor Tools(旧：TinyMCE Advanced)とは
Advanced Editor Tools(旧：TinyMCE Advanced)のインストールと有効化
Advanced Editor Tools(旧：TinyMCE Advanced)の設定方法とおすすめカスタマイズ
Advanced Editor Tools(旧：TinyMCE Advanced)の使い方
Advanced Editor Tools(旧：TinyMCE Advanced)でツールバーにアイコンが1行しか表示されない時の対処法
ビジュアルエディターをさらに便利にする方法
Advanced Editor Tools(旧：TinyMCE Advanced)でビジュアルエディターを便利に！

Advanced Editor Tools(旧：TinyMCE Advanced)とは

Advanced Editor Tools(旧：TinyMCE Advanced)とは、WordPressのエディターに機能を追加するためのプラグインです。

エディター画面に文字装飾や表・動画などを装飾するための様々なボタンを追加してカスタマイズすることができます。

Advanced Editor Tools(旧：TinyMCE Advanced)でカスタマイズしたエディターの例を挙げると、、、

Advanced Editor Tools(旧：TinyMCE Advanced)でのカスタマイズ例

上の画像のように使えるボタンがたくさん増えているよ♪

WordPressのエディターはデフォルトのままでは、以下のような基本的な装飾しかできません。

文字色の変更
テキストの左寄せ・右寄せ・中央寄せ
引用
リスト

など。

これだけだとどれだけ頑張っても読みにくい記事しか作れないよ。。。

Advanced Editor Tools(旧：TinyMCE Advanced)を導入することで、例えば以下のような装飾や機能を使えるようになります。

文字サイズを変更する
テキストに背景色をつける
アンカーリンクを設置する
表の挿入や編集
YouTube動画の挿入
画像の回りに余白作る

とっても簡単に記事をおしゃれにすることができるので、読者に読まれてSEOに強いサイトにすることができます。

WordPressでブログを書くなら必須とも言えるプラグイン！

非常に多くのブロガーが愛用している超王道のプラグインです。

なお、Advanced Editor Tools(旧：TinyMCE Advanced)では、

このように以下の2つのエディターの設定が別々に分かれていますが、

新エディターであるブロックエディター(Gutenberg)
旧エディターであるクラシックエディター

Advanced Editor Tools(旧：TinyMCE Advanced)はクラシックエディターで使うことが大半なので、今回はクラシックエディターでの設定と使い方を詳しく解説します。

僕もクラシックエディターで書いているよ♪

クラシックエディタの使い方とGutenbergについては以下の記事で詳しく解説しています。
>> 【2021年】Classic Editorでクラシックエディターに戻す方法！Gutenbergとの違いとは？【WordPress】

それでは次の章から、Advanced Editor Tools(旧：TinyMCE Advanced)の使い方をインストールから順に解説していきます。

⇡目次へ戻る

Advanced Editor Tools(旧：TinyMCE Advanced)のインストールと有効化

まずはインストール！

WordPressの管理画面から「プラグイン」→「新規追加」をクリックします。

プラグインの検索窓に「TinyMCE Advanced」(もしくは「Advanced Editor Tools」)と入力して検索します。

上の画像のプラグインがAdvanced Editor Tools(旧：TinyMCE Advanced)になるので、「今すぐインストール」をクリックしてインストールします。

インストールが完了したら「有効化」ボタンをクリックします。

「プラグインを有効化しました。」と表示されて、インストール済みプラグインの一覧の画面に切り替わったらAdvanced Editor Tools(旧：TinyMCE Advanced)のインストールと有効化は完了です。

⇡目次へ戻る

Advanced Editor Tools(旧：TinyMCE Advanced)の設定方法とおすすめカスタマイズ

次はエディターのカスタマイズ！！

次はAdvanced Editor Tools(旧：TinyMCE Advanced)の設定方法とカスタマイズ方法について、以下の4つのステップに分けて解説します。

ツールバーのカスタマイズ(←これがメイン！！)
オプション設定
上級者向け設定
管理設定

ちなみにステップ1の「ツールバーのカスタマイズ」がメイン！ステップ2~4は一瞬で完了するよ♪

【Step1】ツールバーのカスタマイズ

まずはツールバーのカスタマイズ方法を解説します。

エディター画面のボタンを追加したり、あるいは減らしりすることができます。

おすすめのボタン一覧とボタンの効果の一覧も後ほど紹介するよ♪

まずはカスタマイズするための設定画面を開いていきましょう。

WordPressの管理画面から「設定」→「Advanced Editor Tools(TinyMCE Advanced)」をクリックします。

「旧エディター(TinyMCE)」をクリックします。

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

チェックが入っていると、エディター画面の上の画像の箇所が表示されます。

チェックを外すと非表示にできるけど、表示しておくのがおすすめ！

上の画像の箇所が、自分のエディターになります。

memo

このエリアにあるボタンや並び順が、実際のエディター画面でのボタンや並び順に表示されます。

上の画像のエリアが使っていないボタンの一覧です。

つまり、使うボタンは上のエリアに、使わないボタンは下のエリアに配置するということ！！

ボタンを追加・非表示・並び替えする方法を順番に具体的に解説していきます。

【Step1-1】ボタンを追加する

自分のエディターのツールバーにボタンを追加するには、

「使用しないボタン」エリアから追加したいボタンを選んで、上のツールバーの好きな場所にドラッグ&ドロップで移動させるだけです。

例えば「下線」のボタンを追加したい場合は、

「下線」のボタンをこのようにドラッグ(クリックしたままマウスを移動すること)していき、

ツールバーの好きな場所までドラッグで移動させて、

設置したい場所でドロップ(クリックを離すこと)をすると、上の画像のようにボタンが追加されます。

他のボタンでも同じだよ♪

【Step1-2】ボタンを非表示にする

逆にツールバーからボタンを非表示にしたい場合は、上のエリアから下のエリアにドラッグ&ドロップすればOKです。

例えば太字のボタン「B」を非表示にする場合は上の画像のように、「B」ボタンをドラッグしていき、

使用しないボタンのエリアでドロップすると、

ツールバーから「B」ボタンが非表示になります。

【Step1-3】ボタンを並び替える

ボタンの並び替えも同じように、移動させたいボタンを移動させたい場所にドラッグ&ドロップするだけでできます。

例えば上の画像のボタン(「アンカー」ボタン)を少し左にドラッグしていくと、

ボタンが移動してそれに合わせて並び順が変更されました。

【補足】おすすめカスタマイズのボタン一覧

ここでは、ツールバーに設置しておくと便利な、おすすめのカスタマイズのボタン一覧を紹介します。

アイコン	ボタン名	ボタンの効果
	段落	h2タグやh3タグなどの見出しを作成する
	フォントサイズ	文字の大きさ(フォントサイズ)を変更する
	太字	文字を太字にして目立たせる
	テキスト色	テキストの色を変更する
	テキスト背景色	テキストに背景色をつけて目立たせる
	イタリック	テキストをイタリック体にする
	下線	テキストに下線をつける
	左寄せ	テキストを左寄せにする
	中央揃え	テキストを中央揃えにする
	右寄せ	テキストを右寄せにする(引用元などで使用)
	両端揃え	テキストを両端に揃える
	ツールバー切り替え	ツールバー2行目以降のボタンの表示・非表示の切り替え
	「続きを読む」タグを挿入	「続きを読む」のリンクを挿入する
	番号なしリスト	ul・liタグでの番号なしリストを作成
	番号付きリスト	ol・liタグでの番号付きリストを作成
	引用	引用であることを示すタグを挿入
	インデントを減らす	段落のインデントを減らす
	インデントを増やす	段落のインデントを増やす
	リンクの挿入/編集	リンクを挿入する
	リンクの削除	リンクを解除してただのテキストに戻す
	テーブル（表）	テーブル(表)を作成する
	画像の挿入/編集	画像の挿入や余白の挿入ができる
	動画を挿入/編集	YouTube動画を埋め込む
	アンカー	アンカー(アンカーリンクのリンク先)を設置する
	コード	コードであることを示すタグを挿入

迷ったらとりあえず上のボタンを全部入れておくのがおすすめ♪

memo

ここまででAdvanced Editor Tools(旧：TinyMCE Advanced)のメインの設定であるツールバーのカスタマイズは完了です。

次の「Step2」から「Step4」までは一瞬で完了できます。

【Step2】オプション設定

「Step2」から「Step4」までは一瞬で終わるよ♪

ツールバーのカスタマイズの画面から下にスクロールしていくと、上のような「オプション設定」の項目があります。

基本的には全てデフォルトのままでOKですが、

「フォントサイズ」にだけチェックを加えておきましょう。

Step2はこれだけ！

「フォントサイズ」にチェックを入れるとどうなるの？

フォントサイズにチェックを入れると、エディタの画面で「フォントサイズ」のボタンから使用できるフォントサイズの選択肢が増えます。

エディタ画面の「フォントサイズ」をクリックすると、、、

通常の場合は上のようになっていますが、

オプション設定で「フォントサイズ」にチェックを入れると、このように使えるフォントサイズがかなり増えています。

不要ならチェックはなしでもOK♪

【Step3】上級者向け設定

オプション設定からさらに画面を下にスクロールすると「上級者向け設定」の項目があります。

ここも基本的にデフォルトの設定もままでOKですが、

「クラシックブロックとクラシックエディター内のパラグラフタグを保持」にだけチェックを加えましょう。

Step3はこれだけで完了！

この設定でどうなるの？

「クラシックブロックとクラシックエディター内のパラグラフタグを保持」にチェックを入れることで、

テキストエディター→ビジュアルエディター→テキストエディター

と画面を切り替えた時に、pタグやbrタグが勝手に消えないようにできます。

通常の場合だと、上のようにテキストエディターでpタグやbrタグを入力しても、

一度ビジュアルエディターに切り替えてからテキストエディターに戻ると、pタグとbrタグが消えてしまっています。

「クラシックブロックとクラシックエディター内のパラグラフタグを保持」にチェックを入れることで、これらが消えないようにできます。

【Step4】管理設定

最後は管理設定の項目ですが、ここは全てデフォルトのままでOKです。

Advanced Editor Tools(旧：TinyMCE Advanced)の設定とカスタマイズはこれで全て完了です。

次は実際にAdvanced Editor Tools(旧：TinyMCE Advanced)のボタンの使い方を解説するよ♪

⇡目次へ戻る

Advanced Editor Tools(旧：TinyMCE Advanced)の使い方

この章では、以下の3ステップに分けて、Advanced Editor Tools(旧：TinyMCE Advanced)を実際にエディターで使う方法を解説します。

まずはビジュアルエディタを開く
ボタンの基本的な使い方
具体的な使い方をボタン別で解説

Step2までで基本を解説、Step3でボタンごとに詳しく解説するよ♪

【Step1】まずはビジュアルエディターを開く

まずは記事の編集画面を開きましょう。

エディターの右上のタブで、「ビジュアル」が選択されていればOKです。

上のような画面になっていればビジュアルエディターになっています。

このような画面であれば、テキストエディターになっているので、「ビジュアル」をクリックしてビジュアルエディターに切り替えましょう。

ビジュアルエディタとテキストエディタについては以下の記事で詳しく解説しています。
>> 【WordPress】ビジュアルエディタ・テキストエディタとは？違いや使い方を解説【クラシックエディタ】
>> 【2021年】Classic Editorでクラシックエディターに戻す方法！Gutenbergとの違いとは？【WordPress】
>> 【WordPress】Classic Editorはいつまで使える？2022年以降もクラシックエディタをサポート！

【Step2】ボタンの基本的な使い方

ボタンの基本をさらっと解説するよ♪

基本的な使い方：パターン①

まずはボタンで文字装飾をしたい部分を選択します。

選択した状態のまま、使いたいボタンをクリックします。

ボタンを使うにはこれだけで完了です。

↑選択した箇所が太字になっています。

基本的な使い方：パターン②

次は色を選択する場合です。

まずは同じように装飾したい箇所を選択したら、使いたいボタンの横にある「▼」のマークをクリックします。

今回は背景色のボタンの「▼」をクリックします。

すると上の画像のように色の選択肢あ表示されるので、使いたい色をクリックすれば完了です。

選択した色で背景色が装飾されました。

【Step3】具体的な使い方をボタン別で解説

Step3では、おすすめのカスタマイズで紹介した以下の12のボタンの使い方をそれぞれ順に解説します。

SEOを強くするために使える便利なボタンばかりだから使い方をしっかり覚えよう♪

段落(見出し)・フォント・文字装飾
文字揃えの使い方
インデントの使い方
リストの使い方(番号あり・なし)
リンク追加・リンク削除の使い方
アンカーの使い方
引用の使い方
表(テーブル)の挿入方法
YouTube動画の挿入方法
画像の右寄せと余白の挿入
コードの使い方
モアタグの使い方

①段落(見出し)・フォント・文字装飾

基本的な文字装飾のボタンは、先ほど基本的なボタンの使い方で解説したように、装飾したい箇所を選択してボタンをクリックすればOKです。

ボタンや見出しはそれぞれ、以下のような装飾のデザインになります。

>> SEOに強いWordPressの見出しの正しい付け方！読まれる見出しのポイントとは？
>> 【コピペで簡単】WordPressの見出しデザインをプラグインなしでおしゃれに変更する方法【初心者】

②文字揃えの使い方

文字揃えには以下の3つのボタンがあります。

・左寄せ
・中央揃え
・右寄せ

適用したい箇所を選択したら、ボタンをクリックすればOKです。

中央揃えにすると上のようになります。

右寄せにするとこのようになります。

右寄せは上の画像のように、引用の中で引用元ページのリンクを設置する時に使われることが多いよ♪

③インデントの使い方

インデントしたい箇所にカーソルを合わせてボタンをクリックします。

その段落のテキストがインデントされます。

・インデントを増やす
・インデントを減らす

の2つのボタンでインデントの数を調整できます。

④リストの使い方(番号あり・なし)

リストは超超超大事なパーツ！！

リストはただの箇条書きや番号付きの箇条書きで使われます。

以下のような理由から重要な機能です。

見やすくわかりやすい
Googleにリストとして内容が伝わる

リスト機能を使わずに自分で箇条書きを書くだけだと、Googleに伝わらないので注意！

リストを使うには、リストにしたい複数の行をまとめて選択してから、リストのボタンをクリックします。

番号なしリストの場合は上のように箇条書きになります。

番号付きのリストにしたい場合は、「番号付きリスト」のボタンをクリックすればOKです。

このように、自動的に番号が振られます。

⑤リンク追加・リンク削除の使い方

リンクもSEOで超重要！

SEOに強い内部リンクの貼り方のコツは以下の記事で解説しています。
>> 【WordPress】内部リンクの貼り方！SEO効果と売上を上げる12の貼り方

リンクにしたいテキストを選択したら、リンクボタンをクリックします。

上の画像の箇所に、リンク先のURLを入力します。

入力が完了したら、矢印のマークをクリックすればリンクの設定が完了です。

リンクが完成しました。

逆に、リンクを解除して通常のテキストに戻したい場合は、

リンクのテキストを選択してから、リンク解除のボタンをクリックすればOKです。

これだけで通常のテキストに戻ります。

SEOに強い内部リンクの貼り方のコツは以下の記事で解説しています。
>> 【WordPress】内部リンクの貼り方！SEO効果と売上を上げる12の貼り方

⑥アンカーの使い方

アンカーとは

同じページの特定の箇所に移動させたり、他のページの途中の箇所に移動させるリンクに使われる、リンク先の目印のこと。

アンカーリンクを使うとSEOもかなり強化できるよ♪

アンカーリンクの詳しい使い方や使い所は以下の記事で詳しく解説しています。
>> 【WordPress】ページ内リンク(アンカー)の設定方法

アンカーリンクのリンク先にしたい箇所にカーソルを合わせたら、アンカーボタンをクリックします。

アンカーのIDを入力する欄が表示されるので、自由に英数字で設定します。

IDとは

idはアンカーの名前のようなものです。適当でOKです。

OKをクリックすると、上の画像のようにアンカーが設置されます。

リンク先のURLに#とidを入力することで、このアンカーに飛ばすリンクを設置することができます。

アンカーリンクの詳しい使い方や使い所は以下の記事で詳しく解説しています。
>> 【WordPress】ページ内リンク(アンカー)の設定方法

⑦引用の使い方

引用もSEOで大事なコンテンツ！

引用を使うには、テキストを選択してから引用ボタンをクリックすれば完了です。

このように、引用マークで囲われて表示されます。

引用はこのように、右寄せとリンクを使って引用元を記載することが多いです。

ちょっとしたポイントだから覚えておこう♪

⑧表(テーブル)の挿入方法

表を挿入にするには、上の画像のアイコンをクリックします。

メニューが表示されるので、「テーブル」をクリックします。

挿入したい表の大きさを選択します。

表が挿入されました。

あとは表のセルごとに、テキストを入力していけばOKです。

⑨YouTube動画の挿入方法

YouTube動画を入れるとSEOで順位が上がりやすくなるよ♪

YouTube動画を埋め込む様々な方法やSEO効果については以下の記事で詳しく解説しています。
>> 【2021年】WordPressブログにYouTube動画を綺麗に埋め込む方法

YouTube動画を記事に埋め込むには、まずは埋め込みたいYouTubeのページを開き、「共有」ボタンをクリックします。

「コピー」をクリックして、YouTube動画のリンクをコピーします。

WordPressのエディター画面に戻り、動画のボタンをクリックします。

ポップアップが表示されるので、先ほどコピーした動画のURLを入力します。

「OK」をクリックすれば、動画の埋め込みは完了です。

このように動画が埋め込まれます。

⑩画像の右寄せと余白の挿入

画像を右寄せしたり、文章と画像の間に余白を増やす方法だよ♪

「メディアを追加」から通常の方法で画像を挿入します。

画像を挿入後、画像をクリックして上のアイコンをクリックすると画像が右寄せされます。

文章と画像が詰まっていて見にくいので、ここに余白を挿入していきます。

画像をクリックしたら、画像のボタンをクリックします。

「高度な設定」をクリックします。

余白をピクセル数で入力して指定します。

「OK」をクリックします。

画像の周りに余白が追加されました。