TinyMCE Advancedは、記事作成画面のビジュアルエディターを使いやすいように拡張できるプラグインです。
ビジュアルエディターを使えば、記事の中で文字の大きさや色を変えたり、表を作ったりと、HTMLの知識がないと難しいことを簡単に行うことができますが、機能として不足しているものもあります。
TinyMCE Advancedをインストールすると、ビジュアルエディターをカスタマイズして、必要な機能を追加できるのはもちろんのこと、不要な機能を外すことができます。
今回はTinyMCE Advancedのインストールと設定方法をお伝えします。
目次
TinyMCE Advancedのインストールの手順
早速TinyMCE AdvancedをWordPressにインストールしましょう。
![1.png TinyMCE Advancedの設定方法と使い方](https://rocketfactory.info/wordpress01/wp-content/uploads/2018/02/1-6.jpg)
まず、「WordPressの管理画面>プラグイン>新規追加」と進みます。
![2.png TinyMCE Advancedの設定方法と使い方](https://rocketfactory.info/wordpress01/wp-content/uploads/2018/02/2-2.jpg)
「プラグインを追加」画面の入力欄に、「TinyMCE Advanced」を入力して、「ENTERキー」を押します。
![スクリーンショット_2018-03-07_0_25_33.png TinyMCE Advancedの設定方法と使い方](https://rocketfactory.info/wordpress01/wp-content/uploads/2018/03/5bbf9782a07255a0be9fd1986aa2d662.jpg)
「今すぐインストール」をクリックします。
![スクリーンショット_2018-03-07_0_25_53.png TinyMCE Advancedの設定方法と使い方](https://rocketfactory.info/wordpress01/wp-content/uploads/2018/03/7c38420655d70c8f8d106bc1c878ba80.jpg)
「有効化」をクリックします。これでインストールは終了です。
TinyMCE Advancedの設定の方法
![スクリーンショット_2018-03-07_0_26_22.png TinyMCE Advancedの設定方法と使い方](https://rocketfactory.info/wordpress01/wp-content/uploads/2018/03/d4a6f4877758ffbfb330ba3b1fc9bbcc.jpg)
「WordPressの管理画面>設定>TinyMCE Advanced」と進みます。
![スクリーンショット_2018-03-07_0_26_55.png TinyMCE Advancedの設定方法と使い方](https://rocketfactory.info/wordpress01/wp-content/uploads/2018/03/0dfc1533f95c37d9cce27514489e65a4.jpg)
TinyMCE Advancedの設定画面はシンプルです。
・上部に現状のビジュアルエディターで表示しているボタン・機能
・下部に使用していないボタン・機能
このようになっていますので、自分が必要だと思うボタン・機能をドラッグアンドドロップの要領で下から上に移動、自分としては不要なボタン・機能はドラッグアンドドロップで上から下に移動しましょう。
![スクリーンショット_2018-03-07_0_32_11.png TinyMCE Advancedの設定方法と使い方](https://rocketfactory.info/wordpress01/wp-content/uploads/2018/03/3c5a134b2a1ea5dfa839cba0f8670cab.jpg)
例えば「下線」「フォントサイズ」「切り取り」「背景色」「MARK」を、ビジュアルエディターに移動します。
「変更を保存」ボタンをクリックすれば、設定が保存されます。
![スクリーンショット_2018-03-07_0_32_35.png TinyMCE Advancedの設定方法と使い方](https://rocketfactory.info/wordpress01/wp-content/uploads/2018/03/d683330153997378f9ec4ff47e412f77.jpg)
その後、投稿画面のビジュアルエディターで、追加されたボタン・機能が有効になっているかを確認しましょう。
その他の設定
![スクリーンショット 2018-03-08 10.44.08.jpg TinyMCE Advancedの設定方法と使い方](https://rocketfactory.info/wordpress01/wp-content/uploads/2018/03/6ba565a0fd2e902b86e549f332cafa7a.jpg)
設定はデフォルトのままでOKです。
![スクリーンショット 2018-03-08 10.44.15.jpg TinyMCE Advancedの設定方法と使い方](https://rocketfactory.info/wordpress01/wp-content/uploads/2018/03/f5b251c036e21d8000aab7d9c35ca21c.jpg)
高度なオプションはデフォルトのままでOKです。
![スクリーンショット 2018-03-08 10.44.21.jpg TinyMCE Advancedの設定方法と使い方](https://rocketfactory.info/wordpress01/wp-content/uploads/2018/03/dc1ce4167a2f01774c74ab33f947ac59.jpg)
管理では。TinyMCE Advancedの設定をエクスポートとして、他のWordPressで使いたい、あるいは他のWordPressのTinyMCE Advancedの設定をインポートすることができます。
「次のエディター拡張の有効化:」はデフォルトのままでOKです。
まとめ
記事作成画面のビジュアルエディターを多用する場合は、TinyMCE Advancedでボタン・機能をカスタマイズして自分好みのものにしておくほうが、記事作成のスピードになります。
ちなみに、ビジュアルモードよりテキストモードをよく使うという場合には、プラグイン「AddQuicktag」を使ってカスタマイズすると使いやすくなりますよ。