「TinyMCE Advanced」の設定方法と使い方【おすすめ設定もあわせて紹介】

 

 

ワードプレスの投稿編集画面に便利な機能を追加することができる

プラグイン「 TinyMCE Advanced 」の設定方法と使い方を解説します。

１．TinyMCE Advanced とは

ワードプレスブログのテキストを太文字にしたり色を付けたりする装飾や

表(テーブル)を挿入するのには、テキストエディタに HTML を入力する必要があります。

 

ブログをはじめたばかりの人が、HTML まで覚えるとなったら結構大変な労力が必要ですよね。

 

そこで TinyMCE Advanced プラグインを使うことで

基本的な機能をビジュアルエディタからボタン一つで使用することができるようになります。

 

TinyMCE Advanced を導入していない投稿編集画面

TinyMCE Advanced を導入後の投稿編集画面

このように投稿編集画面にツールの欄が増え

そこへあなたの使いたい機能を自由に追加することができます。

 

２．TinyMCE Advanced のインストール方法

TinyMCE Advanced はワードプレスの公式プラグインです。

プラグインの新規追加画面または、以下のプラグインページからダウンロードしてインストールしましょう。

 

参考リンクTinyMCE Advanced プラグインページ

参考リンクプラグインのインストール方法

 

 

３．TinyMCE Advanced の設定方法

TinyMCE Advanced の設定画面は、ワードプレス管理画面左側メニューから

設定 ＞ TinyMCE Advanced と選択することで開くことができます。

 

エディター設定画面が表示されるので、旧エディター のタブをクリックしましょう。

 

あとは、下の欄のツール一覧の中から、あなたが使いたいものを上のツールバーの欄にドラッグ＆ドロップするだけでOK！

 

最後に右上の 変更を保存 をクリックすると設定が保存されます。

 

４．TinyMCE Advanced の使い方

それでは、設定画面で追加した機能を実際に使ってみましょう！

 

TinyMCE Advanced の機能を使うためには、投稿の編集画面でビジュアルエディタを選択しましょう。

 

 

4-1 見出しの設定

まずは一番よく使う機能として、見出しの設定からいきます。

見出しや太字などテキストを対象とする場合は、まず設定したいテキストの範囲を選択します。

 

次に「段落」のボックスから「見出し2」を選択します。

 

するとこのように、選択した段落が見出し2になります。

 

同じ手順で、見出し3や見出し4なども設定することができます。

もう1度段落に戻したい時は、テキストを選択して「段落」をクリックすれば戻ります。

 

4-2 テキストの装飾

テキストの装飾に関してもやり方はまったく同じです。

装飾したいテキストを選択して、「 B 」（太字）ボタンをクリックします。

 

するとテキストが太字になりました。

 

 

テキストの色を変更したい時は、「 A 」（背景色）を選択します。

カラーパレットが表示されるので、その中から好きな色を選んでクリックしましょう。

 

今度はテキストの色を変更することができました！

 

上の操作を繰り返すことで、太字 + 赤色 のように組み合わせて装飾することも可能です。

 

「 12pt 」と書かれているボックスをクリックすると、フォントサイズ(文字の大きさ)の変更ができます。

 

「 18pt 」にしてみるとこんな感じです。

 

4-3 引用

「引用」は他サイトやメディアから文章の一部を引用したいときに使用します。

引用したいテキストの範囲を選択して、「引用」をクリックしましょう。

 

このように引用が適用されます。

 

4-4 番号無しリスト＆番号付きリスト

テキストをリスト(箇条書き)表示するときに使用します。

番号無しリストの適用例。

 

番号付きリストの適用例。

 

4-5 左寄せ・右寄せ・中央揃え

テキストを 左寄せ(デフォルト)・右寄せ・中央揃え するときに使用します。

 

4-6 表(テーブル)の挿入

枠を指定して、表(テーブル)を挿入することができます。

 

テーブルの詳しい使い方については以下のページを参照してください。

参考リンクブログにテーブル（表）を設置する方法

 

 

テーブルの表示例（5×4サイズ）

 

4-7 横ライン

横ライン(区切り線)を挿入するときに使用します。

 

横ライン表示例

 

4-8 改ページ

1つの記事内でページが切り替わる「改ページ」を挿入するときに使用します。

 

改ページ使用例

 

4-9 動画の挿入

記事内に YouTube などの動画を埋め込む場合に使用します。

 

動画の埋め込み方法については、以下のページで詳しく解説してます。

参考リンクYouTube の動画をブログに埋め込む方法

 

 

メディアを挿入/編集 をクリックすると以下の入力画面が表示されるので、ここに動画のソースを入力します。

 

実際に埋め込むとこのように表示されます。

 

５．TinyMCE Advanced おすすめ設定

とても機能が豊富な TinyMCE Advanced ですが

あまりに機能が多すぎて、最初から全部を使いこなすのは大変。

 

というか、実際にはほとんど必要のないような機能もあるので

「とりあずこれだけ入れておけば困らない」わー研。おすすめの設定方法をご紹介しておきます。

 

 

上で解説してきた 機能+α の最小構成ですが、とりあえずこれで困ることはないでしょう。

あとは随時、あなたが必要な機能を追加していきましょう。

 

さいごに

TinyMCE Advanced プラグインの設定方法と使い方について解説しました。

 

基本的な機能については、これ1つあれば十分ですね。

あとは使っていきながら、自分好みにカスタマイズしていきましょう。

 

最後にこのページのおさらいをしておきましょう。