TinyMCE Advancedの設定方法と使い方

WordPressで読みやすいコンテンツのレイアウトを細かく作成しようとすると、HTMLタグを直打ちしなければならなくなってしまいます。これでは、せっかくWordPressでサイトの運用を始めたばかりの初心者には敷居がとても高いです。

WordPressの標準の投稿機能（ビジュアルエディタ）では、投稿機能が限られてしまいます。TinyMCE Advanced というプラグインを使うと、WordPressの投稿画面に編集ボタンの種類を増やし、HTMLの知識がない方でも、無料ブログと同じ感覚で記事を設定できるようになります。

1．TinyMCE Advanced のインストール

TinyMCE AdvancedはWordpressの公式プラグインですので、WordPressの管理画面からインストールします。

TinyMCE Advancedの設定はとても簡単です。下記の2つを設定するだけです。

ビジュアルエディタに編集ボタンを追加するには、「使用しないボタン」の項目から追加したいものを選んで、上のツールバーにドラッグ&ドロップすることで自分の好きなようにカスタマイズすることができます。

※変更内容を反映させるには、「変更を保存」ボタンをクリックします。

「段落タグの保持」にチェックを入れることで記事編集時の不具合が発生しにくくなります。

WordPressでは、ビジュアルエディタで書いたものを、テキストモードで修正し、再度ビジュアルエディタに戻った時に、不要なタグが追加されるという不具合が起きる場合があります。この設定にチェックを入れておくことで、その不具合の発生を少なくすることができるようになります。

また、他にも以下のような設定項目があります。

これらの設定については初心者が使いこなすのは難しく、上級者でも使用する機会はほとんどありません。そのため、通常の TinyMCE Advanced エディタが使用できれば特に必要はありません。

TinyMCE Advanced エディタは使い勝手が良く、直感的に使える機能ばかりです。デフォルトのビジュアルエディタには無い下記の機能の使い方を解説していきます。

シンプルなテーブルであれば、TinyMCE Advancedのテーブル機能で簡単に作成することができます。

まず初めに、テーブル（表）を挿入したいところにカーソルを合わせて、「テーブル」ボタンをクリックします。

「テーブルを挿入」にマウスカーソルを合わせると、テーブルの行数と列数を選択できるようになるので、お好きなところでクリックします。
ここでは行数2×列数4のテーブル（表）を作成してみます。

記事本文の中にテーブル（表）が挿入されます。文字を入力したいセルを選択し、文字を入力してテーブルを完成させましょう。

プレビューで正しくテーブルが表示されることをします。

各セルの大きさを変更したい場合は、変更を加えたい列のセルにカーソルを合わせて、「テーブル」→「セル」→「セルのプロパティ」と進みます。

「セルのプロパティ」の設定画面が表示されるので、列幅を「100」と入力してみます。設定ができたら「OK」をクリックしましょう。

再度プレビューで確認し、先ほどよりも、「A1」の列幅が広くなっていることが確認できます。

思った通りの大きさにならなかった場合には、任意のセルにカーソルを合わせて、「テーブル」→「表のプロパティ」と進んでください。「表のプロパティ」の設定画面が表示されるので、列幅を「auto」に変更します。

再度プレビュー画面で確認し、大きさが変わっていることを確認します。

ビジュアルエディタをブラウザ画面いっぱいに広げて記事を作成したい場合は、「フルスクリーン」機能が利用できます。

下記のように、画面全体がビジュアルエディタになるので、集中して記事を作成をしたいときなどにオススメです。フルスクリーンモードを終了するには、「フルスクリーン」ボタンをクリックすることで終了できます。

以上が、TinyMCE Advancedの設定方法と使い方です。慣れるまでは全ての機能を使うのが難しいかもしれませんが、いくつも記事を作成していく内に自然とできるようになっていきます。

どんどん記事を作成して慣れていきましょう。