2009年6月9日

Bloggerテンプレートへの修正

ベーステンプレート = Snapshot: Madder
    変更点
  • 日本語フォントを指定
  • リンク要素の視認性を改善
  • <PRE>要素を定義
  • titleのフォントを手直し、lowercase指定を除去
  • 大きすぎるサイドバーを修正、全体の幅を少し大きめに

変更部分抜粋

< Variable name="bodyfont" description="Text Font"
        type="font"
        default="normal normal 100% Helvetica, Arial, sans-serif" 
        value="normal normal 96%  Meiryo, 'メイリオ', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', MS Pゴシック', Helvetica, Arial, sans-serif "> /* MARK Japanese font-style fix */

 /* a要素はすべてコメントアウトして変更*/
a { text-decoration: underline; }
a:link { color: #003366; }
a:visited { color: #003366; }
a:hover { color: #c30; }
a:active { color: #c30; } /* MARK same as nararad */

pre { 
  color: #00008b;
  font-family: "lucida typewriter", lucidatypewriter, monospace;
  font-size: 90%; 
  margin-left: 24px;
} /* MARK same as python document */

.title {
  font-family: 'Lucida Calligraphy', Georgia, monospace;
} /* MARK */
.description {
  font-family:  Georgia, monospace;
} /* MARK */

h1 {
  margin: 0;
  color: $pagetitlecolor;
  font-size: 1.5em;
  /* text-transform: lowercase; */ /* MARK */
}

/* 以下サイズ変更部分のみ */
#outer-wrapper {
  width: 800px; /* MARK 700 */
  margin: 0 auto; 
  text-align: $startSide;
  font: $bodyfont;
  background: #fff url(http://www.blogblog.com/snapshot/bg-body_$startSide.gif) $startSide top repeat-y;
}
.descriptionwrapper {
  background: #fff url(http://www.blogblog.com/snapshot/bg-sidebar.gif) 1px 0 no-repeat;
  width: 180px; /* MARK 264 */
  padding-top: 0;
  padding-$endSide: 0;
  padding-bottom: 0;
  padding-$startSide: 8px;
  margin-top: 1px;
  margin-$endSide: 0;
  margin-bottom: 2px;
  margin-$startSide: 0;
  position: absolute;
  bottom: 0px;
  $endSide: 0px;
}
#main-wrapper {
 line-height: 1.4;
 float: $startSide;
 padding: 10px 12px;
 border-top: solid 1px #fff;
 width: 612px; /* MARK 428  , margin gap=8 :*/
 word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
 overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
 /* Tantek hack - http://www.tantek.com/CSS/Examples/boxmodelhack.html */
 voice-family: "\"}\""; 
 voice-family: inherit;
 width: 588px; /* MARK 404  , margin gap=32 :*/
}
#sidebar {
  float:$endSide;
  border-top: solid 1px #fff;
  padding-top: 4px;
  padding-$endSide: 0;
  padding-bottom: 0;
  padding-$startSide: 7px;
  background: #fff;
  width: 180px; /* MARK 264 */
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

0 件のコメント:

コメントを投稿