【WordPress】 自動整形ルールの調査⑤ 消える改行について【まとめ】

前回まで自動整形で各種改行がどのように変化するかを検証しました。

これでモヤモヤしていた部分がかなりスッキリしました。
さて記事を書こうとしたら・・・
「で、どうしたらいいんだっけ???」
実作業で具体的に何をするか
をまとめていませんでした。

今回は実際にどのように運用するかをまとめていきましょう。

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

・WordPress 3.7.1
・テーマ TwentyTwelve(子テーマ追加 但し子テーマ内は空)
・ブラウザ Firefox 26.0
・自動整形を制御するプラグインは未使用
※ただし子テーマのstyle.cssは説明のために時折改変しています。

スポンサーリンク

①テキスト間に1行のスペースを作る場合

●ビジュアルモードの場合

文末の改行を同じ「Shift+Enter」をもう一回繰り返す。
もしくは「Enter」で改行する。

automatic_formatting_301b

もしくは、

automatic_formatting_301c

●テキストモードの場合

テキスト間に1行のスペースを作るだけでOKです。

automatic_formatting_302b

1行の場合はどちらのモードも見た目に1行分のスペースができているので分かりやすいですね。

●公開時のソース

automatic_formatting_305b

●注意点①

出来上がったテキストを「Enter」で段落に分ける場合は、余計な改行が1つ増えてしまいます。

automatic_formatting_303b

automatic_formatting_304c

これにより作ったはずの段落が自動整形で消えてしまいますので、「Del」キーで1行消しましょう。

もしくは「Enter」を文頭で入れましょう。

automatic_formatting_303c

 ●注意点②

これで出来上がるテキスト間のスペースはテキストをPタグを分けることで出来る段落です。
デフォルトのCSSはPタグの段落が1行ですが、これを任意に広げている場合は当然その通りになります。

automatic_formatting_306b

●注意点③

CSSでPタグの先頭にインデントやマークを付けた場合、段落ごとに適用されてしまいます。

automatic_formatting_307b

automatic_formatting_308b

●注意点③の対応

もし注意点③の結果を望まない場合はPタグを2つに分けずに段落を作る必要があります。

テキストモードでクラス指定をしたBRタグを追加します。
クラスはstyle.cssで何も指定しないでOKです。(中身は空)
クラス指定をすることでBRタグは自動整形で消えにくくなります。

automatic_formatting_309b

automatic_formatting_310b

これは1つのPタグ内にBRタグで段落を作っているためです。

automatic_formatting_311c

②テキスト間に2行のスペースを作る場合

●ビジュアルモードの場合

ビジュアルモードだけでは2行の改行を作ることが出来ません。

●テキストモードの場合

クラス指定をしたBRタグを追加しましょう。
Pタグを分割する方法としない方法の2種類があります。

・Pタグを分ける場合

※Pタグを装飾しているCSSは前出のものを使っています。

automatic_formatting_312b

automatic_formatting_313c

automatic_formatting_314c

Pタグ内に空改行を入れるとPタグはその場所で分割されます。

・Pタグを分けない場合

Pタグを分けずに2行分のスペースを作る場合は、上記の方法から空改行を削除します。

automatic_formatting_315b

automatic_formatting_316b

automatic_formatting_317b

1つのPタグの中で2行の改行スペースが出来ます。

③テキスト間に3行のスペースを作る場合

●ビジュアルモードの場合

「Enter」を2回繰り返します。

automatic_formatting_318b

テキストモードで見てみるとこうなります。

automatic_formatting_320b

automatic_formatting_319c

automatic_formatting_321b

注意点①

上記のようにPタグ3つに分割されており、真ん中のPタグは半角スペースを挟んでいます。
このためPタグをCSSで装飾すると表示が乱れます。

automatic_formatting_322b

また文字に背景色をつけるとこうなります。

automatic_formatting_329b

この方法はPタグのCSSをカスタマイズしている時には使えません。
テキストモードで対応しましょう。

●テキストモードの場合

・Pタグを分ける場合

automatic_formatting_323b

もしくは、

automatic_formatting_324b

この2つめの方法でBRタグを1つにすると、自動整形で消されてしまうので注意してください。
2行のスペースを持った改行にはなりません。

automatic_formatting_325b

・Pタグを分けない場合

automatic_formatting_328b

もしくは

automatic_formatting_326c

automatic_formatting_327b

テキスト間のスペースをこれ以上に広げたい場合は③をベースにBRタグを増やしていくとよいでしょう。

まとめ

あらためてまとめてみると、ビジュアルモードでできることはかなり限られているようです。

特にPタグにCSSで装飾をした場合は、Pタグをどのように分割したいのかを考えながらテキストモードで対応する必要があります。
そのためにはPタグのCSSは記事テキストを流しこむ前に決めておかないといけませんね。

あとは作業をやりながらということで。


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

コメントをどうぞ

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

CAPTCHA