当｢ブログ作成のツボ｣では、WordPressを使ってブログを作成する際のお役立ち情報を配信しています。ブログの立ち上げから筆者の経験談、便利だなと思ったプラグインの使い方等も掲載しています。

投稿・固定ページ編集画面で不用意な<BR>が挿入されてしまうので、なぜかと調べたところTinyMCE　Advancedプラグインの設定を変更したためだったことが判明。その対処方法を伝授。

Editor-Style.cssでビジュアル画面の見た目を本番と同様にできるが

TinyMCE Advancedの設定オプションとして” Load the CSS classes used in editor-style.css and replace the Formats button and sub-menu.“というオプションがあります。このオプションにチェックをいれるとビジュアル画面用にeditor-style.cssを利用するようになり、見かけを本番と同様にすることが出来ます。

しかし、このeditor-style.cssを利用したため、インライン要素である<label>や<input>の後に、<BR>が挿入されることが判明。

オプションを使用する前のソース

<div class="filter-select-value">
  <label><input class="user-type1" name="user-type" type="radio" value="○" />新規</label>
  <label><input class="user-type2" name="user-type" type="radio" value="○" />MNP</label>
  <label><input class="user-type3" name="user-type" type="radio" value="○" />機種変更</label>
  <label><input class="user-type4" name="user-type" type="radio" value="○" />契約者</label>
</div>

オプション設定後のソース

<div class="filter-select-value">
        <label><br />
          <input class="user-type1" name="user-type" type="radio" value="○" /><br />
          新規</label><br />
        <label><br />
          <input class="user-type2" name="user-type" type="radio" value="○" /><br />
          MNP</label><br />
        <label><br />
          <input class="user-type3" name="user-type" type="radio" value="○" /><br />
          機種変更</label><br />
        <label><br />
          <input class="user-type4" name="user-type" type="radio" value="○" /><br />
          契約者</label><br />
 </div>

上記のようにオプションを設定する前と設定後に、不用意な<BR>の挿入や自動整形が施されています。この<BR>は、もう一つのオプションである”Stop removing the　and　tags when saving and show them in the Text editor“にチェックを入れることにより防ぐことができますが、スクリプトソースで自動整形までは防ぐことが出来ないようです。プラグインをつかわなくても投稿画面でJavaScript等を記述して実行することは可能ですが、ソースを自動整形されると動かなくなることもあり自動整形も防ぎたい。この問題を解消するためには、もう一つのプラグインPS Disable Auto Formattingを使用することにより解消しました。

この問題の解決方法

結局、以下のような方法でこの問題を解決しています。

• Load the CSS classes used in editor-style.css and replace the Formats button and sub-menu.はチェックしない
• Stop removing the　and　tags when saving and show them in the Text editorをチェックする
• PS Disable Auto Formattingプラグインで自動整形を防ぐ

 注意！：当記事にした解決法は、不用意な<BR>挿入を禁止し、自動整形を防ぐの2点について記述したものです。これで完璧とは考えていませんが、とりあえずこの方法で当面使う事にしました。