WordPress.comにソースコードを貼る方法

WordPress.comにHTMLやCSSなどのソースコードを貼る方法についての覚書です。

<table border=0 cellpadding=0 cellspacing=0 align=center width=100%>
<tr>
<td colspan=2 valign=top width=100%>
<div id=top>
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td>
<div class=header><$header$></div>
</td>
</tr>
</table>
<div class=url><$blogurl$></div>
<div class=usermenu><$adminmenu type=1$></div>
</div>
</td>
</tr>
</table>

ソースコードを貼るには、ショートコード[code]を使うと便利です。

詳細については、以下のページに記載があります。

Posting Source Code « Support — WordPress.com

例えば、HTMLの場合、HTMLモードで以下のように記述すると、

[sourcecode language="html"]
<table border=0 cellpadding=0 cellspacing=0 align=center width=100%>
<tr>
<td colspan=2 valign=top width=100%>
<div id=top>
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td>
<div class=header><$header$></div>
</td>
</tr>
</table>
<div class=url><$blogurl$></div>
<div class=usermenu><$adminmenu type=1$></div>
</div>
</td>
</tr>
</table>[/sourcecode]

ブログ上では以下のように表示されます。

<table border=0 cellpadding=0 cellspacing=0 align=center width=100%>
<tr>
<td colspan=2 valign=top width=100%>
<div id=top>
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td>
<div class=header><$header$></div>
</td>
</tr>
</table>
<div class=url><$blogurl$></div>
<div class=usermenu><$adminmenu type=1$></div>
</div>
</td>
</tr>
</table>

CSSではこんな感じ。

body {
background: #fff;
margin: 0px;
padding: 0px;
}
body,td,div,li {
font-size: small;
font-family: verdana,arial,sans-serif;
line-height: 150%;
color: #444;
word-break: break-all;
}
#button {
font-weight: bold;
border: 2px solid #fff;
}

なお、正規の方法なのかどうかわかりませんが、私自身は以下のような省略表記を使っていますが、特に不具合を感じたことはありません。

[code lang="css"]
[/code]

なお、WordPress.comからWindows Live Writer へソースコードを含む記事を読み込むとソースコードの記述が崩れてしまいますので、原則として、ソースコードを含む記事をWindows Live Writer で再編集するのはやめた方がいいと思います。

ちなみにCSSの場合、大文字にすると、CSSプロパティに色がつかなくなります。

BODY {
BACKGROUND: #FFF;
MARGIN: 0PX;
PADDING: 0PX;
}
BODY,TD,DIV,LI {
FONT-SIZE: SMALL;
FONT-FAMILY: VERDANA,ARIAL,SANS-SERIF;
LINE-HEIGHT: 150%;
COLOR: #444;
WORD-BREAK: BREAK-ALL;
}
#BUTTON {
FONT-WEIGHT: BOLD;
BORDER: 2PX SOLID #FFF;
}