WordPressで記事にhtmlタグを流し込む際に改行空白を自動で詰める「改行・空白・タブ削除ツール」

ワードプレスのエディターには「ビジュアルモード」と「テキストモード」２つの文字入力モードが用意されています。ビジュアルモードはhtmlタグなどのコードを意識せずに文字を入力していけるモード。そしてテキストモードがhtmlタグを直接入力していくモードです。念のため以下に画面を貼っておきます。

htmlタグの改行空白を自動で詰める「改行・空白・タブ削除ツール」

ワードプレスのエディターには「ビジュアルモード」と「テキストモード」があります。

ビジュアルモードの状態

htmlタグを気にすることなく、感覚的に文字入力を行うモードです。検索エンジンが認識するコードを自動で置き換わるため手入力にありがちな『タグの閉じ忘れ』によるレイアウト崩れが起こりません。

テキストモードに切り替えた状態

htmlタグを使って直接入力していくモードです。タグの自動補完などはないためタグの記述ミスや開始タグと閉じタグの記述忘れがった場合に全体のレイアウトを崩す可能性があるモードとも言えます。

エディターモードはどのように使い分けるのか？

簡単に言えば「ビジュアルモード」はhtmlタグといったソースコードが分からない初心者さん向けで、テキストモードはプロ向けの入力モードとなります。もちろん、プロ向けと言ってもプロだけでなく、ビジュアルモードで補完しきれない内容の微調整などはテキストモードで行うのが一般的です。

Webデザイナーやエンジニアなどクリエイター職は「ビジュアルモードとテキストモードの両方」を切り替えながら使います。もし、外部サービス（メルマガスタンドなど）から発行される専用の差し込みソース（指定のタグ）などがあった場合にはビジュアルモードだと自動変換されるため、一度「テキストモード」へ切り替えてから指定のタグを流し込んで保存をするというステップが必要となってきます。

特に外部サービスのサイトから指定される専用タグは想像以上にhtml構造が複雑に作られていたりするのでビジュアルモードでは処理ができず（開始タグが記号に置き換えられたり）レイアウトが崩れます。場合によってはタグの一部を削除することもあるので状況に合わせてモードを切り替えるのが一般的です。

テキストモードで入力すると隙間が発生する？

一方で「テキストモード」であればそのような自動補完機能は動かないので、タグを流し込みたいときも安全にhtmlタグを差し込めるわけです。ただ、テキストモードでは「改行」もすべてを再現します。

そのため、差し込む指定のタグによっては記事を公開した際に「謎の空白」が発生したりします。たとえば下記のように外部サービスの指定タグをテキストモードで流し込むとスペースや改行が入りました。

ビジュアルモードではタグの自動変換がはいるため入力できないので「テキストモード」に切り替えてコピペするとコピーした際にあった「改行」や「タブ（tab）」が残ってしまいました。このままだとサイト側に表示されるときに改行が隙間になります。でも全部を手動で詰めていくと手間がかかりますよね。

そんな時は下記のツールを使うとタグを自動で詰められます。

せっかく「テキストモード」に切り替えて入力しても、誤ってタグを消してしまったり、閉じタグを忘れてしまうとレイアウト崩れの原因にもなるので専用の除去ツールを活用して効率化を図ってください。

レイアウト崩れが気になっていた方はぜひ一度お試しくださいませ。

▼改行・空白・タブ削除ツールはこちら
https://html-css-javascript.com/n-space-tab/