記事を書いていると、何かと装飾したい時が多々あります。
そのたびにコードを書くのは面倒ですが、このTinyMCE Advancedがあれば、簡単です。
ぜひインストールしてみて下さい。
インストール方法は？というかたは、こちらをご覧ください。
この記事では、 TinyMCE Advanced の設定方法と使い方をご紹介します。
TinyMCE Advancedとは？
TinyMCE Advancedは、ビジュアルエディタを拡張できるプラグインです。
デフォルトのエディタ↓
とってもシンプルですね。とはいえ、 Gutenberg では、様々なブロック(一般ブロック・フォーマット・レイアウト要素・ウィジェット・埋め込み)があらかじめ用意されています。
↓↓↓
それでも、 TinyMCE Advancedを導入する事で、作業効率アップになりますので、ぜひ試してみて下さい。
TinyMCE Advanced の設定
それでは、設定をしていきましょう。
↓↓↓
左メニューの設定→TinyMCE Advancedをクリックします。
ツールバーの機能を拡張しよう
エディター設定画面上部の左ダブBlock Editor(Gutenberg)の設定を見ていきましょう。
上部右側のタグClassic Editor (TinyMCE) は旧エディターを使っている場合の設定となります。
↓↓↓
必要な機能は、①か②へ、不要な機能は③にドラッグ＆ドロップして、好きなように配置してみて下さい。
↓↓↓
このText colorのところをYesにすると、 Text color の項目が表示されるようになり、ブロック内の部分的な文字の色装飾・背景色の変更 が可能となります。
元々エディターのサイドバーに色設定がありますが、こちらはブロック全体の文字の色・背景色の変更となります。
エディター画面の確認
TinyMCE Advanced画面（上図）の数字の部分がエディター画面（下図）の数字の部分にそれぞれ表示されます。
続きの設定を見ていきます。
↓↓↓
ここにチェックがはいっていれば、ボタンは折り返されて表示されます。チェックがないとおかしなことになりますので、チェックをしておいて下さい。
↓↓↓
不要なボタンは下へ、必要なものは上へドラッグ＆ドロップして配置して下さい。
↓↓↓
カスタマイズ後の Classic Paragraph です。こちらはサンプルですが、使っていくうちにご自身でよく使うものが分かってくると思いますので、都度変更していくと、使い易いものになるかと思います。
赤枠のQuicktagsですが、こちらはコードを登録できるプラグインをいれている為表示されています。
このピンクや黄色の下線マーカーはQuicktagsに登録する事で簡単に使うことが出来ます。
下記関連記事で使い方をご紹介していますので、ぜひ参考にしてみて下さい。
他の設定項目について
私は、フォントサイズにチェックをいれ、他の設定に関してはデフォルトままにしています。
フォントサイズにチェックすると下図のように指定できるフォントが増えるので便利です。
設定した文字色・背景色・フォントサイズを使ってみる
設定した機能の使い方をご紹介します。
文章の一部の文字色を変更・背景色を変更する
まずは部分的な文字色の変更をしてみます。
編集画面で段落ブロックを追加してください。
- 色を付けたい部分を範囲選択します。
- 画面右のサイドツールバーのText Colorをクリックし、用意してあるカラー又はカスタムカラーで好きな色を選択します。
続いて背景色ですが、やり方は同じです。
まず変更したい範囲を選択し、Text Colorの下段 background color から色を選択するだけです。
Classic Paragraphではサイドツールバーは使えないので、ボタンにテキスト色・背景色を入れておくと良いと思います。こちらも使い方は同じです。
フォントサイズの変更もやり方は同じなので色々試してみて下さい。
以上で完了です。最後までご覧頂きありがとうございます。お疲れ様でした。
