ワードプレスの投稿画面には便利なビジュアルエディタ機能がついています。ただデフォルトの状態ではブログ記事を作成する上で少々物足りないものとなっています。

記事を書くのに慣れてくると文字を装飾したり、表などを挿入してみたくなるものです。そんな時にテキストモードでHTMLタグを使用して装飾するのは知識のある人でも面倒に感じるものですね。

今回紹介する「TinyMCE Advanced」は、面倒なHTMLタグを使わずにボタン１つで様々な装飾ができる便利なプラグインになっています。HTMLの知識が全くなくても一流のブログ記事が書けるようになりますので、是非参考にしてみてください。

TinyMCE Advancedの使い方

下画像はデフォルトの状態の投稿画面です。非常にシンプルで無駄なものはありませんが、表の挿入や文字の大きさなどを変更するにはテキストモードにする必要があります。

次にプラグインをインストールした投稿画面です。

新たに様々な項目が追加されていることが分かります。フォントの種類や表の挿入、文字の大きさYouTube動画の埋め込みなども簡単にできるようになります。

TinyMCE Advancedをインストールして初期状態のままで使用しても全く問題はありませんが設定画面から自分の好みの機能を追加したりいらない機能を非表示にしたりすることもできるのでプラグインを有効化したら管理画面より「設定」→「TinyMCE Advanced」の順に進んでTinyMCE Advancedの設定画面を表示してください。

TinyMCE Advancedの設定画面が表示されました。ここでは各機能を追加したり削除することができます。

全部で４行表示されているエディターエリア内の好きな場所に機能を追加できます。各機能はクリックしながら動かすことができるので、「使用しないボタン」エリアから必要な機能を上のエディター内に移しましょう。

逆に不要な機能はクリックしながら「使用しないボタン」エリアに移すことでエディター画面から削除することができます。

エディター内の各機能の並び替えも同じ動作でできるので自分の使いやすいように並び替えてみてください。

使用頻度の高い機能を追加して、不要なものを削除してみました。

今回エディターに表示させている機能は以下のようなものになります。

	太字	文字を太くする。
	イタリック	文字をイタリック表示にする。
	下線	アンダーラインを引く。
	引用	引用箇所に使用する。
	背景色	文字の背景色を設定する。
	テキスト色	文字色を変更する。
	横ライン	文字に横線を入れる。
	リスト表示	箇条書きのリスト表示にする。
	番号付きリスト	番号付きのリスト表示にする。
	続きを読む…	moreタグを挿入する。
	ツールバー切り替え	エディターの表示/非表示を切り替える。
	左寄せ	テキストを左寄せにする。
	中央揃え	テキストを中央揃えにする。
	右寄せ	テキストを右寄せにする。
	両端揃え	テキストを均等に表示させる。
	リンクの挿入／編集	テキストにリンクを設定する。
	リンクの削除	設定したリンクを削除する。
	テーブル	表を挿入する。
	フルスクリーン	フルスクリーンで記事を作成したい時に使用する。
	インデントを減らす	字下げを減らす。
	インデントを増やす	字下げを増やす。
	段落	見出しタグを挿入する。
	フォントサイズ	文字の大きさを変更する。
	取り消し	直近の操作を取り消す。
	やり直し	直近の操作をやり直す。

エディターの編集が完了したら「設定」に進みます。ここでは初期状態からチェックが入っている「リストスタイルオプション」と新たに「フォントサイズ」にチェックを入れておきましょう。

「フォントサイズ」にチェックを入れるとデフォルトでは「pt」単位のフォントサイズが「px」単位に変更されます。

次に「高度なオプション」を設定します。

ここでは「段落の保持」のみチェックを入れておきましょう。

ワードプレスで記事を作成している際にビジュアルモードとテキストモードを切り替えることは頻繁にありますが、その際に改行タグや段落タグなどが削除されたり追加されたりしてしまうことがあります。

こちらにチェックを入れることで、そのような問題を解決することができるのでおすすめします。

「管理」の項目は特に何も変更しないで問題ありません。

「設定のエクスポート」「設定のインポート」は、他のワードプレスサイトを作成する場合などに、ここで設定したエディターや各設定をそのまま使いたい時に活用します。

全ての設定が完了したら「変更を保存」で終了です。

「設定のエクスポート」をクリックすると下画像のようにコードが表示されますので、こちらを全てコピーして新しいサイトのTinyMCE Advancedの「設定のインポート」画面に貼り付けるだけで操作完了です。

非常に簡単なので新しいサイトでもTinyMCE Advancedを活用したい方は是非、試してみてください。

設定が完了したら「新規投稿画面」を表示してみましょう。

先ほど設定した配列にエディターがカスタマイズされていることが確認できます。

操作は非常に簡単です。テキストをハイライトして各機能をクリックすることで様々な装飾が可能になります。

文字をハイライトして・・・

テキストカラーを選択すると・・・

下画像のように文字色を一発で変更することができます。

表の挿入も簡単です。「テーブル」マークをクリックして挿入したい表の縦と横を指定すると・・・

このように簡単に表を挿入することもできます。

直感的に操作できるので様々な装飾を楽しんでみてください。

まとめ

簡単操作で投稿画面の機能をアップさせることができるTinyMCE Advancedの使い方を解説しました。非常に高機能でカスタマイズ性も高いので、自分の使いやすいように設定できるのが最大の魅力です。

他のワードプレスサイトに設定をコピーできるので複数のサイトで同じエディター画面を共有することができます。今回は例としてエディター画面を設定しましたが、使いたい機能などがあれば追加して実際に使用してみてください。

通常の投稿画面ではできなかった表の挿入やテキストのカラーを変更するなど、記事の質をアップさせることができる機能を沢山使うことができるので是非、活用してみてください。