WordPressでテキスト修飾をするのは意外と時間がかかりますよね。
ここではテキスト修飾を効率化するTinyMCE Advancedをご紹介します。
WordPressを使っているといつか直面する「改行がうまく反映されない」現象も、このプラグインで解決できます。
ここでご紹介しているのは旧エディターでの説明になります。
TinyMCE Advancedとは
WordPressの編集画面にはビジュアルエディタとテキストエディタがありますよね。
この2つのエディタのうち、ビジュアルエディタ をより機能的にしくてれるプラグインがTinyMCE Advanced（タイニー・エム・シー・イー・アドバンスド）です。
具体的にはこんなことが簡単にできるようになります。
- 表の作成
- テキスト色の変更
- フォントサイズの変更
本来ならHTMLで記述しなければならないところ、編集ボタンを追加すればボタンを押すだけでOK。
編集ボタンは単に追加するだけでなく、余計なものを省いたり、並べ替えたりもできますのでビジュアルエディタがスッキリします。
TinyMCE Advancedのインストール方法についてはWordPress定番プラグイン8つについての記事をご覧ください。
ここでは、旧エディタである「Classic Editor」を設定した上での説明になります。これについても上記の定番プラグイン記事にて確認・設定しておいてください。
TinyMCE Advancedの使い方
TinyMCE Advancedを設定するとビジュアルエディタがどう変わるのか、有効化する前後で比べてみましょう。
これがTinyMCE Advancedを有効化する前の状態。
※上段の右にある「ツールバー切り替え」ボタンを押すと、下段のボタンが表示されます
これがTinyMCE Advancedを有効化した後の状態。
編集ボタンが増えていますよね。
この編集ボタンの中から不要なものを省き、必要なものだけにしてスッキリさせましょう。
WordPressサイドバー「設定」→「TinyMCE Advanced」に進みます。
これがTinyMCE Advancedの設定画面です（旧エディターにすることをお忘れなく）。
ビジュアルエディタにボタンを追加したいときは、 下の「使用しないボタン」から追加したいボタンを選び、上の「クラシックエディター用ツールバー」までドラッグ&ドロップします。
逆に、ボタンを減らしたいときは、上から下に持っていきます。
TinyMCE Advancedのおすすめ設定とボタンの使い方
TinyMCE Advancedのおすすめ設定の一例として、実際にボク自身が使用していたボタン構成とその使い方をご紹介します。
こんなカンジなんですが、わりとシンプルな方かもしれません。
下の画像にボタンの説明があります。
これがそれぞれのボタンの意味です。
では、それぞれの使い方を説明していきます。
Bulleted list
「Bulleted list」は番号なしリストが簡単に作れるボタンです。
HTMLで箇条書きを書くのって実はすこし面倒なのですが、このボタンがあるととても便利です。
使い方は次のとおり。
まず箇条書きにしたいテキストをドラッグして選択します。
次に「番号なしリスト」ボタンを押します。
すると、こんなふうに番号なしのリストになります。
ボタン横の「▼」を押すと、デフォルト（黒丸）以外に白丸、四角も選ぶことができます。
あまり黒丸以外に使うことはありませんが。
箇条書きを使うことで情報がまとまって見栄えがよくなります。
つまり、ユーザにとっては読みやすくなるということです。
今まで使ってなかった人は積極的に取り入れてみましょう。
番号付きリスト
番号付きリストの使い方は、さっきの番号なしリストとまったく同じです。
テキストを選択して、「番号付きリスト」ボタンを押します。
- デフォルト（1、2、3）
- ラテン文字小文字（a、b、c）
- ギリシャ文字小文字（α、β、γ）
- ローマ数字小文字（ⅰ、ⅱ、ⅲ）
- ラテン文字大文字（A、B、C）
- ローマ数字大文字（Ⅰ、Ⅱ、Ⅲ）
色んな番号がありますが、デフォルト以外、そう使うことはありません。
テーブル
テーブルとは表のことです。
使い方はこんなカンジ。
- 表を挿入したい箇所で「テーブル」ボタンを押す
- 「テーブル」にカーソをもっていく
- マス目の数を決める
- マスをクリック
3.〜4.をもう少しだけ詳しく。
マス目が表示されたらその上にカーソルをもっていき、たとえば「2×2」というふうに必要なマス数になったところで、クリックをします。
こんなふうに表が挿入されます。
表の中にテキストを入力します。
プレビュー表示すると、きれいに表ができてることがわかります。
これが表の基本的な使い方です。
リンクの挿入/編集｜リンクの削除
「リンクの挿入/編集」はテキストをリンク化したいときに使います。
リンク化したいテキストを選択し、「リンクの挿入/編集」ボタンを押すとこんなBOXが出てきます。
BOXにリンク先ページのURLをコピペし、BOX右側の矢印（適用ボタン）を押します。
これでリンクの完成。
適用ボタンの右側にある歯車ボタンを押すと、次のように、より詳しいリンクの設定ができます。
「リンクを新しいタブで開く」はよく使うと思います。
別タブで開いた方が元のページに戻ってきたり見比べたりしやすいので、そのようにしてもらいたい意図がある場合は上記のように設定します。
リンクの削除には、リンク化したテキストにカーソルを合わせた状態で「リンクの削除」ボタンを押します。
テキスト色
テキスト色の編集はおなじみのものですね。
色をつけたいテキストを選択して「テキスト色」ボタンを押します。
カラーパレットが表示されるので、好きな色を選びます。
テキストを強調したいときは、こんなカンジで赤文字を使うことも多いですよね。
あまりたくさんの色を使いすぎると逆に見づらくなるので自分の中でルールを決めておくのがいいですね。
見づらい^^;
引用
引用も使い方は他のボタンと同じように、テキストを選択して「引用」ボタンを押します。
テストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテスト
引用はこんなカンジで表示されますが、お使いのテーマ（のCSS）によって変わります。
取り消し線
取り消し線の使い方も他のボタン同様に、テキストを選択して「取り消し線」ボタンを押します。
テストテストテストテストテストテストテストテスト
テストテストテストテストテストテストテストテスト
取り消し線はこんなカンジで表示されます。
書式設定をクリア
「書式設定をクリア」ボタンを使うと、太字とか色とかリンクとかテキストの修飾を削除することができます。
消したい修飾部分を選択します。
消しゴムのアイコン（書式設定ボタン）を押します。
書式設定が削除され、いまの場合だと、太字だったのが普通のテキストに戻っています。
元に戻す｜やり直す
「元に戻す」「やり直す」はショートカットでやることがほとんどなのですが、うまくいかないこともあるので一応、表示させています。
ちなみにショートカットはこちら。
- 元に戻す：command+Z（Windowsは「ctrl+Z」）
- やり直す：command+shift+Z（Windowsは「ctrl+shift+Z」）
これは極めて基本的なショートカット なので、もし使っていない人は使うようにしましょう。
段落
「段落」ボタンで見出しの設定ができます。
見出しにしたいテキストはドラッグして選択しなくてもよく、テキストと同じ行にカーソルがあれば見出しにしてくれます。
フォントサイズ
「フォントサイズ」ボタンは意外とよく使います。
文字サイズをかなり大きくして本文より目立たせる使い方など、よく見かけますよね。
ボクの例ですと、逆にテキストを小さくするときによく使います。
特に箇条書きにするときなど、文字サイズを90%と小さくすることで、本文と微妙にメリハリがつくようにしています。
スタイル
「スタイル」ボタンは特に必要ないかもしれません。
お使いのテーマによって表示される項目が変わるからです。
当ブログはAFFINGER5(アフィンガー5)というWordPressテーマを使っており、このテーマとの兼ね合いで「スタイル」ボタンを表示させています。
たとえば、AFFINGER5では上記の画像のように「アイコン」などを表示させることができます。
もし興味があれば別記事をご覧ください(^^)
WordPressの改行されない現象を解決
WordPressでたまに遭遇する「改行されない」というナゾの現象。
- 確かに改行しているにもかかわらずプレビューすると消えている
- 何度やり直しても改善しない
- テキストエディタで「 」を入力しても改善しない
非常にウザいですよね。。
これはWordPress側が余計な気を利かせて自動整形するために起こる現象です。
この現象がTinyMCE Advancedで解決できます。
TinyMCE Advancedの設定画面で「高度なオプション」の中にある「段落タグの保持」にチェックをつけます。
これで正常に改行が反映されるようになるはずです。
まとめ｜TinyMCE Advancedの使い方
TinyMCE Advancedの基本的な使い方がわかってもらえたと思います。
自分がよく使う編集ボタンだけ表示させておくとスッキリしていいですね。
主要な編集ボタンの使い方も具体的に解説させてもらったので、これで記事作成がもっと楽しくなるはず(^^)
改行されない現象にもこのプラグインで対応できますので、余計なイライラとはサヨナラです♪
