練馬のみなさまへ 協業のお願い!

TinyMCE Advancedで勝手にpタグが消えてしまう現象を解消する

Webのことのアイキャッチ画像

「テキスト」モードで作成した記事を「ビジュアル」モードで編集するとデザインが崩れてしまう問題

WordPressなどに使用される入力フォーム(TinyMCE)で記事を書いているとふとした瞬間に見た目が大きく崩れてしまっていることがあります。

例えばWordPressでは「テキスト」モードで投稿した記事を「ビジュアル」モードで編集すると、デザインが崩れてしまうことがあります。

この現象はWordPressの入力フォームが自動的に空のタグなどを削除しながらページを整えていることが影響しています。
その結果、本当はCSSの設定で必要なタグであっても、中身が空だったりすると容赦なくタグは消していかれ、デザインを崩してしまいます。

TinyMCE AdvancedでHTMLを維持しよう

対処法としては入力フォーム(TinyMCE)の設定を変える必要があります。

WordPressではちょうどいいプラグインとして「TinyMCE Advanced」というものがあります。

2018030403

TinyMCE Advancedをインストールしたら「設定項目」の中の「高度なオプション」から「段落タグの保持」にチェックをすればOKです。

このように設定することによって「デザイン」モードにしたらデザインが崩れるという状況を防ぐことができます。