top

「改行を変換」で<pre>を使うコツ

小技ですが…。
最近、MTタグのサンプルなどを囲むHTMLタグを<blockquote>から<pre>に変更しています。なんでこれまで<blockquote>を使ってきたのかというと、MTを使い始めた頃、管理画面に付いてるボタンが<blockquote>だったので、そのまま習慣で何となく使い続けてきてしまった、ただそれだけです(汗)。けど、自分で<pre>ボタンを追加できたので、<blockquote>よりはまだ<pre>の方がよかろうということで、少しずつ修正中です。

ここから本題。私はふだん記事書きには「改行を変換」を使っています。<pre>は空白も一緒にコードをそのままの形で表示してくれるので便利なんですが、「改行を変換」にはちょっと癖がありまして、時に<pre>内で変な変換をされることがあります。例えば以下のサンプルの場合。これを<pre>で囲むと…。

.layout-twt #alpha {
    left: 190px;
    width: 560px;
}

.layout-twt #beta {
    left: -560px;
    width: 190px;
}

こんなふうに表示されちゃいます。↓ 途中から間延びしてるんですが…。

080818.gif

ソースを見てみると、こんな感じになっています。

<pre>.layout-twt #alpha {
    left: 190px;
    width: 560px;
}

<p>.layout-twt #beta {<br />
    left: -560px;<br />
    width: 190px;<br />
}</pre></p>

途中まではいいのですが、真ん中の空行のせいで「以下は段落」とみなされるのか、<pre>の中に<p>が割り込んできて<br />まで勝手に入った上にタグの閉じ方もおかしい(^^;。これを正しく<pre>内には余計な<p><br />を入れさせないにはどうしたらいいか。答えは実は意外と簡単です。

080818_2.gif

空行になっている部分(青丸部分)に半角空白を1つだけ入れておきます。

これだけでMTくんは空行とは見なさず、文字が続いていると解釈してくれるので、最後まで<pre>内には余計なものは入らずに済みます。

以下が「改行を変換」で正しく出力された<pre>です。

.layout-twt #alpha {
    left: 190px;
    width: 560px;
}
 
.layout-twt #beta {
    left: -560px;
    width: 190px;
}

空行部分に半角空白が入っていても、見た目にもコードにも何も問題はないですから、これで一件落着。


■おまけ:「改行を変換」のHTMLタグの挙動について
「改行を変換する」は改行は<br />、空行を目安に段落は<p>に自動変換してくれる便利なフォーマットです。MTが出来た頃からある最もスタンダードなフォーマットだと思います。ところで、「改行を変換」でも意図的に<p>を入れるなどしてHTMLタグを使うことが出来ます。その場合、「改行を変換」特有の動きについて知っておくと使いやすくなります。

●ブロックタグ内では自動変換は機能しなくなる
基本的にブロックタグ(<p>、<div>、<blockquote>など)内は「なし」フォーマットを選んだ時と同じ状態になります。MTの自動変換が働かなくなるので、好きなタグで自由に制御することが出来るようになります。例えば、<textarea>を<p>で囲むことによって<textarea>内に<br />を出させなくする、というふうに使うことが出来ます。

●ブロックタグ内では空行は作らないように注意。
気を付けたいのがここ。空行があると、そこで段落と見なされ、自動変換機能が働きだすので、<pre>タグの例のように空行以降がおかしなことになってしまいます。
*どうしても空行を作りたい時は、<pre>のように半角空白で埋めて空行状態ではなくなるようにします。

●ブロックタグと文字の間には空行を入れる。
ブロックタグの周囲の挙動。以下のように文字がブロックタグとくっついていると、ブロックタグを含む全体が段落と見なされて<p>で囲われてしまいます。

悪い例(あああ~ううう までが<p>で囲まれるので、<p>の中に<div>が入ってしまう)

あああ
<div><p>いいい</p>
<p>いいい</p></div>
ううう
→出力ソース→ <p>あああ<br />
<div><p>いいい</p><br />
<p>いいい</p></div><br />
ううう</p>

いい例(正しく変換される)

あああ

<div><p>いいい</p>
<p>いいい</p></div>

ううう
→出力ソース→ <p>あああ</p>

<div><p>いいい</p>
<p>いいい</p></div>

<p>ううう</p>

コツが分かれば「改行を変換」でも問題なくHTMLタグを使うことが出来ます。

 

トラックバックURL

トラックバックされる際にはこの記事へのリンクをお願い致します

コメントを投稿

 


 <注意>
 ご利用のブラウザ、設定ではコメントのプレビューおよび投稿はご利用になれません。
 コメント投稿の際はお手数ですがjavascriptをオンにして下さい。
 *javascriptオフのまま投稿ボタンを押すと送信内容が消えますのでご注意下さい。