【WordPress】TinyMCE Advancedで勝手に「p(段落)」タグが消えてしまう現象を解消する

2022年10月7日2022年10月11日

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

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

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

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

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

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

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

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