2004.03.13

横幅をちょこっとだけ

横幅をちょこっと広げて、ついでに%設定にしてみました。

#container {
         :
width: 90%;

       }


#center {
         :
width: 70%;

}

#right {

float: right;
         :
width: 30%;

       }

| | コメント (0) | トラックバック (0)

2004.01.17

タイトル欄の罫線

前回は、タイトル欄の背景色のみ変更しましたが、罫線もちょっといじってみました。

.content h3 {
~(略)~
border-top: 1px solid #336600; /* 上側は1pixの実線 */
border-left: 10px solid #336600; /* 左側は10pixの実線 */
border-bottom: 6px double #336600; /* 下側は6pixの2重線 */
border-right: 1px solid #336600; /* 右側は1pixの実線 */
~(略)~
}

【変更前のタイトル欄】
cocolog4.jpg

【変更後のタイトル欄】
cocolog5.jpg

ますますおかしなデザインになった気がしないではないが・・・

| | コメント (0) | トラックバック (0)

2004.01.12

引用文の書式変更

スタイルシートファイルの.content blockquoteについて、変更・追加して、引用した文の書式を変更しました。

.content blockquote {
color: #006633; /*文字の色*/
background:#ffffcc; /*背景色*/
margin:5px 40px 5px 40px; /*余白 上 右 下 左 */
font-size:small; /*文字の大きさ*/
font-weight:normal; /*文字の太さ*/
line-height:150%; /*行間*/
padding: 10px; /*テキストと罫線間の余白*/
border: 2px dotted #336600; /*罫線の太さ、種類(点線)、色*/
width: auto ; /*幅 自動調整*/
}

これで、blockquoteタグを使って引用文を書くことで、以下のようになりました。

【例】

blockquoteタグを使うと、このように、点線で囲まれた引用文として表示されるようになります。

| | コメント (1) | トラックバック (6)

まずは背景色の変更を(その2)

背景色の変更の続きです。
cocolog1b.jpg

④サイドエリアの背景色の変更
#right {
~(略)~
background-color: #FFFFFF; /* ここを変更 */
~(略)~
}

⑤日付やコメント、トラックバックなどのタイトル欄の背景色の変更
.content h2 {
color: #999933; /*文字の色はここを変更*/
background-color: #ffff66; /*背景色はこれを追加*/
~(略)~
}

⑥記事のタイトル欄の背景色の変更
.content h3 {
color: #006633; /*文字の色はここを変更*/
background-color: #99ff66; /*背景色はこれを追加*/
~(略)~
}

⑦カレンダーのタイトルの背景色の変更
#calendar caption {
color: #006633; /*文字の色はここを変更*/
background-color: #66ff66; /*背景色はこれを追加*/
~(略)~
}

⑧カレンダーの曜日欄の背景色の変更
#calendar th {
~(略)~
background-color: #ffff99; /*背景色はこれを追加*/
}

⑨カレンダーの背景色の変更
#calendar td {
~(略)~
background-color: #ffff99; /*背景色はこれを追加*/
}

⑩サイドエリアのタイトル欄の背景色の変更
.sidebar h2 {
color: #006633; /*文字の色はここを変更*/
background-color: #66ff66; /*背景色はこれを追加*/
~(略)~
}

以上で、とりあえず、こんなんなっちゃいました。
cocolog2.jpg

ちょっとさわりすぎたかな・・・・・・


| | コメント (1) | トラックバック (0)

まずは背景色の変更を(その1)

詞織さんのところの自作スタイルシートの適用を参考に、背景の色をあちこち変えてみました。

1.スタイルシート・ファイルの用意
2.スタイルシート・ファイルのアップロード
3.スタイルシート・ファイルの反映(サブタイトルの変更)
の方法については、上記詞織さんのところにお任せするとして、ここでは、スタイルシートのどこをさわれば、どこの色が変わるのかをメモしておきます。

cocolog1b.jpg

①ページの背景色の変更
body {
margin: 0px 0px 20px 0px;
background-color: #eeeeee; /*ここを変更*/
~(略)~
}

②ブログタイトル欄の背景色の変更
#banner {
font-family: Verdana, Arial, sans-serif;
color: #ffffff; /*文字の色はここを変更*/
background-color: #006633; /*背景色はここを変更*/
~(略)~
}

③センターエリアの背景色の変更
#center {
~(略)~
.content {
padding: 15px 15px 5px 15px;
background-color: #FFFF99; /*背景色はこれを追加*/
color: #666666; /*文字の色はここを変更*/
font-family: 'Trebuchet MS', Verdana, sans-serif;
font-size: small;
}

長くなりそうなので、続きは次回に。

| | コメント (1) | トラックバック (3)

2003.12.27

ココログデザイン改造計画

ココログは裏技を使えば、いろんなことができるらしい。
あっちこっちで紹介されとる。
という訳で、いろんなことを試してみよう。
でも、そのためには、ちょっとばっかし、CSSについて勉強せんといかんみたい。

ということで、今日のところは、決意表明だけ。。。。


| | コメント (0) | トラックバック (0)