2011/02/23

Customized template.xml

Blogger template.xml (css) をカスタマイズした際の memo。

1)

.body-fauxcolumn-outer .cap-top {
  position: absolute;
  z-index: 1;
  /* Default */
  /* height: 400px;*/
  height: 5px;
  width: 100%;
  background: $(body.background);
  $(body.background.override)
}

最上部フレーム高さとか。

#navbar-iframe {
...

を追加しないで変更した場合どうなるかは試していない。

2)

.content-inner {
  /* Default */
  /* padding: $(content.padding) $(content.padding.horizontal); */
  padding: 0px 20px;
}

content は ブログタイトル, description, 全ての投稿を包括する大枠。

3)

.header-inner .Header .titlewrapper {
  /* Default */
  /* padding: 22px $(header.padding); */
  padding: 5px $(header.padding);
}

ブログタイトル余白。

4)

.main-inner {
  /* Default
  padding-top: $(main.padding.top);
  padding-bottom: $(main.padding.bottom);
  */
  padding-top: 0px;
  padding-bottom: $(main.padding.bottom);
}

main は全投稿記事を包括するパート。(記事フッタ、日付、タイトル含む)
上部余白を減らすとブログタイトルと記事全体の間が狭くなる。

5)

.post-header {
  margin: 0 0 1.5em;
  line-height: 1.6;
  font-size: 90%;
  /* add */
  border-bottom: 1px solid #6ea1bb;
}

投稿タイトルと投稿記事の間の余白。
padding-top: 20px; などの確認を要した。

6)
mobile のあと。
p, pre-code, blockquote 部分。

/*
----------------------------------------------- */

#navbar-iframe {
  height:0px;
  visibility:hidden;
  display:none
}

/* p tag
----------------------------------------------- */
.post-body p {
  margin: 0px;
  padding: 0px;
  font-size: 10.2pt;
  line-height: 1.6em;
  letter-spacing: 2px;
}

/* pre code
----------------------------------------------- */
.post-body pre {
  margin: 7px 0 7px 0px;
  padding: 7px 0 7px 7px;
  color: #6666B3;
  overflow: auto;
  border-bottom: 1px solid #eeeeee;
  border-left: 1px solid #eeeeee;
  background-color: #FCFFFD;
}
.post-body code {
  margin: 0em;
  padding: 0em;
  font-family: Menlo, Monaco, Monospace;
  font-size: 8.7pt;
  line-height: 1.7em;
  letter-spacing: 1.5px;
}

/* brockquote
----------------------------------------------- */
.post-body blockquote {
  margin: 5px 0px 5px 5px;
  padding: 0.8em 0.5em 0.5em 0.8em;
  color: #555;
  background-color: #FBFDFF;
  border-top: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
}
.post-body blockquote p {
  margin: 0px;
  padding: 0px;
  font-family: Optima, Georgia, sans-serif;
  font-size: 9pt;
  line-height: 1.4em;
  letter-spacing: 2px;
  font-style: italic;
}


カラー参照
http://www.w3schools.com/css/css_colornames.asp

0 件のコメント: