TinyMCE Advancedは作業効率をアップさせるWordPressのプラグインです。
ブログ作成の効率を上げてくれるプラグインで、最近のWordPressのエディタであるGutenbergにも対応しています。
今回はTinyMCE Advancedの設定方法と使い方について解説します。
これから記事を書いていくうえで欠かせないプラグインなので、ぜひ取り入れていきましょう!
Contents
TinyMCE Advancedとは
![TinyMCE Advanced](https://anotherdaycomes.com/wp-content/uploads/2019/08/computer-767781_1280.jpg)
WordPressで記事を書く時のビジュアルエディタを拡張するプラグインです。
初期状態のビジュアルエディタがこちら
![TinyMCE Advanced](https://anotherdaycomes.com/wp-content/uploads/2019/08/SnapCrab_NoName_2019-8-26_16-17-51_No-00.png)
TinyMCE Advancedを導入したビジュアルエディタがこちら
![TinyMCE Advanced](https://anotherdaycomes.com/wp-content/uploads/2019/08/SnapCrab_NoName_2019-8-26_16-19-3_No-00.png)
ビジュアルエディタの編集ボタンの種類が増えているのが分かると思います。
HTMLの知識がなくても色々な編集が可能となるプラグインなんですね。
今のWordPressの最新のビジュアルエディタはGutenberg(ブロックエディタ)にも旧エディタのClassic Editorにも対応しています。
なので、エディタ環境を気にせず導入することができます。
どちらのエディタが良いのか?というご質問を受けることがありますが、現状どちらでも構いません。ご自分が使いやすいエディタにしましょう。
またテンプレートによっては、全部あるいは一部の機能がGutenbergに対応していないこともあるので、お使いのテンプレートで決めても良いかもです。
僕はClassic Editorの方が慣れているので、プラグイン「Classic Editor」を入れて旧エディタで記事を書いています。
TinyMCE Advancedの設定方法
TinyMCE Advancedの設定方法を解説します。
TinyMCE Advancedをインストール&有効化
![TinyMCE Advanced](https://anotherdaycomes.com/wp-content/uploads/2019/08/SnapCrab_NoName_2019-8-23_20-48-49_No-00.png)
ダッシュボード左側のメニューから、[プラグイン]>[新規追加]をクリックします。
![TinyMCE Advanced](https://anotherdaycomes.com/wp-content/uploads/2019/08/SnapCrab_NoName_2019-8-26_16-49-45_No-00.png)
TinyMCE Advancedを検索し、[今すぐインストール]をクリックします。
![TinyMCE Advanced](https://anotherdaycomes.com/wp-content/uploads/2019/08/SnapCrab_NoName_2019-8-26_16-50-3_No-00.png)
[有効化]をクリックします。
TinyMCE Advancedで好きなボンタを追加する
![TinyMCE Advanced](https://anotherdaycomes.com/wp-content/uploads/2019/08/SnapCrab_NoName_2019-8-26_16-56-27_No-00.png)
ダッシュボード左側の[設置]>[TinyMCE Advanced]をクリックします。
![TinyMCE Advanced](https://anotherdaycomes.com/wp-content/uploads/2019/08/SnapCrab_NoName_2019-8-26_17-12-44_No-00.png)
Classic Editor(TinyMCE)タブをクリックし、使用しないボタンの中からお好きなボタンをメニュー欄にドラッグ&ドロップします。
その他の設定
![TinyMCE Advanced](https://anotherdaycomes.com/wp-content/uploads/2019/08/SnapCrab_NoName_2019-8-26_17-31-26_No-00.png)
上の画像はデフォルトの設定です。
ここはデフォルでも構いませんが、僕はフォントサイズにチェックを入れています。
フォントサイズにチェックを入れるとフォントサイズがpt(ポイント)単位からpx(ピクセル)単位に変わり、変えられる大きさの種類も増えます。
高度な設定などそれ以外の設定はデフォルトで構いません。
ボタンの追加とその他の設定が終わったら[変更を保存]をクリックします。
これでTinyMCE Advancedの設定は完了です。
TinyMCE AdvancedはGutenbergにも対応
TinyMCE AdvancedはGutenbergにも対応しています。Gutenbergでの設定を解説します。
![TinyMCE Advanced](https://anotherdaycomes.com/wp-content/uploads/2019/08/SnapCrab_NoName_2019-8-26_18-27-24_No-00.png)
TinyMCE Advancedの設定画面で、Block Editor(Gutenberg)タブをクリックします。
![TinyMCE Advanced](https://anotherdaycomes.com/wp-content/uploads/2019/08/SnapCrab_NoName_2019-8-26_18-35-33_No-00.png)
Gutenbergの設定もClassic Editorの時と同じで、追加したいボタンをドラッグ&ドロップします。
[Enable the editor menu (recommended).]にチェックが入っている事を確認してくださいね。
TinyMCE Advancedの使い方
TinyMCE Advancedの設定が終わったら、ビジュアルエディタで設定したボタンを活用していきましょう。
![TinyMCE Advanced](https://anotherdaycomes.com/wp-content/uploads/2019/08/tinympegif.gif)
設定したボタンの使い方は文字をドラッグしてボタンを選択するだけです。
太字にしたり文字のサイズを変えたり、色々なことができるので自分で確認してみましょう!