こうへいのアフィリエイトエッセンス｜ネットで稼ぐための本質を身につけるブログ

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

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

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

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

tinyMCE Advancedをインストールする

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

その他の設定項目

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

設定

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

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

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

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

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

高度なオプション

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

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

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

管理

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

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

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

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

 

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

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

まとめ

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

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