« TRICK | メイン | ウェブログの更新通知 »
2005年01月11日
Movable Typeのカスタマイズ(9)
-タイトルの装飾-
さて、９回目である。引き続き参考にしたのは、「即実践！ブログ徹底カスタマイズ術」(技術評論社)である。
今回は、メインページのエントリーのタイトルと両サイドの見出しをカッコよくする。スタイルシートのみの変更でよさそうだ。
○両サイド
変更前
.sidebar h2 {
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: small;
text-align: center;
font-weight: bold;
text-transform: uppercase;
letter-spacing: .3em;
}
変更後
.sidebar h2 {
color: #FFFFFF;
font-family: Verdana, Arial, sans-serif;
font-size: small;
text-align: center;
font-weight: bold;
text-transform: uppercase;
letter-spacing: .3em;
background-color: #000000;
}
バックカラーを黒色に、フォントを白色に変更する。
○エントリー
変更前
#center h1 {
font-size: x-large;
}
変更後
#center h1 {
font-size: large;
border-width: 5px;
border-color: #E7AA5C;
border-top-style: hidden;
border-right-style: hidden;
border-left-style: solid;
border-bottom-style: solid;
padding: 5px;
}
エントリーのタイトルは少し凝ってみる。フォントサイズを少し小さくする。タイトルの周りを線で囲み、左と下のみ表示する。枠線とタイトル文字の間を5px空ける。
これまでのカスタマイズで最初と比べかなり違う外見となってきた。しかしまだまだ続く・・・予定。
投稿者 Tadashi : 2005年01月11日 00:10
トラックバック
このエントリーのトラックバックURL:
http://www.free-style.biz/mt/mt-tb.cgi/41