MovableTypeサイドバーのCSS備忘録ブームラボ

MovableTypeサイドバーこのブログのデザインを変えたいんですが、どうやらMovableTypeデフォルトのCSSは重複部分があったりして自分が作ったわけではないので扱いづらいです、私個人的な備忘録になりますがサイドバーのcssをまとめてみます。

背景に画像を利用したりリストのul要素li要素の先頭マークも変更可能です、もちろん余白や枠線といったものも変更可能です。簡単ですがまとめてみます。

デフォルトサイドバーのまとめ

緑…alpha

.layout-three-column #alpha {
margin: 0;
width: 180px;
background: #e6ecf2;
}

緑…alpha-inner

.layout-three-column #alpha-inner {
padding: 10px 10px 0 10px;
border-width: 2px 0 2px 2px;
border-style: solid;
border-color: #fff;
}

青…module-header

.module-header,
.trackbacks-header,
.comments-header,
.comments-open-header,
.archive-header {
/* ie win (5, 5.5, 6) bugfix */
p\osition: relative;
width: 100%;
w\idth: auto;

margin: 0;
border-left: 5px solid #36414d;
padding: 5px;
color: #fff;
background: #a3b8cc;
font-size: 11px;
font-weight: bold;
line-height: 1;
text-transform: uppercase;
}

赤…module-content

.module-content {
margin: 0 0 10px 0;
border-top: 1px solid #cfd4d9;
padding: 10px 10px 0 10px;
font-size: 10px;
line-height: 1.2;
}

黄…module-list

.module-list {
margin: 0 15px 10px 15px;
list-style: disc;
}

桃…module-list-item

.module-list .module-list {
margin: 5px 0 0 0;
padding-left: 15px;
list-style: circle;
}

module-list内のですがlist-style部分はdisc　circle　square　noneなどが利用可能、list-style-image: url(img/○○○.gif); といった感じで画像を使うこともできます。また背景の画像はbackground-image: url(img/○○○.gif);で画像が使用可能になります、やり方次第でカスタマイズは無限のMovableTypeですが問題は私自身にデザインのセンスがないということだけです…。

MovableTypeサイドバーのCSS備忘録

MovableTypeの情報、インターネットのお気に入りの情報をブログで紹介しています！

MovableTypeサイドバーのCSS備忘録