ビジュアルエディタで記事作成をしている方におすすめなのが「TinyMCE Advanced」というプラグイン。
![ビジュアルエディタの説明](https://ym-life.com/wp-content/uploads/2020/12/%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E3%81%AE%E8%AA%AC%E6%98%8E.jpg)
最初に設定しておけば、文字の装飾をボタン一つでできるため、作業の効率化を図ることができます。
ビジュアルエディタユーザーの方は、必ず導入しておきましょう!
TinyMCE Advancedとは?
TinyMCE Advancedは、WordPressのプラグインの一つ。
文字に下線を付けたり
フォントサイズを大きくしたり
文字に背景色を付けたり
…といった装飾が、自分好みにサクッとカスタマイズできますよ。
WordPressの標準機能でも最低限の装飾はできますが、このプラグインを入れておくことで、より細かい設定が可能になります。
TinyMCE Advancedをインストールしよう
それでは、早速プラグインをインストール方法から確認していきましょう!
WordPressダッシュボード画面『プラグイン』→『新規追加』をクリック。
![WordPressのプラグインをインストールする方法](https://ym-life.com/wp-content/uploads/2020/10/PS-Auto-Sitemap%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E6%96%B9%E6%B3%95.jpg)
『TinyMCE Advanced』と入力し、画像のプラグインが表示されたら、『今すぐインストール』をクリックします。
![TinyMCE Advancedのインストール方法](https://ym-life.com/wp-content/uploads/2020/12/TinyMCE-Advanced%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E6%96%B9%E6%B3%95.jpg)
インストールされたら、忘れずに『有効化』しておきましょう!
検索しても見つからない場合は、こちらからダウンロードしていきましょう!
⇒TinyMCE Advancedをダウンロードする
![](https://ym-life.com/wp-content/uploads/2020/12/ZIP形式のプラグインをインストールする方法-300x158.jpg)
TinyMCE Advancedの設定方法
有効化が完了したら、次は設定していきましょう!
『設定』→『Advanced Editor Tools(TinyMCE Advanced)』をクリックしてください。
![TinyMCE Advancedの設定方法](https://ym-life.com/wp-content/uploads/2020/12/TinyMCE-Advanced%E3%81%AE%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95.jpg)
現在使用しているエディタ(ブロックエディタorクラシックエディタ)を選択します。
![TinyMCE Advancedの設定方法2](https://ym-life.com/wp-content/uploads/2020/12/TinyMCE-Advanced%E3%81%AE%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%952.jpg)
以下の赤枠で囲った部分が現在未使用のボタンですので、この中で記事編集時に使用したいものを上に移動します。
![TinyMCE Advancedの設定方法3](https://ym-life.com/wp-content/uploads/2020/12/TinyMCE-Advanced%E3%81%AE%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%953.jpg)
例えば、背景色を付けたい場合、「背景色」の項目を、メニュー一覧にドラッグ&ドロップしていきましょう!
![TinyMCE Advancedの設定方法4](https://ym-life.com/wp-content/uploads/2020/12/TinyMCE-Advanced%E3%81%AE%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%954.jpg)
メニュー一覧に追加されればOK。
![TinyMCE Advancedの設定方法5](https://ym-life.com/wp-content/uploads/2020/12/TinyMCE-Advanced%E3%81%AE%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%955.jpg)
最後に、『Save Changes(変更を保存)』を忘れずに。
設定が反映されているか確認しよう
最後に、実際の投稿画面で設定が反映されているか確認していきましょう!
『投稿』→『新規追加』をクリック。
先ほど設定した「背景色」が追加されていることがわかります。
![TinyMCE Advancedの設定方法6](https://ym-life.com/wp-content/uploads/2020/12/TinyMCE-Advanced%E3%81%AE%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%956.jpg)
試しに文字を書いて、装飾がうまくできるかチェックしてみましょう!
![TinyMCE Advancedの設定方法7](https://ym-life.com/wp-content/uploads/2020/12/TinyMCE-Advanced%E3%81%AE%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%957.jpg)
⇓
![TinyMCE Advancedの設定方法8](https://ym-life.com/wp-content/uploads/2020/12/TinyMCE-Advanced%E3%81%AE%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%958.jpg)
しっかり装飾ができましたね!
あとがき
今回は、記事作成の作業効率化に人気のプラグインである「TinyMCE Advanced」をご紹介しました。
ビジュアルエディタユーザーは非常に便利ですので、ぜひご自身で一番使いやすくカスタマイズしてみてくださいね♪
コメント