トマトジュース色に染めたい...

Google Bloggerって、テンプレートの種類が少なくて寂しいので、わたし好みの色に染めてみました～
スタイルを変更するとカスタムCSSが消えちゃうので、ここに書いておきます。

スタイル編集にはFirefoxやChromeがお勧め。
FirefoxのFirebug拡張はとっても便利ですが、プロでもない私にはちょっと重すぎるので、最近はChrome + Stylish愛用しています。
css3やhtml5標準に対応してないIE(Internet Explorer)は論外。きゃー、IE9が、影や角丸、グラデーション対応してない～

[CSSを追加]
body { padding:0 4px 4px 4px }
.content-outer, .content-fauxcolumn-outer, .region-inner {
  max-width:none !important; }

.main-inner {
  padding-top: 10px }
.main-inner .column-center-inner {
  padding: 0; }
.main-inner .column-center-inner .section {
  margin: 0 0 0 15px;
}

.section { margin: 0 0 0 10px; }
.widget { line-height:1.2; margin: 0 0 10px 0; }
blockquote {
  border: 1px dotted #f66;
  margin: 10px 0 10px 20px; padding:2px 4px;
  white-space: nowrap; font-family: monospace;
  overflow: hidden; text-overflow: ellipsis;
}
.titlewrapper {
  padding:8px 15px 0 !important; }
.header-inner .Header .descriptionwrapper {
  padding: 0 15px 4px; margin: 0;
}
.Header .description {
  margin: 0; font-size: 50%;
}

.header-outer {
  margin: -4px -4px 0 -4px;
  border-radius:8px;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.8);
  background: #e60004 url() !important;
  background: -ms-linear-gradient(top, #FF6666 0%, #E60004 10%, #E60004 90%, #AA0000 100%), #e60004 url();
  background: -moz-linear-gradient(top, #FF6666 0%, #E60004 10%, #E60004 90%, #AA0000 100%), #e60004 url();
  background: -webkit-linear-gradient(top, #FF6666 0%, #E60004 10%,
#E60004 90%, #AA0000 100%), #e60004 url();
  background: linear-gradient(to bottom, #FF6666 0%, #E60004 10%, #E60004 90%, #AA0000 100%), #e60004 url();
  background-clip: padding-box;
}
.Header h1 { margin-bottom: 0; font-size: 24px;}

h2.date-header { margin-bottom: 4px; }
h3.post-title { margin-top: 4px; font-weight:bold;
  text-shadow: 0 0 1px #fff,
    2px 2px 4px rgba(0, 20, 0, 0.6);
  margin: 0 5px 0 -15px;
  padding: 2px 8px;
  background: -ms-linear-gradient(top, rgba(230,0,4,0.1) 0%, rgba(230,0,4,0.3) 100%);
  background: -moz-linear-gradient(top, rgba(230,0,4,0.1) 0%, rgba(230,0,4,0.3) 100%);
  background: -webkit-linear-gradient(top, rgba(230,0,4,0.1) 0%, rgba(230,0,4,0.3) 100%);
  background: linear-gradient(to bottom, rgba(230,0,4,0.1) 0%, rgba(230,0,4,0.3) 100%);
  border-radius:8px;
}

.post-body { line-height:1.2 !important }
.main-inner .column-right-inner {
  padding: 0 2px; }

.footer-inner { padding:0 }
.post-footer {
  margin:0 !important;
}

IE9で角丸や影が使えないのは、BloggerのテンプレートがIE7用であるためでした。
グラデーションは表示できないのね。

[テンプレート > HTMLの編集]
- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
+ <meta content='IE=9' http-equiv='X-UA-Compatible'/>

テンプレートを修正して対応。スマホ対応も必要ですねぇ。