心とテクノロジーで
世界を明るくする
株式会社シンシエイト
Weblog

ブログ

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

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

tinyMCE advanced

この記事が気に入ったら
いいねお願いします!
(facebookでシェアはされません)

三上 龍志
元パンパースのCMモデルがネタの株式会社シンシエイト代表。システムエンジニア出身営業育ち。ビーフジャーキー作りが趣味。webが大好きな2児の父。