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

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

三上 龍志|株式会社シンシエイト
この記事を書いた人
三上 龍志|株式会社シンシエイト
2005年からWeb制作に従事。システム開発ベンチャーでエンジニアとしてWeb開発、Webコンサルティング会社でマーケター・新規事業開発を経て2015年に当社を創業。顧客の成果に顧客よりも本気になることをテーマに、Webを通じて顧客の事業を加速させるために日々奮闘中。
関連する記事
NO IMAGE
WPプラグインJetpackでオススメの厳選10の機能と設定方法
WPプラグイン
YARPPでタイトルと内容が選択できない
【YARPP】関連スコア設定のタイトルと内容を「検討する」に変更する方法(上級者向け)
WPプラグイン
YARPP
YARPPの表示位置を任意の場所に変更する方法(上級者向け)
WPプラグイン
YARPP 上級編
YARPPのデザインテンプレートを自作に変更する方法(制作者向け)
WPプラグイン
WordPress Popular Postsをカスタマイズ
WPPのデザインとレイアウトをカスタマイズして自作テンプレートを作る方法
WPプラグイン
WordPress Popular Postsとは
WordPress Popular Posts(WPP)の使い方とオススメの設定方法
WPプラグイン
WP Plugin
PHP7.3で起きるWPプラグインCrayon Syntax Highlighterのエラーを直す方法
WPプラグイン
WordPressプラグイン TwentyTwenty
2枚の画像を比較するWordPressプラグインTwentyTwentyの使い方
WPプラグイン
YARPP
Yet Another Related Posts Plugin(YARPP)のオススメ設定と機能概要
WPプラグイン
NO IMAGE
WPプラグインのAll in One SEO Packでサイトマップ生成時のエラー解決策
WPプラグイン
マーケティングとWeb制作で
貴社の経営課題を解決します

市場調査や競合調査を始め、企業やサービスの優位性を理解した上で、UI/UX設計やコンテンツマーケティング、SEO・ネット広告を中心としたWebマーケティングを通じて、ビジネスを加速させるご提案をしています。