Studyroom

リンク（バナーをつける）

枠2

cssとは

CSSとは
CSSとは、Cascading Style Sheets（カスケーディング・スタイルシート）の略で、
HTML文書の装飾部分を一括管理できる機能です。

HTMLでは、文字の大きさや色、背景色などを個別に指定していましたが、
CSSでは、一括で指定することができます。

HTMLのみでWEBページを作成していれば、文章構造が細かくなったり、
ページ数が増えてくると、それぞれのページを修正することは大変な作業になります。
CSSを活用することによって簡単に修正することができます。

HTMLではテンプレートの基本構造（レイアウト）を、
CSSでは文字や背景の装飾部分を定義しています。
　↓これがこのブログのHTMLのテンプレートの基本構造（レイアウト）です

pingとは
ブログの更新情報をpingサーバー（ping受信サイト）に通知するためのものです。

pingサーバー（ping受信サイト）は、ping送信で送られてきたブログの更新情報を表示しますので、そのサイトを訪れるすべての方に、自分のブログの更新情報を知らせることができます

カレンダーの背景に画像を入れる

CSS編集で、DIV.CAL_BODY を探す

DIV.CAL_BODY {

WIDTH: 150PX;
TEXT-ALIGN: CENTER;
/*追加するタグ*/
background-image:url(イメージURL);
background-repeat:no-repeat;
background-position:bottom;

}

スキンによっては↓のようにタグを修正しなければカレンダーのヘッドとボディーが一体にならない場合もあります。
DIV.CAL {
WIDTH : 190PX;
MARGIN : 5PX 0PX;
PADDING-BOTTOM : 10PX;
BORDER : 1PX SOLID #CECECE;
TEXT-ALIGN : CENTER;
/*BACKGROUND : #FFFFFF;*/
background-image:url('http://12.pro.tok2.com/~snowdrop/Photo/bg2.jpg');
background-repeat:no-repeat;
background-position:bottom left;/

}

DIV.CAL_HEAD {

WIDTH : 150PX;
FONT-SIZE : 8PT;
FONT-FAMILY : VERDANA;
TEXT-ALIGN : CENTER;
PADDING : 4PX 10PX;
MARGIN-BOTTOM : 10PX;
}

DIV.CAL_BODY {
/* WIDTH : 150PX;
PADDING : 0PX 10PX;
TEXT-ALIGN : CENTER;
BACKGROUND : #FFF; */
}
～～ここまで～～


今日に小さな画像を入れる

CAL_TODAY {
/* FONT-FAMILY : VERDANA,;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
BACKGROUND : #E2E2E2;
COLOR : #3D5586;
TEXT-ALIGN : CENTER;*/FONT-FAMILY : VERDANA, ;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
/*BACKGROUND : #ffffff;*/
COLOR : #3D5586;
TEXT-ALIGN : CENTER;background-image:url("http://winterrose.hp.infoseek.co.jp/mh02v-a2.gif");
background-repeat:no-repeat;
background-position:center center;
}


/*~*/で囲んだタグを削除した場合↓のようになります。

.CAL_TODAY {
FONT-FAMILY : VERDANA, ;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
COLOR : #3D5586;
TEXT-ALIGN : CENTER;background-image:url("http://winterrose.hp.infoseek.co.jp/mh02v-a2.gif");
background-repeat:no-repeat;
background-position:center center;
}





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

コメント欄

コメント欄を広げたり、コメント入力欄にイメージを挿入して楽しむ場合
TEXTAREA.TXTFLDに対して行う

.TXTFLD{

FONT-SIZE:9PT;
COLOR:#000;
BORDER:1PX SOLID #666678;
BACKGROUND:#FFF;


}

TEXTAREA.TXTFLD{

height:15em;
background-image:url(イメージURLアドレス);
background-position:right;
background-repeat:no-repeat;


}

※background-attachment:固定
　　background-repeat:繰り返しなし
　　background-position:左からの相対位置　上からの相対位置
　　background-image:url(背景画像のurl)



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

付箋

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編集はブログの玉手箱さんに教わったものです