横幅をちょこっとだけ

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

#container {
　　　　　　　　　：
width: 90%;
：
　　　　　　　｝

#center {
　　　　　　　　　：
width: 70%;
：
}

#right {
：
float: right;
　　　　　　　　 ：
width: 30%;
：
　　　　　　　}

タイトル欄の罫線

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

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

【変更前のタイトル欄】

【変更後のタイトル欄】

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

引用文の書式変更

スタイルシートファイルの.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タグを使うと、このように、点線で囲まれた引用文として表示されるようになります。

まずは背景色の変更を（その２）

背景色の変更の続きです。

④サイドエリアの背景色の変更
#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;　/*背景色はこれを追加*/
～（略）～
}

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

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

まずは背景色の変更を（その１）

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

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

①ページの背景色の変更
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;
}

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

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

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

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