東京のホームページ制作会社・web制作会社
株式会社シンシエイト

WP必須プラグイン!TinyMCE Advancedの使い方・設定方法

tinyMCE advanced

ワードプレスにはプラグインが多くありすぎて何を入れていいのかわからない。。なんていうことありますよね。TinyMCE Advancedはワードプレスのエディターを拡張して、ページの表現力を高めることができるので、必須のプラグインと言っても過言ではありません。

TinyMCE Advancedってどんなプラグイン?

通常のページ更新画面だとエディター部分はこんな風になっていると思います。

デフォルトエディター

ワードプレスのデフォルトエディタ

これだけでも基本的には事足りるのですが、TinyMCE Advancedのプラグインを入れるとこんな感じになります。

TinyMCE Advancedのエディター

TinyMCE Advanced のエディタ

おや?なんか増えた!って感じがしますよね?見た目もワードやエクセルを開いた時みたいになったのに気づいたと思います。

これが TinyMCE Advanced プラグインで、例えば「テーブル」の項目から表を挿入したりすることができます。更に管理画面でカスタマイズすることによって、これらのアイコンを増やしたり無くしたり、順番を変えたりすることで使いやすくなっていきます。

TinyMCE Advancedの設定方法

ワードプレスの設定メニュー

TinyMCE Advancedをインストールすると、管理画面の左メニュー「設定」の中に「TinyMCE Advanced」という項目が追加されます。こちらをクリック。

基本設定

TinyMCE Advancedの設定画面

画面上部には、エディターに諸々追加された状態の画面が表示されます。下の「使用しないボタン」からそれぞれのアイコンを上部にドラッグして移動することでエディターのメニューに追加することができます。

特にデフォルトでは入れられない「動画を挿入/編集」機能はYoutubeを埋め込む時などに使えるので追加しておくと良いでしょう。

「設定」項目

TinyMCE Advanced 「設定」

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

リスト表示する時に、行頭番号や行頭記号をつけるかどうかの設定です。基本的にはチェックしておくと良いでしょう。

コンテキストメニュー

エディター上で右クリックした際にエディターメニューを表示するかどうかのチェックです。個人的にはチェックを外して運用しています。

代替リンクダイアログ

リンクを設定する際に、通常のリンク設定画面ではなくTinyMCE Advancedのリンク設定画面を表示します。個人的にはチェックを外して運用しています。

フォントサイズ

フォントのサイズを大きく(小さく)表示する時に使うメニューの項目を増やします。通常は〇〇pt表示ですが、○○pxに変更することができます。個人的には、パソコンサイトとスマホサイトで表現の違いが出てしまうため、フォントサイズの項目自体を使っていません。

「高度なオプション」項目

TinyMCE Advanced 「高度な設定」

CSS クラスメニューの作成

スタイルシートで、独自の見た目を設定する際にチェックを入れます。CSSやワードプレスのアップロードに関する知識が必要です。

投稿タグの保持

デフォルトではページ更新画面で改行すると、公開ページでも改行がされていますが、その改行を解除するチェックボタンです。使いづらいので基本的にはチェックを入れずでOK。

画像元の貼り付けを有効にする

デフォルトでは画像をアップロードすると「メディア」の中に溜まって行きますが、「メディア」内に溜めずにページ内にそのまま画像を埋め込む設定です。こちらもチェックなしでOK。

「管理」項目

TinyMCE Advanced 「管理」

お気に入りのエディター設定ができた場合に、他のブログに同様のエディター設定をする際に使用します。設定されているサイトの「設定のエクスポート」ボタンを押すと以下のように(例)表示されます。

TinyMCE Advanced エクスポート画面

これを「すべて選択」し、同じ設定にしたいサイトで「サイトのインポート」を行います。

TinyMCE Advanced インポート画面

こちらに先ほどのコピーしたテキストを貼り付けて、右下の「インポート」で設定完了です。

ちなみに僕が当サイトで使っているMCE Advancedの設定はこちら。

{“settings”:{“toolbar_1″:”formatselect,bold,italic,underline,strikethrough,bullist,numlist,link,unlink,image,media”,”toolbar_2″:”fontsizeselect,forecolor,backcolor,blockquote,alignleft,aligncenter,alignright,table,emoticons”,”toolbar_3″:””,”toolbar_4″:””,”options”:”advlist”,”plugins”:”emoticons,table,advlist”},”admin_settings”:{“disabled_editors”:””}}

TinyMCE Advancedの機能が記事上で表示されない場合

TinyMCE Advancedでこれらの機能が拡張できたとしても、ワードプレスのテーマがそれぞれに対応していないと綺麗に表示されない場合があります。

その場合は、テーマを拡張するか他のテーマに変更して試してみる必要があります。

三上 龍志
この記事を書いた人
三上 龍志
株式会社シンシエイト代表。青学中退(尾崎豊ではない)から16年間IT・web一筋。学生起業時から潰した事業は数知れず。「人生を面白く」がテーマ!一人旅 / 筋トレ / Nuno Bettencourt / 千里眼 / 二娘 / 白髪
関連する記事
PHP7.3で起きるWPプラグインCrayon Syntax Highlighterのエラーを直す方法
WPプラグイン
YARPPのデザインテンプレートを自作に変更する方法(制作者向け)
WPプラグイン
2枚の画像を比較するWordPressプラグインTwentyTwentyの使い方
WPプラグイン
YARPPの表示位置を任意の場所に変更する方法(上級者向け)
WPプラグイン
NO IMAGE
WPプラグインのAll in One SEO Packでサイトマップ生成時のエラー解決策
WPプラグイン
【YARPP】関連スコア設定のタイトルと内容を「検討する」に変更する方法(上級者向け)
WPプラグイン
WordPress Popular Posts(WPP)の使い方とオススメの設定方法
WPプラグイン
さよならスパム!ワードプレスのAkismetプラグインの設定・アクティベート方法
WPプラグイン
NO IMAGE
WPプラグインJetpackでオススメの厳選10の機能と設定方法
WPプラグイン
WPPのデザインとレイアウトをカスタマイズして自作テンプレートを作る方法
WPプラグイン
株式会社シンシエイト ブログ バックエンド WPプラグイン WP必須プラグイン!TinyMCE Advancedの使い方・設定方法

web制作とマーケティングで
貴社の経営課題を解決します

web制作でのブランディングや、コンテンツマーケティング・SEO・ネット広告を中心としたウェブマーケティングを通じて、企業の事業を加速させるご提案をしています。