• 2008年12月 8日(月) 22:22 JST
  • 投稿者:
    augebang
  • 閲覧数
    2,922

カメレオンプラグイン逆引きCSSカラー編3

[tag:chameleon_color.css]

・サンプルで使用するパーツ
36(Geeklog/layout/chameleon/styles/color/36)

カメレオンプラグインでデザインを変更するために使用するのは
color.cssです。
ここで指定するのは色、画像、見出しデザイン、フォント指定など見た目に関係するものです。
レイアウトデザイン(2カラム3カラム等)やサイズ関係はlayout.cssで変更します。

逆引きCSS

見出しの装飾。

h1 {
display: block;
margin: 0.67em 0;
font-size: 2em;
font-weight: bolder;
}

h2 {
display: block;
margin: 0.75em 0;
font-size: 1.5em;
font-weight: bolder;
}

h3 {
display: block;
margin: 0.83em 0;
font-size: 1.17em;
font-weight: bolder;
}

h4 {
display: block;
margin: 1.12em 0;
font-size: 1em;
font-weight: bolder;
}

h5 {
display: block;
margin: 1.5em 0;
font-size: 0.83em;
font-weight: bolder;
}

h6 {
display: block;
margin: 1.67em 0;
font-size: 0.75em;
font-weight: bolder;
}

フォームの装飾

form fieldset div.notes {
background-color:#ffffe1;
border:1px solid #666666;
color:#666666;
}

form fieldset div.notes h4 {
background:url(images/icon_info.png) no-repeat top left;
border:0px 0px 1px 0px solid #666666;
color:#666666;
}

form fieldset div.notes p {
color:#666666;
}

input,
submit,
td {
color:#000000;
}

select {
color:#000000;
}

textarea {
color:#000000;
}

基本Blockの装飾

(ブロック全般装飾但しblock.cssにオーバーライドされる)

.block-box,
.block-box-left,
.block-box-right, {
}
.block-box ul,
.block-box-left ul,
.block-box-right ul { /* do not indent lists in the blocks too much */
}
.block-columnpad {
}
.block-content,
.block-content-left,
.block-content-right {
background:transparent;
color:#000000;
}
.block-content ul,
.block-content-left ul,
.block-content-right ul {
}
.block-helpicon,
.block-helpicon-left,
.block-helpicon-right {
}
.block-title,
.block-title-left,
.block-title-right,
.block-title-list {
background:#CCCCCC;
color:#000000;
}

検索部分の装飾。

.highlight {
background-color:yellow;
color:#000000;
}
.searchauth {
background:transparent;
color:#000000;
}
.searchdate {
background:transparent;
color:#000000;
}
.searchform-box {
background:#E7E7E7;
border-bottom:1px solid #CCCCCC;
}
.searchhits {
background:transparent;
color:#000000;
}

ウエルカムメッセージの装飾。

.welcomeanddate-text {
border-bottom:0px solid #CCCCCC;
}

トラックバック

このエントリのトラックバックURL:
http://gltmatrix.com/trackback.php/chamecolor3

サイト管理者はコメントに関する責任を負いません。