リストの左側に画像を貼る方法についての覚書です。

画像を記事に貼る方法

一番原始的な方法かと思います。

【作成例】

ここに文字が入ります。

<img style="background-image: none; padding-left: 0; padding-right: 0; display: inline; vertical-align: middle; padding-top: 0; border-width: 0; margin: 1px 3px 1px 0;" title="jugem13" src="http://comemo508.files.wordpress.com/2011/05/jugem13.jpg" alt="jugem13" width="40" height="34" border="0" />ここに文字が入ります。

画像と文字の高さを揃えるには、画像の方に「vertical-align:middle;」という命令を入れておけばいいようです。うまくいかない場合は、さらに「display: inline;」を追加すればいいようです。

Windows Live Writer のプラグイン「Insert a Bullet」を使う方法

箇条書きの装飾には、Windows Live Writerのプラグイン「Insert a Bullet」を使うと便利です。

【作成例】
箇条書き
箇条書き
箇条書き

あらかじめ準備されている画像を使ってもいいですし、

自分で画像を登録することもできます。

リストのCSSを使う方法

「list-style-image」というCSSを使うと左側に画像を入れることができます。

【作成例】

• 箇条書き
• 箇条書き

<ul style="line-height:15px;list-style-image:url('http://comemo508.files.wordpress.com/2011/04/path37831.png');">
	<li style="margin:10px 50px;">箇条書き</li>
	<li style="margin:10px 50px;">箇条書き</li>
</ul>

カスタムCSSを使用すると、記事中のHTMLの記述を以下のように簡略化することができます。

<ul class="blue-arrow">
	<li>箇条書き</li>
	<li>箇条書き</li>
</ul>