リストマークを画像に変更すると、後ろに続くテキストズレてしまうので、リストマーク用の画像を背景に設定する方法にしたいと思います。参考にさせていただいた記事はこちらです。
ブログ別！作成・カスタマイズ講座
変更前
【画像を用意する】
リストマーク用の画像を用意して、アップロードします。素材屋さんなどで配布されています。利用規約は良く読んでくださいね(^^ 私は今回、自作の物を使用したいと思います。もし気に入ったら使ってもらってもOKですよ(*^^)。 素材置き場にありますので自由に使ってください。
【スタイルシートを修正する】
スタイルシートの「/*右側関連*/」の下の「.menu・・・・・」の下に下記のスタイルを追記します。（スタイルシートの中のどこに記述しても構わないのですが、あとで修正するときに関係あるものごとにまとめておいたほうが見やすいと思うので・・・）
.menu ul{
padding: 0px 0px 0px 5px;
margin: 0px;
}
.menu li {
font-size: 12px;
font-family: Verdana, Arial, sans-serif;
background-image: url(画像のURL);
background-repeat: no-repeat;
list-style-type: none;
background-position: left 3px;
padding-left: 20px;
margin-top: 0px;
line-height: 150%;
text-align: left;
}
padding: 0px 0px 0px 5px;
margin: 0px;
}
.menu li {
font-size: 12px;
font-family: Verdana, Arial, sans-serif;
background-image: url(画像のURL);
background-repeat: no-repeat;
list-style-type: none;
background-position: left 3px;
padding-left: 20px;
margin-top: 0px;
line-height: 150%;
text-align: left;
}
