ブログデザイン変更

ブログを立ち上げた当初からの念願だったデザイン変更をやっと行いました。
テーマは大自然です。大空の青と山の緑、そして大地の茶を使用しています。

このデザインを考えるにあたって、CSSの本を参考にしていろいろ勉強したんだけど、なかなかいいデザインが思いつかなくて、その本に出ていたcss Zen Gardenというサイトを見ていたらかなり気に入ったデザインを見つけました。
画像については全部作り直したんで見た目がかなり変わっているんですが、雰囲気的にはそこのデザインの真似だったりします（汗）
画像はVAIOにバンドルされていたPhotoshop Elements 2.0を使ってしこしことがんばって作りました。
背景の空に浮かんだ雲の画像はMuRa's フィルタ・マイスターの雲というフリーのプラグインで生成しました。(すばらしいプラグインを作ってくれたMuRaさんに感謝)
実は今のデザイン変更は第一段階でして、ほとんどMT3のCSS変更だけで実現しているものです。
実際には表示されるページのテンプレートにも手を加えてもっと細かい所のデザインを煮詰めていく予定です。
現在のStylesheet
<br /> BODY {<br /> color: #CCCCCC;<br /> background: #3366FF url('image/sky.jpg') repeat;<br /> margin: 0px;<br /> padding: 0px;<br /> font-size: small;<br /> font-family: "ＭＳ Ｐゴシック", "ヒラギノ丸ゴ Pro W4", "Osaka", Verdana, Arial, sans-serif;<br /> }<br /> H1 {<br /> padding-right: 0px;<br /> padding-left: 0px;<br /> font-weight: normal;<br /> padding-bottom: 0px;<br /> margin: 0px;<br /> padding-top: 0px<br /> }<br /> H2 {<br /> padding-right: 0px;<br /> padding-left: 0px;<br /> font-weight: normal;<br /> padding-bottom: 0px;<br /> margin: 0px;<br /> padding-top: 0px<br /> }<br /> H3 {<br /> padding-right: 0px;<br /> padding-left: 0px;<br /> font-weight: normal;<br /> padding-bottom: 0px;<br /> margin: 0px;<br /> padding-top: 0px<br /> }<br /> A {<br /> background: url('image/ul_green.gif') repeat-x 50% bottom;<br /> color: #33CC33;<br /> text-decoration: none;<br /> }<br /> A:hover {<br /> background-image: url('image/ul_anime_green.gif');<br /> }<br /> P {<br /> padding-right: 0px;<br /> padding-left: 0px;<br /> padding-bottom: 0px;<br /> margin: 0px;<br /> padding-top: 0px;<br /> }<br /> P SPAN {<br /> padding-right: 4em;<br /> display: block;<br /> padding-left: 4em;<br /> padding-bottom: 1em;<br /> padding-top: 0px<br /> }<br /> #container {<br /> margin-left: auto;<br /> margin-right: auto;<br /> width: 700px;<br /> text-align: left;<br /> }<br /> #banner H1 {<br /> font-size: 0px;<br /> padding-top: 0px;<br /> padding-bottom: 0px;<br /> padding-right: 0px;<br /> padding-left: 0px;<br /> height: 50px;<br /> background: url('image/logo.gif') no-repeat left bottom;<br /> position: relative;<br /> left: -23px;<br /> top: 19px;<br /> }<br /> #banner H1 A {<br /> visibility: hidden;<br /> }<br /> #banner H2 {<br /> font-size: small;<br /> font-weight: bold;<br /> display: block;<br /> color: #003366;<br /> background: #33CC33 url('image/green_slash.gif');<br /> padding-top: 25px;<br /> padding-bottom: 12px;<br /> padding-left: 28px;<br /> padding-right: 300px;<br /> height: 50px;<br /> }<br /> #center {<br /> float: left;<br /> overflow: hidden;<br /> width: 500px;<br /> }<br /> .content {<br /> background: #003366 url('image/skydark.jpg');<br /> padding-right: 15px;<br /> padding-left: 15px;<br /> font-size: x-small;<br /> padding-bottom: 5px;<br /> padding-top: 15px;<br /> }<br /> .content H2 {<br /> font-weight: bold;<br /> font-size: x-small;<br /> margin-bottom: 10px;<br /> text-align: left;<br /> }<br /> .content H3 {<br /> font-weight: bold;<br /> font-size: small;<br /> margin-bottom: 10px;<br /> text-align: left<br /> }<br /> .content P {<br /> font-weight: normal;<br /> font-size: x-small;<br /> margin-bottom: 10px;<br /> line-height: 150%;<br /> text-align: left;<br /> }<br /> .content BLOCKQUOTE {<br /> line-height: 150%;<br /> }<br /> .content LI {<br /> line-height: 150%;<br /> }<br /> .content P.posted {<br /> padding-right: 3px;<br /> border-top: #999999 1px solid;<br /> padding-left: 3px;<br /> font-size: x-small;<br /> margin-bottom: 25px;<br /> padding-bottom: 3px;<br /> line-height: normal;<br /> padding-top: 3px;<br /> text-align: left;<br /> }<br /> #right {<br /> padding-right: 0px;<br /> padding-left: 0px;<br /> background: #333300 url('image/skybrown.jpg');<br /> padding-bottom: 0px;<br /> padding-top: 0px;<br /> float: left;<br /> overflow: hidden;<br /> width: 200px;<br /> }<br /> .sidebar {<br /> padding-right: 15px;<br /> padding-left: 15px;<br /> padding-bottom: 15px;<br /> padding-top: 15px;<br /> }<br /> #calendar {<br /> padding-right: 2px;<br /> padding-left: 2px;<br /> font-size: x-small;<br /> margin-bottom: 30px;<br /> padding-bottom: 2px;<br /> line-height: 140%;<br /> padding-top: 2px;<br /> text-align: center;<br /> }<br /> #calendar TABLE {<br /> border-top-width: 0px;<br /> padding-right: 2px;<br /> padding-left: 2px;<br /> border-left-width: 0px;<br /> border-bottom-width: 0px;<br /> padding-bottom: 2px;<br /> width: 100%;<br /> padding-top: 2px;<br /> border-collapse: collapse;<br /> border-right-width: 0px;<br /> }<br /> #calendar CAPTION {<br /> font-weight: bold;<br /> font-size: x-small;<br /> text-transform: uppercase;<br /> letter-spacing: 0.3em;<br /> text-align: center;<br /> }<br /> #calendar TH {<br /> font-weight: normal;<br /> text-align: center;<br /> }<br /> #calendar TD {<br /> text-align: center;<br /> }<br /> .sidebar H2 {<br /> font-weight: bold;<br /> font-size: x-small;<br /> text-transform: uppercase;<br /> letter-spacing: 0.3em;<br /> text-align: center;<br /> }<br /> .sidebar UL {<br /> padding-left: 0px;<br /> margin: 0px 0px 30px;<br /> }<br /> .sidebar LI {<br /> margin-top: 10px;<br /> font-size: x-small;<br /> line-height: 150%;<br /> list-style-type: none;<br /> text-align: left;<br /> }<br /> .sidebar IMG {<br /> border-right: #999999 1px solid;<br /> border-top: #999999 1px solid;<br /> border-left: #999999 1px solid;<br /> border-bottom: #999999 1px solid;<br /> }<br /> .photo {<br /> margin-bottom: 20px;<br /> text-align: left;<br /> }<br /> .link-note {<br /> padding-right: 2px;<br /> padding-left: 2px;<br /> font-size: x-small;<br /> margin-bottom: 15px;<br /> padding-bottom: 2px;<br /> line-height: 150%;<br /> padding-top: 2px;<br /> text-align: left;<br /> }<br /> #powered {<br /> margin-top: 50px;<br /> font-size: x-small;<br /> line-height: 150%;<br /> text-align: left;<br /> }<br /> #comment-data {<br /> border-right: #BBBBBB 1px dotted;<br /> padding-right: 15px;<br /> float: left;<br /> width: 180px;<br /> margin-right: 15px;<br /> text-align: left;<br /> }<br /> UNKNOWN {<br /> width: 80%;<br /> }<br /> #moblog {<br /> padding-right: 2px;<br /> padding-left: 2px;<br /> font-size: x-small;<br /> margin-bottom: 30px;<br /> padding-bottom: 2px;<br /> line-height: 140%;<br /> padding-top: 2px;<br /> }<br /> #moblog .title {<br /> text-align: center;<br /> }<br /> #moblog .caption {<br /> display: none;<br /> }<br /> #moblog .photo {<br /> margin-bottom: 0px;<br /> text-align: center;<br /> }<br /> #moblog .date {<br /> text-align: center;<br /> }<br /> INPUT {<br /> font-size: x-small;<br /> margin: 2px;<br /> }<br /> TEXTAREA {<br /> font-size: x-small;<br /> margin: 2px;<br /> font-family: "ＭＳ ゴシック", "Osaka", "ヒラギノ角ゴ Pro W3", sans-serif;<br /> border: #999999 1px solid;<br /> }<br /> #counter {<br /> margin-top: 30px;<br /> font-size: x-small;<br /> line-height: 150%;<br /> text-align: left;<br /> }<br /> #counter IMG {<br /> border-top-style: none;<br /> border-right-style: none;<br /> border-left-style: none;<br /> border-bottom-style: none;<br /> }<br /> .paginate {<br /> margin-bottom: 10px;<br /> line-height: 150%;<br /> }<br />