TinyMCE Advancedの設定と使い方をマスターしよう

どうも！ブランドクリエイターの中江です。今回は「TinyMCE Advancedの設定と使い方をマスターしよう」というテーマでお話していきたいと思います。

WordPressは初期設定の状態だと、記事の編集ボタンが、このように非常に少ないです。例えば、文字の大きさを変えれなかったり、文字の背景に色を入れれなかったり、文字に下線を入れることができません。

TinyMCE Advancedというプラグインを導入すると、このように記事の編集ボタンを増やすことができるので、かなり記事が編集しやすくなります。無料ブログ並みですね。

今回は、このTinyMCE Advancedの導入から設定方法と使い方をご紹介していきたいと思います。

1.TinyMCE Advancedのインストール

まずは、TinyMCE Advancedをインストールしていきましょう。

WordPressの管理画面から「プラグイン」→「新規追加」をクリックして、右上の検索ボックスに「TinyMCE Advanced」と入力して検索してください。

そうすると、この画面が出てくるので、「今すぐインストール」をクリックしましょう。

次にこの画面が出てくるので、「プラグインを有効化」をクリックしましょう。

これでTinyMCE Advancedのインストールは完了です。

2.TinyMCE Advancedの設定方法

では、インストールしたら次にTinyMCE Advancedの設定方法を見ていきたいと思います。

まずはWordPressの管理画面から、「設定」→「TinyMCE Advanced」と進んでいってください。すると、このようなボタンが表示されると思います。

画面の味方としては、上のエリアにあるのが、今の記事の編集ボタンなので、「使用しないボタン」から上のエリアにボタンをドラッグ（左クリック長押しで、運ぶ）していくだけです。

全部追加する必要はなくて、オススメは「下線」「フォントサイズ」「背景色」「横ライン」の4つを追加するだけでも十分に編集は簡単になります。

追加したら、右上の「変更を保存」をクリックすると、このように編集ボタンを追加することができるようになっています。

記事の編集画面を見たときにこのように「ボタンが少ない」と感じる時は、赤い枠で囲んでいる「ツールバー切り替え」をクリックしてください。

そうすると、このようにボタンが表示されるようになります。

これでTinyMCE Advancedの設定は終了なので、次は、実際にボタンの使い方を見ていきましょう。

3.TinyMCE Advancedの使い方

今回、使い方を紹介するのは、「フォントサイズ」「テキスト色」「背景色」「下線」「太字」「リンク」「段落」「引用」「リスト」「中央寄せ」「テーブル」「横ライン」「続きを読む」という、よく記事編集の際に使うボタンを紹介していきます。

3-1.文字のサイズを変える

記事の文字のサイズを変えるには、文字のサイズを変えたい文字を選択状態にした上で、「フォントサイズ」というボタンをクリックします。

そうすると、文字のサイズを選べるようになるので、変えたい文字サイズを選びましょう。そうすれば、このように文字のサイズを変更することができます。

3-2.文字の色を変える

次に文字の色を変更する方法を紹介していきます。

文字の色を変えるには色を変更したい文字を選択状態にした上で、「テキスト色」というボタンをクリックすると、カラーパレットが出てくるので、変更したい色を選択します。

基本はこれでいいのですが、ここにはない色に変更したい場合は「カスタム」をクリックします。

そうすると、このようにカラーパレットが現れるので、左下の「◯」を移動させたり、右下のバーを上下させたりしながら、変更したい色を探しましょう。

例えば、今、この画面では、色は「黒」に設定されています。これはなぜかというと、右下のバーが赤い領域に設定されていて、左下の「◯」が黒い領域にあるからです。

例えば、これを青にしたい時は、こう動かします。右下にあったバーを中間の青の領域に移動させて、左下にあった◯を青の領域に移動させることで、青になります。

そして、自分が変更したい色になれば、「OK」のボタンをクリックすると、変更することができます。

そうすると、このように青文字に変更できます。

3-3.文字の背景色を変更する

では、次に文字の背景色を変更していきましょう。これも文字の色を変える作業と、同様です。

文字の背景色を変えるには色を変更したい文字を選択状態にした上で、「テキスト色」というボタンをクリックすると、カラーパレットが出てくるので、変更したい色を選択します。

そして、ない場合は、カスタムをクリックして、変更したいカラーを選んで、「OK」を押すと、このように背景を変更することができます。

3-4.文字に下線を入れる

では、次に文字に下線を入れる方法を見ていきましょう。

これも同様に下線を入れたい文字を選択状態にした上で、「下線」というボタンをクリックしてください。

