投稿エディタを拡張できるTinyMCE Advancedの使い方とおすすめ設定


今回はワードプレスでビジュアルエディタを拡張できる『TinyMCE Advanced』について説明していきます。

これを使うと?

ワードプレスの投稿エディタにはビジュアルエディタという便利なエディタがありますが、これをさらに便利にしてくれるのがTinyMCE Advancedです。

TinyMCE Advancedを使えばデフォルトにはない機能を追加できたり、各ボタンを並べ替えることができるので、自分好みにエディタをカスタマイズすることができます。

使い方

基本操作

TinyMCE Advancedをインストールすると、「設定」の中に「TinyMCE Advanced」が表示されます。

1

これをクリックして進んでいくと、カスタマイズ画面になります。

カスタマイズ画面では、ドラッグ&ドロップで直感的にエディタをカスタムできるようになっています。

2

設定方法

設定に関してですが、

  • リストスタイルオプション
  • コンテキストメニュー
  • フォントサイズ

にチェックを入れておくといいです。

リストスタイルオプション

リストスタイルオプションにチェックを入れておくと、リストタグを使ったときに、デフォルトにはない表示形式を選べるようになります。

リストの使い分けができるようになるのでオンにしておきましょう。

3

コンテキストメニュー

コンテキストメニューにチェックを入れると、エディタ上で右クリックしたときに簡単にリンクや表を挿入できるようになります。

便利ですのでオンにしておきましょう。

4

代替リンクダイアログ

代替リンクダイアログですが、これはリンクを編集する形式がTinyMCE Advancedのものになるというオプションです。

ただ、これに関してはワードプレス標準の編集形式の方が便利ですので、私はチェックをオフにしています。

ワードプレスデフォルトのリンク編集では、既に書いた記事へのリンクを簡単に貼ることができます。

しかし、TinyMCE Advancedのリンク編集ではそれができません。

その代わりに、リンクを貼るときに簡単にnofollow属性を付与できるようになっています。

5

ただ、こちらは普通にブログを運営していれば滅多に使うものでもありませんし、それよりも内部リンクを簡単に生成できる方がはるかに便利です。

フォントサイズ

フォントサイズにチェックを入れると、フォントサイズの編集単位がpt(ポイント)からpx(ピクセル)に変わります。

ptはもともとは印刷媒体で使われる単位で、ウェブを閲覧する人のモニタやOSなど、利用者の環境によって表示サイズにばらつきがでてしまい、意図したサイズとは違うサイズで表示されてしまうことがあります。

一方、pxであれば利用者の解像度に合わせて表示サイズも変わるので、利用者の環境が違ってもこちらの意図したサイズで表示させることができます。

こちらもオンにしておきましょう。

6

高度なオプション

次に、高度なオプションについて説明します。

段落タグの保持

高度なオプションで設定すればいいのは、段落タグの保持だけです。

ここにはチェックを入れておくことをおすすめします。

チェックを入れておくと、投稿エディタでテキストモードに切り替えたとき、改行タグや段落タグが表示されるようになります。

7

これがオフの状態だと、テキストモードの時に改行タグや段落タグが省かれ、テキストが見やすくなるのですが、稀にこの影響でビジュアルモードとテキストモードをいったりきたりしたときに、不具合が生じることがあります。

私も過去に1回あったのですが、完成した記事の改行や段落が吹っ飛んでしまい、文章が全てくっついてしまって、非常に読みづらい記事が出来上がったことがあります。

インポート&エクスポート

最後に、インポート&エクスポート機能について紹介します。

インポート&エクスポートを使うと、TinyMCE Advancedでカスタマイズした設定を他のブログにコピーできるようになります。

8

たとえば、新しくブログを立ち上げたときに、インポート&エクスポートでTinyMCE Advancedの設定をしてしまえば、いちいち手作業で設定しなくても、一発で設定を終わらせることができます。

やり方は簡単で、エクスポートで設定データのコードが表示されるのでそれをコピーし、設定データをコピーしたいブログでそのデータをインポートすればいいだけです。

9

おわりに

以上が、TinyMCE Advancedの使い方と設定になります。

TinyMCE Advancedをあなた好みにカスタマイズして、記事執筆をやりやすいようにしてください。