スポンサーリンク

「改行について」(wordpress記事作成)

記事作成時の、改行について、1.「<br>」、2.「 &nbsp;」、3.「pタグを用いて、CSSで左寄せ」を考えてみました。

結論から言いますと、 「<br>」は使いません。段落毎に「pタグを用いて、CSSで左寄せ等」を使い、それ以外の多少レイアウトが崩れてもかまわない場合は、「 &nbsp;」で行う事にしました。

<br>、<br />について

HTMLコーディングで、改行コードの、<br>、<br /> の違いは何か?

  • <br>は、XHTML
  • <br />は、XHTML の書式となります。
  • <br />は、XHTMLで書かれたページに使い、XHTMLの書式では、「開始タグ→必ずタグで閉じる」というルールがあり、<br>には終了タグがないので、<br />と表記するようです。(他にも同様に、<img /><hr /><link />など)
  • XHTMLでは終了タグを必ず記述し、さらに、/> の前にはひとつスペースを設けることが推奨されています。(XHTML に対応していない古いブラウザとの互換性を考慮するため。)
  • <br>は、WordPressのバージョンによっては反映されない事もあるので、次第に使われなくなっています。

&nbsp;について

  • 「 &nbsp;」は、本来は「no-break space 」の略で、「改行されない空白文字」という意味をもつそうです。
  • htmlタグで「 &nbsp;」を挿入することにより、2行以上改行することが可能です。
  • 字下げなどにも使用されるようですが、解釈しないブラウザが有るようで、意図しない表示となることがあります。

<p align="left"> 、pタグとCSSで行う

  • 段落毎にpタグを用いて、CSSで左寄せを指定することにしました。
  • <p align="left"></p>

 

マークアップ記号を実態参照文字に置き換える

「 &nbsp;」が出てきたので、実体参照文字について合わせて述べておきたいと思います。

HTMLソースコードの編集方法を説明する時など、HTMLタグをそのまま表示したいことがありますが、そのまま記述すると、HTMLタグ機能が優先し、ソースタグが表示されません。 そのままブラウザに表示させるには、< >実体参照文字で記述する必要があります。

TinyMCE Advancedの機能で、実態参照文字に変換する方法

  • WordPressのエディタ拡張プラグインである「TinyMCE Advanced」を使えば、ソースコードを表示するボタンを追加できます。
  • 追加する方法は、設定/TinyMCE Advanceddeで、設定画面に進み、ソースコード(太字の方)をメニューバーにドラッグアンドドロップします。
  • 追加したソースコードボタンをクリックして、<>を入力すれば、自動で、「&lt;  &gt;」と変換してくれます。

主な実態参照文字

  • <  →  &lt;
  • >  →  &gt;
  • &  →  &amp;
  •   →  &quot;
  •   →  &apos;
  • 半角スペース  →  &nbsp;
スポンサーリンク
おすすめの記事