人気ブログランキング | 話題のタグを見る
第2回


DIV.POST_HEAD {
MARGIN : 10PX 10PX 0px 15PX;
border:2px solid #1c1c1c;
background-color:#d9c7d0;
padding:5px 0px 5px ;
filter:alpha(opacity100,finishopacity=10,style=1);
width:100%;

}

※padding:5px 0px 5px
は上の内余白5px、左右の内余白0px、下の内余白5pxという意味です。

filter:alpha(opacity=開始濃度,finishopacity=終了濃度,style=グラデーションスタイル) で指定します。
filter属性はwidth属性とペアで使用します。
width:100%


DIV.POST_HEAD {
MARGIN : 10PX 10PX 10px 0PX;
background-color:#d9c7d0;
padding:5px;
filter:alpha(opacity100,finishopacity=10,style=1,startx=30);
width:95%;

}

※文字がグラデーションと一緒に透けないようにするには背景画像として入れる

DIV.POST_HEAD {
MARGIN : 10PX 0PX 15PX;
padding:5px 0px 5px 10px;
background-image:url("背景画像のurl");
}

立体的に見せるには・・・
下と右のボーダーを少し暗くすると影のように見えて立体感が出ます
  border-bottom:縦線の太さ 線種 色
  border-right:  縦線の太さ 線種 色

DIV.POST_HEAD {
MARGIN : 10PX 0PX 15PX;
padding:5px 0px 5px 10px;
background-color:#ffffcc;
border-left:15px solid #669900;
border-bottom:1px solid #cccccc;
border-right:1px solid #cccccc;
}



☆このCSS編集はブログの玉手箱さんに教わったものです





タイトルのフォントのサイズや名前を変える
 font-size:フォントサイズ
 font-family:フォント名

DIV.HEADER {
WIDTH : 615PX;
PADDING : 26PX 0PX;
BACKGROUND : #565656;
FONT-FAMILY : HGP創英角ポップ体,TAHOMA;
FONT-SIZE : 30PT;
LINE-HEIGHT : 110%;
FONT-WEIGHT : BOLD;
TEXT-ALIGN : CENTER;
}


●タイトル部分に写真を表示する
 表示するエリアと同じサイズの写真を作成し、背景画像として設定
   background-image:url(背景画像のurl)

DIV.HEADER {
WIDTH : 615PX;
PADDING : 26PX 0PX;
/* BACKGROUND : #565656;*/(ここには最初のスキンの色がついています)
background-image:url("背景画像のurl");
FONT-FAMILY : TAHOMA,HGP創英角ポップ体;
FONT-SIZE : 30PT;
LINE-HEIGHT : 110%;
FONT-WEIGHT : BOLD;
TEXT-ALIGN : CENTER;
}

画像の中にタイトルを書いたので文字のブログタイトルを消したいとき
スキン編集のHTML部にある<$header$>を削除します。

☆このCSS編集はブログの玉手箱さんに教わったものです
by atagohama | 2010-01-18 00:57 | 愛宕浜教室 |Topへ戻る


<< 2-2 1回 >>