【ビジュアルエディタの機能追加】TinyMCE Advancedの設定と使い方

こんにちは、きゃぷてんです。

WordPressの投稿編集画面には、「ビジュアルエディタ」と「テキストエディタ」があります。

もし、あなたがHTMLに慣れていない初心者である場合、「ビジュアルエディタ」を利用して投稿を編集することになるのですが、「ビジュアルエディタ」にはデフォルトで最低限の機能しか実装されていないため、「やりたいことができない」と言ったもどかしさを感じることがあります。

そこで、今回紹介するプラグインを実装すると、「ビジュアルエディタ」に様々な機能を追加することができるため、記事の品質や、操作性を向上させることができます。

TinyMCE Advancedの設定と使い方（動画）

ビジュアルエディタ・テキストエディタとは

はじめに、WordPressの投稿編集画面の「ビジュアルエディタ」や「テキストエディタ」について説明します。

Webサイト（今あなたが見ているこのページも）は、HTML言語というものを利用して作成されています。HTML言語が利用されている理由の一つとして、人間やパソコン、Webブラウザが共通して理解できる言葉であるからです。

三者（人間・パソコン・Webブラウザ）が、それぞれ理解できる言葉であるため、文字を表示させたり、背景に色をつけたり、画像を表示したり、などなど、サイトの管理者が指示したように、Webブラウザでサイトが表示されているわけです。

この時、サイトの管理者がHTML言語で指示を出すために使うものが「テキストエディタ」なのですが、HTML言語がわかる人でなければ指示を出すことができません。（当たり前ですが、笑）

そこで、「HTML言語がわからなくてもサイトを運営したい」という要望に応える形で用意されたのが、「ビジュアルエディタ」です。

ビジュアルエディタでは、HTML言語を理解していない管理者であっても、わかりやすいボタン（例：文字色変更ボタン、太文字ボタン・・・）があり、そのボタンを利用すると、あなたに代わって、ビジュアルエディタがHTML言語を記載してくれます。

編集画面も、テキストエディタのような文字だけのものではなく、ビジュアルエディタでは実際に文字の色がわかったり、太文字になったりするので、視覚的もわかりやすいです。

ただ、１つだけ欠点がありまして、ビジュアルエディタではシステムが用意している機能でしか編集することができません。（HTMLがわからない場合、用意されたボタンの中で編集方法を選ぶしかないですよね、涙）

それに、デフォルトの機能は最低限のものしか用意されていません。（笑）

TinyMCE Advancedを導入するメリット

TinyMCE Advancedを導入するメリットを挙げると、以下のようになります。

• ビジュアルエディタに新たな機能を追加できる
• 追加する機能を自分で選択することができる

TinyMCE Advancedを導入することにより、ビジュアルエディタの弱点であった機能の少なさを補うことができます。また、追加する機能の選択であったり、ボタンの配置をあなた好みのものにカスタマイズすることができます。

TinyMCE Advancedををインストール

プラグインのインストール方法については下の記事で紹介していますので、参考にしてください。

検索ワードは「TinyMCE Advanced」と入力してください。

WordPressにプラグインを追加する方法【超簡単に導入できるよ！】

2016.10.14

TinyMCE Advancedの設定と使い方

TinyMCE Advancedのインストールが完了したら、「有効化」にして以下の操作を行います。

• 編集ボタンの追加
• Advanced Options のチェックボックスにチェック

編集ボタンの追加

WordPressの管理画面（ダッシュボード）から、「設定」→「TinyMCE Advanced」の順にクリックしてTinyMCE Advancedの設定画面を表示させます。

TinyMCE Advancedの設定画面を表示させたら、追加・停止・並び替えを行いたいボタンをドラッグアンドドロップして、ビジュアルエディタに表示するボタンをカスタマイズします。

ただ、トレンドアフィリエイトサイトを運営するのであれば、TinyMCE Advancedではじめから設定されているボタンのみでも問題ありません。

チェックボックスにチェック

ボタンを設置し終えたら、「設定」項目の「フォントサイズ」にチェックを入れましょう。ここにチェックを入れることで、フォントサイズを「px(ピクセル)」で指定できるようになります。

チェックを終えたら「変更を保存」をクリックすることでTinyMCE Advancedの設定が完了します。投稿編集画面で「ビジュアルエディタ」を表示させたら、Office Word のように、様々な機能を使って編集することができるようになりますので、お試しください。