3-10：背景画像を利用する: 「Movable Type WEBデザインの新しいルール」

手順1

/* カラム切り替え */
body.layout-three-column,
body.layout-two-column-left,
body.layout-two-column-right,
body.layout-one-column {
background: url(images/back.bmp);
    text-align: center;
}

手順2（変更後）

/* ヘッダ */
#header {
    border-bottom: 1px solid #669;
    height: 120px;
    background: url(images/logo.png) no-repeat;
    text-indent: -9999px;
    outline-width: 0;
}

手順3

/* ブログ記事タイトル */
.entry-header {
    margin: 0px 3px 5px;
    padding: 8px 8px 5px 35px;
    border: 1px solid #ccc;
    background: #eee url(images/entrytitle.gif) no-repeat
    8px 0.35em;
    font-size: 125%;
    font-weight: bold;
}

手順4

/* サイドメニュータイトル */
.sidetitle {
    margin-top: 3px;
    border: 1px solid #cfe6c5;
    height: 26px;
    color: #333;
    background: url(images/titleback.gif) repeat-x;
    text-align: center;
    font-size: 75%;
    line-height: 2.1;
}

手順5（変更後）

.side ul {
    padding-left: 0;
}
.side ol {
    padding-left: 16px;
}
.side ul li {
    padding-left: 18px;
    list-style-type: none;
    background: url(images/arrow.png) no-repeat 1px
    0.25em;
}
 
.side #categories ul {
    padding-left: 0;
}
 
.side #categories li {
    list-style-type: none;
}

手順6（変更後）

.side li li {
    list-style-type: none;
    padding-left: 0;
    background: none;
}

手順7

.side #categories li {
    list-style-type: none;
}
ul#tags li,
    .side #categories ul li li {
    padding-left: 0;
    list-style-type: circle;
    background: none;
}