TinyMCE VisualBlocksは、ビジュアルエディタで記事を書く際のHTML構造が分かりやすくできるプラグインです。マークアップ構造が一目で分かりやすくなります。

WordPressで記事を書く際、標準のビジュアルエディタでは、記事本文にHTMLタグが表示されません。なのでHTMLタグの構造が一目で分かりにくいです。このプラグインを利用すれば、記事本文の中にHTMLタグが表示されるようになります。テキストエディタ(HTMLエディタ)と切り替える手間も軽減できます。

普段ビジュアルエディタを利用している方には役に立つプラグインです。HTMLの構文が気になる方は活用しましょう。

はじめに

このプラグインが優れている点

  1. ビジュアルエディタで記事を書く際のマークアップ(HTML構造)が分かりやすくなる。
  2. ビジュアルエディタの記事本文の中にHTMLタグが表示される。
  3. HTMLタグを入れ子にして記述しても、その構造を階層的に表示できる。
  4. 記事作成が捗る。

対応しているHTMLタグ

p, h1, h2, h3, h4, h5, h6, div, section, article, blockquote, address, pre, figure, hgroup, aside, figcaption, ul, ol, dl

インストール方法

管理画面から検索してインストールして下さい。もしくは、WordPress.org からダウンロードし、アップロードしてインストールして下さい。

  1. WordPress管理画面 > プラグイン > 新規追加 >「TinyMCE VisualBlocks」で検索
  2. WordPress.org からダウンロード

プラグインの使い方

管理画面の場所

このプラグインの管理画面はありません。投稿と固定ページの「ビジュアルエディタ」の中に反映されます。

WordPress管理画面 > 投稿 > 新規作成 > ビジュアル
WordPress管理画面 > 固定ページ > 新規作成 > ビジュアル

ビジュアルエディタの例

投稿と固定ページのビジュアルエディタでHTML構造が分かりやすくなります。HTMLタグごとにブロックの枠が表示され、ブロックの左上にHTMLタグの名前が表示されます。

HTMLタグを入れ子にして記述しても、その構造を階層的に表示できます。

TinyMCE VisualBlocks

まとめ

TinyMCE VisualBlocksは、ビジュアルエディタで記事を書く際のHTML構造が分かりやすくなるプラグインです。マークアップ構造が一目で分かりやすくなります。

普段ビジュアルエディタを利用している方には役に立つプラグインです。HTMLの構文が気になる方は活用しましょう。

スポンサーリンク