【WordPress】 自動整形ルールの調査⑥ 消えるスペース(空白)について

自動整形についての検証、次は「消えるスペース(空白)」についてです。

記事を書いていると文のはじめに1文字スペースを入れたくなりますが、WordPressでコレをすると自動整形で消されてしまいます。
また文中にスペースを入れると消えたり消えなかったりと不安定です。

これはどういうことでしょうか。
整理してみましょう。

確認条件は以下のとおり。

・WordPress 3.7.1
・テーマ TwentyTwelve(子テーマ追加 但し子テーマ内は空)
・ブラウザ Firefox 26.0
・自動整形を制御するプラグインは未使用

スポンサーリンク

文頭、文中、文末にスペースを入れた場合

まずはじめに半角・全角がどのような自動整形を受けるか調査しました。

ビジュアルモードで文頭、文中、文末にスペースを入れてみました。

automatic_formatting_401b

これを公開するとこうなります。

automatic_formatting_402b

文中以外が消えました。

テキストモードではどうでしょうか。

automatic_formatting_403b

公開すると、

automatic_formatting_404b

全角スペースはそのまま残っています。
これ使えば良さそうですが、実はこの結果は自動整形を受けて変化します。

ビジュアルモード→テキストモードと切り替えてから公開すると、

automatic_formatting_405b

文頭、文末のスペースが消えて、ビジュアルモードと同じ結果になりました。
このようにプレビューで確認して問題無いと思っていても、いつの間にかスペースが消えているということが起きます。

自動整形後を結果を表にするとこうなります。

automatic_formatting_blank_01

どうやら文中にスペースを入れる場合はビジュアル/テキストどちらのモードでも良さそうです。

しかしこれはスペース1つだけの結果です。
実はスペースの数が増えると結果が少し変わります。

automatic_formatting_blank_02

automatic_formatting_blank_03

テキストモードで文中に半角スペースを連続して入れても自動整形で1つにされてしまいます。

これで

・文中にスペースを入れることは可能。
・ただしテキストモードでは半角スペースを連続して入れても1つになってしまう。

ということが分かりました。

半角スペースを連続して入れるなら全角を使えばいいだけなのであまり影響がないと思いますが、トラブル防止のために覚えておきましょう。

一番の問題は文頭のスペースですね。
日本語の場合は文頭を1文字空けるのが通例ですので、コレがないと読んでいて収まりの悪さを感じてしまいます。
次は文頭にスペースを作る方法を考えてみましょう。

 文頭にスペースを作る方法

これにはいくつか方法があります。

①CSSでインデントを設定する。

テキストは通常Pタグで囲まれますので、Pタグにインデントを追加すれば自動的にスペースを加えることができます。

style.cssに以下のコードを追加します。

automatic_formatting_406b

これでPタグで囲まれた始めの文が1文字分インデントされます。
非常に楽です。

ただしテキストがどのようにPタグで分割されるかを把握していないとインデントのコントロールが難しくなります。

例えば、

automatic_formatting_407b

部分的にインデントを付けたくない場合は、

automatic_formatting_408b

automatic_formatting_427b

このように「Pタグの範囲」と「改行」をうまくコントロールする必要があります。

これに関しては前回の【WordPress】 自動整形ルールの調査⑤ 消える改行について【まとめ】でまとめていますのでそちらをご参照ください。

②SPANタグを用いて追加する方法

テキストモードでSPANタグを用いて追加する方法もあります。

下図のようにSPANタグで全角スペースを挟みます。

automatic_formatting_409b

automatic_formatting_410b

連続してスペースを追加することも可能です。

automatic_formatting_411b

ただしこの方法では半角スペースは使えません。

③SPANタグと特殊文字のスペースを使う方法

どうしても半角スペースを入れたい場合は特殊文字を使います。

WordPressを使っているとよく目にする が特殊文字の半角スペースです。

automatic_formatting_412b

こうすると文頭に半角スペースが追加できます。

automatic_formatting_413b

ただし1点注意が必要です。

 と記述しましたが、ビジュアルモード→テキストモードと切り替えるとこうなります。

automatic_formatting_414b

 が半角スペースに変化してしまいました。

半角スペースであれば自動整形で消えてしまうはずです。
しかしこの場合は特殊文字のため消えないのです。

半角スペースが「キーボードで入力したもの」か「特殊文字が変化したもの」かは見た目では判断できません。

試してみましょう。

automatic_formatting_415b

ビジュアルモード→テキストモードと切り替えると、

automatic_formatting_416b

つまり文頭のスペースがうまく出来ている箇所を参考にして同じように記載しても同じ結果にならない場合があるということです。
この点にも注意してください。

文末にスペースを作る方法

文末でスペースを作る場合も文頭と同じようにSPANタグを活用します。

①SPANタグを用いて追加する方法

automatic_formatting_423b

automatic_formatting_424b

②SPANタグと特殊文字のスペースを使う方法

automatic_formatting_425b

automatic_formatting_426b

特殊文字について

&nbspという特殊文字のスペースを使いましたが、特殊文字のスペースは だけではありません。
幅で違うスペースが何種類かあります。
これらについてもまとめてみました。

幅の小さい順に並べると

 
 (=半角スペース)
 
全角スペース
 

となります。

確認してみましょう。

automatic_formatting_417b

これをビジュアルモード→テキストモードと切り替えるとこのように変化します。

automatic_formatting_418b

違いがわからなくなりましたが、これを公開すると

automatic_formatting_419d

徐々にスペースが増えるように表示されました。

文中でも試してみましょう。

automatic_formatting_420b

文末ではどうでしょうか。

automatic_formatting_421b

文末でもスペースができています。

特殊文字を繰り返すことでスペースを拡げることも出来ます。

10回繰り返してみると

automatic_formatting_422b

このようになります。

おそらく特殊文字の使い分けをするような用途はないと思いますが覚書ということで。

まとめ

まとめると以下のようになります。

・文頭のスペース

CSSでインデントをつける。
SPANタグで囲った全角スペースをつける。
SPANタグで囲った特殊文字のスペースをつける。

・文中のスペース

ビジュアルモードでスペースをつける。(半角・全角ともにOK)
テキストモードでは全角スペースであればそのまま記載してOK(半角スペースは2つ以上連続させると強制的に1つになる)
SPANタグで囲った特殊文字のスペースをつける。

・文末のスペース

SPANタグで囲った全角スペースをつける。
SPANタグで囲った特殊文字のスペースをつける。

これで記事のスペース(空白)が自在にコントロールできるはずです。

「消える改行について」「消えるスペースについて」と検証してきました。
これで前回サイトを立ち上げたときに苦労した問題が概ね解決できたと思います。

自動整形には「-」を連続させると「-」に化けるなどの変化もあるのですが、私自身あまり実作業で使っていないので後回しにします。

このまま続けているとアフィリエイトのサイトではなくWordPressのサイトになってしまいそうなので、この辺りで切り上げて次のサイト構築に注力したいと思います。


スポンサーリンク
  • このエントリーをはてなブックマークに追加

コメントをどうぞ

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

CAPTCHA