Linuxからアホ話まで、何でもありでござる

2004年07月15日

Stylesheetの変更 その2

[MovableType]
Stylesheetの変更 その1では、ブログの名前、説明までの説明をしました。基本的な設定方法は、大体あんなもんです。

今回も引き続き書きとめておきます。前に説明したものは省略。
#content {
position:absolute;
background:#FFF;
margin-right:20px;
margin-left:225px;
margin-bottom:20px;
border:1px solid #FFF;
width: 70%;
}

Main Indexで出力する本文(カレンダーとかのカラム以外)の設定です。
・position 要素の配置方法を指定するものらしいです。よくわからん。static | relative | absolute | fixed | inheritってのがあるようです。
・margin-right:20px; margin-left:225px; margin-bottom:20px; 余白として右20px、左225px、下20pxを取っています。ここで左に大きく余白を取っているのは、カレンダーなどのカラムを表示させる為です。3カラムにしたい場合は、右側(margin-right)も適切に設定してやらなければいけません。
・border 本文部分全体を枠で囲みます。左右上下別々に設定してもOK。
・width ボックスの内容領域の幅を指定するものらしいです。<長さ> | <パーセンテージ> | auto | inheritと設定できるようですが、なんだかよくわからん。
#container {
background:#FFF;
border:1px solid #FFF;
}

Category Archive、Date-Based Archive、Individual Entry Archiveで出力される本文の設定です。
#links {
padding:15px;
border:1px solid #FFF;
width:200px;
}

linksの設定です。linkといっても、urlのLink先の設定じゃありません。ここではカレンダー表示のあるカラムの設定と考えていいでしょう。上から
・上下左右に15pxの余白をとって、
・1pxの線で囲み
・200pxの幅を持たせる
となっています。もし3カラムにしたい場合は、こんな感じに変更、追加します。
/* 左側 */
#links-left{
position: absolute;
left:0px;
top:80px;
width:180px;
border: 1px solid #FFF;
}

/* 右側 */
#links {
position: absolute;
right:0px;
top:80px;
width:180px;
border: 1px solid #FFF;
}
.blog {-略-}

エントリーの段落の設定です。
.blogbody {-略-}
.blogbody a,
.blogbody a:link,
.blogbody a:visited,
.blogbody a:active,
.blogbody a:hover {
font-weight: normal;
text-decoration: underline;
}

エントリー本文と、その中に出てくるリンク先の表示方法の設定です。
.title {-略-}

各エントリーのタイトルの設定です。
#menu {-略-}

これはですねぇ、《 2004年07月12日 | メイン | 2004年07月14日 》
って出てくるやつの設定です。
.date { -略-}
.posted { -略-}
.calendar {-略-}
.calendarhead { -略-}
.side {-略-}
.sidetitle {-略-}
.syndicate {-略-}

ふぅ、面倒だからはしょってしまいますた。上から順に、日付、投稿者、カレンダーの日付、カレンダーの年月、検索・コメント・エントリー・カテゴリ・リンクなどの中味、検索・コメント・エントリー・カテゴリ・リンクなどの見出し、RSS(XML) の設定です。

今日はここでおしまい。でも、疲れたんじゃないですから…残念!!_| ̄|○

ブログランキング・にほんブログ村へ
posted by oyajiman at 2004年07月15日 23:31:50



コメント

コメントはありません

トラックバック

トラックバック
このエントリにトラックバックはありません
このトラックバックURLを使ってこの記事にトラックバックを送ることができます。 もしあなたのブログがトラックバック送信に対応していない場合にはこちらのフォームからトラックバックを送信することができます。.

コメントする