CSSでUlやLIを指定をすると通常以下のようなリストのアイコンになってしまう.(文章の内容は関係ありません. http://www.thothchildren.com/chapter/5b5465ce103f2f31687150af より)

これだとちょっとダサいので、これを以下みたいに変更する.(これは最終形)

list-style-imageを変更する(ただし位置ずれ)

これを行うにはliに「list-style-image」を変更すれば良い.でもただ変えただけだと位置が微妙なことがある….

かえるとこんな感じ

 

(https://stackoverflow.com/questions/21427199/list-vertical-align-text-middle-with-list-style-image とか参考)

位置ずれを直すには

調べたところlist-style-imageでは位置ずれの調整はできない模様.

なので、liの背景画像として設置した上でその背景画像を左にずらすということを行う.

このようにすると始めに書いた形になる.

Inspectorで見てみると以下のようになる.