【WordPress】ページの一部分だけ<br>を無効に
WordPressの便利な機能の一つの文章整形。
一々<p>要素や<br>要素を入れずとも投稿編集ページで改行を入れておけば自動的に改行タグを入れてくれるナイスガイ。
ただ、中々臨機応変には行かず、ここは改行いらないの……。なんてことがありますよね。特にページ内にタグを使うときとか。
そんな訳で、自動文章整形機能は残したまま、一部分だけ<br>による改行を無効にしたいって場合の対処方法を忘れないように書いておきます。
そもそも<br>要素が入らないようにする
要は投稿時に改行が必要ない場所では改行を入れなければいい。それだけのこと。って思うじゃないですか。
文章オンリーなら大体これで事なきを得るのですが、私は思いっきり躓いたわけでして。
多数の要素を横並びにする為にCSSでfloat:left;を入れていたのですが、<br>先輩が全力で邪魔してきたわけです。
記入したタグ間の改行を全て消してもソースを覗き込んだら何故か意味不明な場所に<br>先輩がいらして私は考えるのを放棄した。
どうにか<br>が勝手に入らないようにできないものかとググってみましたが、PHPを弄って全てのページで自動文章整形をしない、あるいは固定ページのみしないといった方法しかなく、全ページ自動整形に頼っていた私としてはこれでは困るわけです。
と、言う訳で別の方法を見つけます。
CSSを使って<br>要素を無効にする。
<br>が消せないのなら<br>が機能しないようにする方法はないか。そんな発想の転換。
そしてググったら割と簡単に出会えました。
[code language=”css” title=”CSS” highlight=””]
br { display:none; }
[/code]
その手があったか。と感動しました。
<br>にCSSを適用することが今までなかったのでこの発想は出なかった……！
軽く解説
display:none; と書くと、その要素を表示しないようにできます。
ソース上は存在するけれど、ブラウザで見たときには一切見えない状態にできるわけですね。
つまり<br>はついてしまっているが、改行はされない。ってことができます。ヤッタネ！
使い方
CSSファイルに br { display:none; } と書いてしまったら全部の<br>が機能しなくなってしまうので限定させて使うようにしましょう。
ページの一部分のみ<br>を無効化したいといったケースがよく発生するのであれば、classで指定しておくのがいいでしょうね。
[code language=”html” title=”HTML” highlight=”1″]
<div class="no_br">
このdiv要素の中なら<br>
どれだけ編集ページでは改行しても<br>
実際のページでは改行されない！！
</div>
[/code]
[code language=”css” title=”CSS” highlight=””]
.no_br br { display:none; }
[/code]
と、<div>要素か適当な要素に予め決めておいたclassを指定し、CSSの方でそのclass内の<br>はdisplay:none;といった風に設定すればOK。
ついでに、<p>の改行はCSSで無効にできないか
私は<br>でしか困ってませんでしたが、<p>の改行を無効にしたい人もいるかもしれないので一応書いてみます。
<p>要素は上記の<br>と同じCSSにしちゃうと困ったことになります。文章も一緒に消えてしまうんです。
<br>は空要素ですが、<p>は <p>文章</p> といった形に、文章を内包してますからね。
じゃあ、<p>はどうやって改行させないようにするかというと、これで解決します。
[code language=”css” title=”CSS” highlight=””]
p { display:inline; }
[/code]
軽く解説
そもそも、何故<p>要素は改行されるのかというと、<p>要素はブロック要素だからです。
ブロック要素は上下が自動的に改行されます。この仕様があるから余計に思える改行とかが出てきちゃうわけですね。
ブロック要素はCSSがデフォルトで display:block; になっている要素なんです。これをインライン要素へと変えてやるのが上記の display:inline; ってわけです。
インライン要素は上下に改行をさせません。文字を太字にする<b>とか斜体にする<i>とかもインライン要素です。これらは使っても改行されませんよね。<p>要素もCSSで無理やりこれらと同じ扱いにすることで改行を防ごうって魂胆です。
使い方
<br>と一緒です。divにclass指定して使うのが一番楽じゃないかなと。
[code language=”html” title=”HTML” highlight=”1″]
<div class="no_p">
<p>このdiv要素の中なら</p>
<p>どれだけ編集ページでは改行しても</p>
<p>実際のページでは改行されない！！</p>
</div>
[/code]
[code language=”css” title=”CSS” highlight=””]
.no_p p { display:inline; }
[/code]