ワードプレスやブログ運営に役立つ情報をまとめています。WordPressプラグイン、WordPressテーマ(テンプレート)の情報をわかりやすく紹介します。

TinyMCE VisualBlocks - ビジュアルエディタのHTML構造を分かり易くするWordPressプラグイン

このエントリーをはてなブックマークに追加

記事公開 2014.10.16

最終更新 2015.06.05

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の構文が気になる方は活用しましょう。

スポンサーリンク

最後までお読み頂きありがとうございます

ネタワンは皆様の善意に支えられています。
この記事の内容が役に立ったと思ったら、記事をソーシャルメディアで共有してね。

このエントリーをはてなブックマークに追加

RSSフィードを購読する

follow us in feedly

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


ネタワンを購読する

  • Twitter
  • Facebook
  • Google Plus
  • Feedly
  • RSS
  • Push7

初心者向け

WordPress使い方ガイド
WordPress入門

スポンサーリンク

ワードプレステーマTCD

ネタワンでも利用しているTCDのWordPressテーマを紹介します。様々な種類のテーマが販売されています。

MAG(TCD036)

WordPressテーマ「MAG(TCD036)」

ハイクオリティーな人気ブログを構築できるWordPressテーマ


ワードプレステーマTCDの詳細&レビューはこちら