ご登録はこちらをクリック

tinyMCE Advancedの使い方と設定方法まとめ

tinyMCE Advancedのイメージ画像

wordpressのビジュアルエディタ機能を充実させてくれるプラグインの「tinyMCE Advanced」。

tinyMCE Advancedを使えば、wordpressのデフォルトにはない以下のようなアイコンボタンを追加することができ、作業を便利に効率化することができます。

  • フォントサイズの変更
  • テーブルでの表作成
  • 背景色の変更

この記事ではtinyMCE Advancedの基本的な使い方や設定方法についてお伝えしていきます。

tinyMCE Advancedをインストールする

もし、まだtinyMCE Advancedのインストールが完了していないのであればインストールを済ませましょう。

プラグインを追加する画面(プラグイン→新規追加)の検索窓に「tinyMCE Advanced」と入力します。

すると、以下のアイコンが目印のtinyMCE Advancedが表示されるので「今すぐインストール」をクリックします。

TinyMCE Advancedのアイコン画像

インストールが完了したら、そのまま「有効化にする」をクリックしてプラグインを使える状態にしてしまいましょう。

エディター設定でボタンのカスタマイズをする

tinyMCE Advancedはインストールしたときの状態でも機能の拡張ができますが、より自分に合った使い方をするために設定でカスタマイズをしましょう。

以下の画像のように、wordpress管理画面の左側の設定項目にある「tinyMCE Advanced」をクリックします。

tinyMCE Advancedの設定画面

すると、エディター設定画面が表示されるので、tinyMCE Advancedのメイン設定である「アイコンボタンの追加・編集」をおこなっていきます。

tinyMCE Advancedのエディター設定画面

やることはとても簡単で、使用しないボタンのの中から必要なボタンをドラッグして上部のツールバーに移動させるだけです。

この逆の、ツールバーにいらないボタンを使用しないボタンに移動させることもできます。

また、ツールバー内のボタンの並べ替えも自由にできるので、自分の使いやすいツールバーの状態にカスタマイズしちゃいましょう。

 

個人的に、tinyMCE Advancedをインストールしたのであれば以下のボタンはツールバーに追加しておくのがおすすめです。

フォントサイズ 文字のサイズの変更ができます。
テーブル エクセルのようなテーブル表の作成ができます。
背景色 文字の背景色を変える装飾ができます。
下線 文字の下に線を引くことができます。

これらのボタンはデフォルトのビジュアルエディタにはなく、筆者はtinyMCE Advancedを入れてからよくお世話になってます。

記事の装飾をよくするサイトには必須ともいえるボタンなので参考にしてみてください。

他には、YouTubeなど動画を記事内に貼り付けたりすることが多い方であれば、

の「Insert/edit video」ボタンを入れておくと便利になるのでおすすめです。

エディターツールバーボタンの補足

エディター設定画面の最初に「エディターメニューを有効化にする」という項目があり、デフォルトでは有効化されています。

tinyMCE Advancedのエディター設定画面2

エディターメニューを有効化しておくと、以下のように投稿画面でtinyMCE Advancedで使える機能を呼び出すことができるので、基本的に有効化しておくといいでしょう。

tinyMCE Advancedで有効化されたメニュー

その他の設定項目

ツールバーのボタンのカスタマイズができたら、エディター設定画面を下に進めてその他の設定項目についても確認しておきましょう。

設定

tinyMCE Advancedのエディター設定画面3

4つの項目があり、「リストスタイルオプション」のみチェックされた状態がデフォルトです。

リストは記号があった方が見やすいのでチェックしたままにしておきましょう。

「コンテキストメニュー」「代替リンクダイアログ」は特にこだわりがなければデフォルトのままで問題ありません。

「フォントサイズ」にチェックすると、フォントサイズの選択をptからpxに変更することができます。

フォントサイズがptよりもpxの方が合っている方はチェックを入れるといいでしょう。

高度なオプション

tinyMCE Advancedのエディター設定画面4

投稿画面でビジュアルエディタとテキストエディタをよく切り替える方は、「段落タグの保持」にチェックを入れておくといいでしょう。

この項目にチェックを入れておくと、エディタ画面を切り替えたときに起こる自動修正を停止してくれるので、投稿画面での不具合が起こりにくくなります。

その他の項目はでチェックされていないデフォルトのままでOKです。

管理

tinyMCE Advancedのエディター設定画面5

「設定のインポートとエクスポート」機能を利用すると、

他のwordpressサイトのtinyMCE Advancedの設定を読み込んだり、他のwordpressサイトのtinyMCE Advancedへ設定を反映させることができます。

複数のサイトでtinyMCE Advanced使うのであれば、設定の効率化のために使ってみるといいでしょう。

次のエディター拡張の有効化は、デフォルトのままで問題ありません。

 

アイコンボタンの追加と編集、設定が終わったら、画面の右上と左下にあるどちらかの「変更を保存」をクリックします。

これでtinyMCE Advancedの使い方は以上となります。

まとめ

tinyMCE Advancedを使えば簡単にビジュアルエディタ機能を拡張させることができます。

ツールバーボタンのカスタマイズ性も高いので、ぜひ自分好みにカスタマイズして作業を効率化させていきましょう。


ブログランキングに参加しています!
クリックして応援してもらえると記事更新の励みになるのでよろしくお願いします。

↓ ↓ ↓

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください