【TinyMCE Advanced】WordPressプラグイン設定方法

tinymceadvanced

今日は、WordPressビジュアルエディタを強化してくれる有名なプラグイン【TinyMCE Advanced】を使って、初心者に理想の執筆環境を構築する設定方法を紹介します。

※各メニューの意味等の超初級的な話は省いてます。

プラグイン名:TinyMCE Advanced
作成者: Andrew Ozz

TinyMCE Advanced使い方

プラグイン「新規追加」から、TinyMCE Advancedのインストールが終わったら、管理画面の「設定」→「TinyMCE Advanced」から利用設定を行います。 

設定方法

  1. 利用したいメニューを「Unused Buttons」からドラッグ&ドロップで①に移動させます。また、不要なものは逆に「Unused Buttons」に移動します。
  2. ②の「Load the CSS classes used in editor-style.css and replace the Formats button and sub-menu.」「Stop removing the and tags when saving and show them in the Text editor」両方とも、チェックを入れます。※私の推奨設定です。
  3. 以上の設定が完了したら「Save Changes」ボタンをクリックします。

ちなみに、②の設定「Load the CSS classes used in editor-style.css and replace the Formats button and sub-menu.」は、テンプレートのCSSをビジュアルエディタに反映するための項目です。

「Stop removing the and tags when saving and show them in the Text editor」は、テキスト(HTML)エディタでの、<p>、<br>の挿入の削除を防止します。 ※ビジュアルエディタとテキスト(HTML)エディタの双方を使う方は必ずチェックを入れた方がいいです。

私が推奨する設定方法

私がWordPressビジュアルエディタを利用して、記事発信をする人に利用してもらいたいメニューを解説します。

メニューは無数にありますが、実際に活用するものは実はほとんどありません。

私も、下記で紹介するメニューぐらいしか記事発信に利用することはありません。

正しい情報発信の邪魔になるようなメニューは利用することを控え、きれいな構造の情報発信を心掛けましょう。

なお、私がメール講座で紹介する裏技ツールの購入者に提供しているテンプレートは、ビジュアルエディタ用のCSSを用意されていますが、用意されていないテンプレートもありますのでご注意ください。

ビジュアルエディタ用のCSSが用意されており、「Load the CSS classes used in editor-style.css and replace the Formats button and sub-menu.」にチェックを入れれば、実際の画面に近い雰囲気で更新(記事生成)ができます。

メニュー選択

では、実際に推奨するメニューを解説します。※下記は上記画像の左側から各メニューの説明をしています。

  • Bullet List:リストタグ 
  • Numbered List:ナンバータグ
  • Link:リンク設定
  • RemoveLink Remove Link:リンク解除
  • Quote:引用
  • フォーマット:設定CSSが反映(重要)
  • 段落:見出しタグ

カスタマイズ後の投稿画面

カスタマイズ後

①「ビジュアル」を選択することで、初心者でも記事発信をしやすいビジュアルエディタモードで記事編集できます。

②のメディアを追加から画像のアップロードや挿入ができます。FTPを使ってのアップロードに慣れてない初心者の方は利用するといいでしょう。

③には、「TinyMCE Advanced」で選択したメニューが表示されます。上記画像で表示されているメニューを入れ活用することを推奨します。

なお、③の上段にある以下のメニューも使うことがあるので参考にしてください。

  • 「編集」→「検索置換」
  • 「表示」→「フルスクリーン」
  • 「テーブル」→「テーブル挿入」
  • 「ツール」→「ソースコード」

「検索置換」は記事修正に役立ちます。「フルスクリーン」は作業がしやすくなります。「テーブル挿入」とは表のことです。「ソースコード」を使えば、テキスト(HTML)エディタに変えなくても、ソースを見てコードの微調整ができます。

なお、初心者の方のブログを見ると、間違ったメニュー(タグ)の使用や無駄なタグの乱用を多々見受けます。

通常、必要と考えられるメニュー(タグ)に関しては、本記事で紹介したもので十分です。メニュー(タグ)を利用する際は、どのような意味合いあるのかを理解して活用しましょう。

お薦め情報(中級者以上向け)