そうすると、このように文字に下線を引くことができるようになります。

3-5.文字を太字に変える

次に文字を太字に変える方法を見ていきましょう。

これも同様に、太字にしたい文字を選択状態にした上で、「太字」というボタンをクリックしてください。

そうすると、このように文字を太字に変えることができます。

3-6.文字にリンクを追加する

では、次に文字にリンクを追加する方法を見ていきたいと思います。

これも同様に、リンクを追加したい文字を選択状態にした上で、「リンクの挿入/編集」というボタンをクリックしてください。

そうすると、このような表示が出てくるので、赤い枠で囲んでいる設定のボタンをクリックしましょう。

そうすると、このような表示が出てくるので、「URL」のところには、追加したいリンク先のURLを入れて、リンクを新しいタブで開く場合は、チェックを入れましょう。

設定が終わったら、「リンク追加」というボタンをクリックしましょう。

3-7.段落タグを入力する

段落タグはSEO対策において非常に重要な要素なので、ページを作成する際にはぜひ入れてもらいたいですね。

この辺のことは「SEO内部対策とは｜検索上位に表示されるための3つの方法」という記事で話しているので、ぜひ、参考にしてみてください。

やり方は同様で、段落にしたい文字を選択状態にしたうえで、「段落」ボタンをクリックして、設定したい段落タグを選択してください。

そうすると、このように段落を設定することができるようになります。

3-8.引用タグを入れる

では、次に引用タグを入れていきます。引用タグは、他のサイトの記事や本などの資料の一部分を、自分のページに引用する場合などに使用します。

やり方は同様で、引用にしたい文字を選択状態にしたうえで、「引用」ボタンをクリックしてください。

そうすると、このようにスライドされていると思います。このようにスライドされていたら、正しく引用タグを挿入することができています。

3-9.リストを入れる

では、次にリストの挿入の仕方を見ていきます。リストは「番号なし」か「番号あり」の形式を選択することができます。このような形式のものですね。

箇条書きで何か表記したい時に使うものになっています。これもやり方は同様で、リストにしたい文字を選択状態にしたうえで、「リスト」ボタンをクリックしてください。

左が番号なしで、右が番号ありで、デザインは「▼」から選ぶことができます。

項目別に改行もしてください。改行することで、1つの項目が形成されます。

3-10.文字や画像を中央揃えにする

では、次に文字や画像を中央揃えにする方法を見ていきたいと思います。

これもやり方は同様で、中央に寄せたい画像か文字を選択状態にしたうえで、「中央揃え」ボタンをクリックしてください。

これを右寄せにする場合は中央揃えのボタンの右を、左寄せにする場合は中央揃えのボタンの左をクリックしてください。

このように表示されれば、正しく中央寄せをすることができています。

3-11.テーブルを挿入する

では、次にテーブルを挿入する方法を見ていきたいと思います。テーブルとは、このような図のことです。

テーブルを挿入するには「テーブル」というボタンの「▲」をクリックして、作成したいテーブルの行と列をマウスのカーソルで選んで、挿入してみてください。

そして、表示されたテーブルの各項目にテキストを入力すると、テーブルを表示することができます。

3-12.横ラインを入れる

では、次に文章の間と間に横ラインを入れる方法を見ていきます。横ラインを挿入すれば、このように文章と文章の間にラインを入れることができます。

まずは、文章と文章の間にラインを入れたい箇所に改行を入れて、そして、「横ライン」のボタンをクリックしてください。

そうすると、このように横ラインを挿入できていると思います。

3-13.「続きを読む」タグを挿入する

では、最後に「続きを読む」ボタンを挿入する方法を見ていきたいと思います。

これはテンプレートの形式にもよるんですが、「続きを読む」というボタンを挿入すると、このようにブログ記事の一覧ページで、表示されるテキストの説明文を調整することができます。

例えば、今回だったら「どうも！ブランドクリエイターの中江です…お話していきたいと思います。」という文章の後に「続きを読む」というボタンを挿入しています。

やり方は簡単で、ブログ記事一覧で表示したい説明文の領域の後ろに改行を入れて、そこで「続きを読む」タグを挿入してください。

そうすると、このように「MORE」と表記されていると思います。

TinyMCE Advancedの使い方は以上です。

今回、紹介したボタンの使い方を一通り習得しておけば、WordPressの記事の編集には困らないので、ぜひ、使い方も合わせてマスターしてみてくださいね。

では、今回は以上になります！お疲れ様でした＾＾