TinyMCE VisualBlocks：ビジュアルエディター上でHTML構造が一目で分かる
テキストエディターで HTML タグを記述して、
表示の確認でビジュアルエディターに切り替えてみると、ズレてる時がありますよね。
そうなると、どこからどこまでが何のタグが影響しているのか分かりづらいですよね。
そのような時に便利な WordPress 用プラグインがあります。
それは「TinyMCE VisualBlocks」です。
そのインストール手順から日本語化・使い方と設定などを解説していきます。
TinyMCE VisualBlocks
TinyMCE VisualBlocks は、ビジュアルエディター上で HTML 構造（各種タグ）が一目で分かるようできる国産のプラグインです。
サポートしている HTML タグは、以下のとおりです。
- p
- h1
- h2
- h3
- h4
- h5
- h6
- div
- section
- article
- blockquote
- address
- pre
- figure
- hgroup
- aside
- figcaption
- ul
- ol
- dl
記事を作成もしくは更新時点でのバージョン：v 1.0.5
マルチサイトでの利用:可
インストール手順
下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化するか
TinyMCE VisualBlocks – WordPress.org
もしくは、WordPress.org の公式プラグインディレクトリにリリースされているので、
管理画面から入手できます。
ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、
プラグイン追加画面右上の検索窓に「TinyMCE VisualBlocks」と入力します。
検索結果の一番左上に表示されると思うので、「今すぐインストール」をクリックします。
インストールが完了したら、プラグインを「有効化」します。
プラグインのインストールに慣れていない方は、
下記の記事にて詳しく解説していますので、御覧ください。
WordPressプラグインのインストール手順を解説 – WordPress活用術
日本語化
TinyMCE VisualBlocks は、専用メニュー・設定画面も含めて何も無いので、日本語化を気にする必要は無いです。
専用メニュー
「TinyMCE VisualBlocks」は、専用メニューは無いです。
使い方
投稿記事か固定ページの編集画面で、ビジュアルエディターを開くと、
サポートしている HTML タグが記述されていると適用範囲を点線で表示してくれます。