TinyMCE Advancedの使い方と表示されないときの対処法
教科書やレポートを読んでいて、大切だなぁと思うところは、黄色いマーカーで強調することがありますよね。
それと同じでブログの記事でも重要な部分は、装飾して読みやすい文章をつくることがとても大切です。
見やすいコンテンツを提供することで、読者もしっかりと記事を読んでくれるので、滞在時間や直帰率に良い影響を与えるんです！
そして、文字を装飾するためには、コードを入力しなければならないのですが、初心者の方では難しいですよね…。慣れている方でもかなり面倒くさく感じる作業だと思います。
そこで、TinyMCE AdvancedというWordPressプラグインを使用することにより、クリック１つで文字にマーカーを引けたり、表を挿入することができるのです。
ここでは、TinyMCE Advancedの使い方について紹介していきますね！
目次
TinyMCE Advancedの設定方法
まずはいつも通り、TinyMCE Advancedをインストール、有効化していきましょう。
有効化したら、記事投稿画面を見てみましょう。このようにビジュアルエディタの編集メニューにさまざまなボタンが追加されていますね！
このボタンは自分の好きなようにカスタマイズすることができます。つまり、いらない装飾ボタンは外して、必要な装飾ボタンを追加することができます。
編集メニューのカスタマイズ
それでは、このカスタマイズを行っていきましょう。まずは、サイドメニューの「設定」から「TinyMCE Advanced」をクリックします。
この部分で、編集メニューを自由にカスタマイズすることができます。やり方は簡単で、追加したいボタンを下の「Unused Buttons」からドラッグして、入れたい部分にドロップするだけです。
逆にいらない編集ボタンは下の「Unused Buttons」にドラッグ＆ドロップでなくすことができます。
僕の場合は、「フォントサイズ」「背景色」「下線」の３つを編集メニューに追加して使っています。
Advanced Options
続いて、以下の画像のように「Stop removing the <p> and <br /> tags when saving and show them in the Text editor」と「Replace font size settings」の項目にチェックを入れておきましょう。
「Stop removing the <p> and <br /> tags when saving and show them in the Text editor」にチェックを入れることにより、記事を編集するときの不具合を除くことができます。
例えば、ビジュアルエディタで記事を書いていて、テキストエディタときに、勝手に<p>タグが追加されたり、逆に除かれたりして文章のレイアウトがずれてしまうことがあります。
この不具合を防ぐために、チェックを入れておきましょう！
また、「Replace font size settings」にチェックを入れておくことにより、フォントサイズの単位をピクセル（px）に変更することができます。
最後に「Save Changes」をクリックして、変更を保存しておきましょう。
TinyMCE Advancedの使い方
実際に、TinyMCE Advancedで追加した編集を使ってみましょう。
記事投稿画面での編集メニューは以下の赤枠で囲ってある「ツールバーの切り替え」というボタンで１段表示と２段表示に切り替えることができます。
よく使う背景色の変更を行ってみます。
背景色を変えたい部分をドラッグして、ボタン右側の「▼」をクリックしましょう。
そして、変更したい色をクリックします。僕は、赤枠で囲ってある「Light yellow」という色が好きなので、これを選択しますね！
すると、このように黄色いマーカーを引いたように色をつけることができました。
また、背景色をつけて、文字を大きくし、太文字にすることもできます。
このように、より強調させたい部分は装飾を組み合わせて使ってみるのもいいですね！
編集メニューが表示されないときの対処法
TinyMCE Advancedのプラグインを有効化して、設定をしたのに表示されない！という質問をいただくことがあります。
この場合は、先ほども紹介したように、「ツールバー切り替え」というボタンをクリックしてみてください。
おそらくTinyMCE Advanced導入後は、上の画像のように１段で表示されていると思います。
この「ツールバー切り替え」ボタンをクリックすることにより、TinyMCE Advancedの編集メニューが表示されるようになるはずです。
まとめ
TinyMCE Advancedというプラグインを使って、ボタンひとつでフォントのサイズを変えたり、背景色を変更したりする方法について紹介しました。
より読みやすいコンテンツを提供できるように、文字を太くしたり、色を変えたりすることはとても大切です。
僕も最初のころは面倒くさくてほとんど装飾をしていなかったのですが、知り合いに記事を見せたとき「見にくい！！」と言われてしまいました。笑
やはり、少し文字の装飾に時間をかけるだけでも、読みやすさが倍増しますので、ぜひTinyMCE Advancedを導入して行うようにしましょう！
ただし、装飾のしすぎには注意してください。いろいろな部分を装飾しすぎると、どこが強調されているのか分からなくなってしまいます。
本当に強調したい部分だけ文字を太くしたり、色を変えたりするようにしましょう。目安としては、見出しにつき１～２箇所ぐらいがいいですね！
