【WordPress】コードが大文字で表示される解決方法

『【WordPress】コードが大文字で表示される解決方法』をはてなブックマーク この記事をクリップ! この記事をTwitterでつぶやく

クォーテーション例としてエントリー内にHTMLとかのコードを書く事がありますが、いざブラウザ上で見たら 『’』 (シングルクォーテーション)や 『”』 (ダブルクォーテーション)が大文字になってしまう。
『 ' 』 → 『 ’ 』 、『 " 』 → 『 ” 』
それをそのままHTML内のコードにコピーしようものなら、エラーが出る事間違いなし。


ちゃんと表示される時もあるし、されない時もある。
どーいった仕組みでなってるか分かりませんが、ちゃんと表示されない事を前提にした場合、これはまずいって事で調べてみました。

WordPressにはエントリーを書く所に 『CODE』 のボタンがあるのでそれだけを使用しがちですが、一般的には 『PRE』 タグも使わないといけないみたい。
使用例 (&は大文字で表示しています)

<pre><code>&lt;div id="wrapper"&gt;~~~&lt;/div&gt;</code></pre>
ブラウザ表示
<div id="wrapper">~~~</div>

『PRE』 タグを使うと、文字数が多い場合スクロールバーが出てしまいますので、これをスクロールバーを出さずに改行させたい。
これを行うには、CSSで一工夫すれば良いようです。
pre {
  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

しかし、コードの存在は知ってたものの、実際使うのは初めてだよ・・・。(^^;


jmblog.jp
ソースコードを表示させるのに使うべきHTMLタグは?

コメントを書く

Name

E-Mail

Website address