やりたいことはたくさんあるのにお金と時間がない!という人のためのブログ

ビジュアルエディタとテキストエディタ切り替えの違い解消方法

   



ビジュアルエディタとテキストエディタが切り替えできない?

ビジュアルエディタとテキストエディタを普段から使用している人にとって

2つのエディタを行き来したときに発生する表示の違いって

結構不便なものなのですよね

その中で特に不便なことが

2つのエディタを移動したことによる表示のズレです。


そんな問題を解決する方法を提示します。

切り替えで表示がかわる原因

どうしてビジュアルエディタとテキストエディタを切り替えただけで

表示がずれるなんてことが発生するのでしょうか?

原因は改行と段落の扱いの違いにあります。


WPにはビジュアルエディタとテキストエディタを切り替えるときに

段落自動整形というとてもありがたい機能が最初から入っています。

これは記事を投稿する際に、改行brや段落pを追加したり削除してくれたりする

とっても素敵な機能です。


人が一生懸命改行を追加してページを見やすくしようとして

テキストエディタで頑張って入力したbrを

ビジュアルエディタに切り替える際に

「おいおい間違っているコードがあるぞ。直しておいてやるよ^^」

と、削除してくれるのです。

小さな親切、大きな迷惑です。

ではどうやって解消すればいいのでしょうか?

テキストエディタとビジュアルエディタのズレを解消する方法

両方の改行のしかたを理解して注意する

ここが最初わからないうちは混乱するのですが

多くの人は改行をEnterキーで入力しますよね?

そのときなんですが2つのエディタでは違う入力がされているのです
一行目の文章
二行目の文章
この2つの文章を表示しようとした時

テキストエディタでエンターを押して改行すると
<p>一行目< br>
二行目</p>
こう表示されます。

しかし、ビジュアルエディタで同じようにエンターキーを押すと
<p>一行目</p>
<p>二行目</p>
こうなります。

違いがわかりますでしょうか?

テキストエディタのほうは「改行」、ビジュアルエディタのほうは「段落」

になっています。

この違いがテキストエディタとビジュアルエディタで表示が変わる問題を生んでいます。

ビジュアルエディタで改行をしようとおもったらShift+Enterで

テキストエディタのEnter一回と同じ意味になります。

また逆にテキストエディタで段落をわけようとおもったら

Enter2回でビジュアルエディタでEnter1回押した意味と同じになります。

これによって発生する不具合を具体的にあらわしてみますと

テキストエディタで

一段目も

二段目も赤したい


<b><font color=”#ff0000″>一段目も

二段目も赤したい</font></b>

このように表示したものが、ビジュアルエディタに移動すると

一段目も

二段目も赤したい

<b><span style="color: #ff0000;">一段目も</span></b>

二段目も赤したい

こんな感じでがっつり書き換えられます。

これはかなりの不便さです・゚・(つД`)・゚・

プラグインを利用する

これを解消するにはプラグインを利用する方法がいいでしょう。

TinyMCE Advancedを利用した方法があります。

TinyMCE Advanced設定方法と使い方、日本語化方法

こちらに設定方法を書いておきました。よろしければ参考にどうぞ!


ビジュアルエディタは便利ですが、実際に表示される画面と異なる場合があります。

テーマによる違いなどが顕著ですね。

個人的には普段からテキストエディタを使って

プレビュー画面を見ながら記事を更新するのが

余計な心配をしなくていいので楽じゃないかなと思います!

 - ブログカスタマイズ

  関連記事

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です