スキン編集の為のブログです。
by tyanngumu
   
カテゴリ
全体
背景の画像変更
コメント欄を広く
HTML+time
スクロールバー
コメント入力欄の編集Ⅰ
フラッシュ
未分類
お気に入りブログ
フラッシュ・テスト
[PR]
# by tyanngumu | 2008-01-22 09:22
お休み<m(__)m>
当分!投稿はお休みしましょう。
本来のブログとHPで手いっぱい状態ですから・・・。

既に練習帳は必要ないですけどね。

[PR]
# by tyanngumu | 2007-10-10 18:26
スキン編集メモ
何もない3列スキンから始めてます。
徐々に今まで覚えたスキン編集で飾っていきます。

スキン編集をメモしてます。

スキン編集 
 ☆背景変更
 ☆トップの背景変更、トップにロゴ
 ☆ブログURLの位置変更
 ☆スクロールバーのカラー設定
 ☆コメント欄を広く 
 ☆コメント入力欄の編集Ⅰ 
 ☆投稿欄の編集(枠で囲む)
 ☆投稿欄を飾ろう!
 ☆左右のメニューを囲む
[PR]
# by tyanngumu | 2007-06-28 01:51
メニュー編集
左右のサイドバーは囲いもなく寂しいので以下のように編集。

元のスキン
{
MARGIN-BOTTOM : 50PX; TEXT-ALIGN:LEFT;}
  
を以下のように編集  ↓

DIV.PROFILE {
WIDTH : 150PX;
BACKGROUND : #FFF;
BORDER-top : 5PX #FF99FF dotted;
BORDER-LEFT : 5PX #FF99FF dotted;
BORDER-RIGHT : 5PX #FF99FF dotted;
BORDER-BOTTOM : 5PX #FF99FF dotted;
LINE-HEIGHT : 140%;
MARGIN-BOTTOM : 20PX;
PADDING-BOTTOM : 6PX;
}

ラインと色を変更しました。
[PR]
# by tyanngumu | 2006-07-08 01:01
投稿欄の編集
元々何もないまっさらなスキンなので、寂しいのです。
で、投稿欄を枠で囲った。

以下がその設定。
自分でタグを書く事は難しいので、自分のメインブログを真似たり、つい他の人のをコピーして使わせて頂いてます。

CSS編集
*/DIV.POST{
MARGIN-BOTTOM : 50PX; TEXT-ALIGN:LEFT;} /*

以下のように変更

/*-------------------本文--------------------*/
DIV.POST
{
BORDER : 1PX SOLID #CACCCC; /*本文外枠*/
MARGIN-TOP : 1PX;
MARGIN-BOTTOM : 10PX;
BACKGROUND : #FFF;
PADDING : 10PX;
}

タイトル(日付欄?)を枠で囲む
*/DIV.POST_HEAD{ BORDER-BOTTOM : 1PX #CCC SOLID; MARGIN-BOTTOM : 15PX; PADDING-BOTTOM : 3PX; }/*

を以下に変更
/*---------------------編集部分---------------------*/
DIV.POST_HEAD
{
/*BORDER-TOP : 1PX DOTTED #006E90;
BORDER-BOTTOM : 2PX DOTTED #006E90;*/
BORDER : 1PX SOLID #CACCCC;
PADDING : 2PX 8PX 1PX;
PADDING-TOP : 3PX;
PADDING-BOTTOM : 5PX;
FONT-FAMILY : VERDANA;
LETTER-SPACING : 8PX;
COLOR : #727272;
background-color:#ffffff;
WIDTH : 480PX;
}

/* ----------------------タイトルの色---------------------*/
DIV.POST_TTL
{
BORDER-BOTTOM : 1PX #888 DOTTED;
FONT-SIZE : 10PT; COLOR : #cc6699/*596A75*/;
FONT-WEIGHT : BOLD;
WIDTH : 370PX;
}
/*DIV.POST_TTL{ FONT : BOLD 15PT/130%;}/*

/*---------------下の日付やコメントの部分---------------*/
DIV.POST_TAIL
{
MARGIN: 20PX 0PX 0PX;
TEXT-ALIGN : RIGHT;
LINE-HEIGHT : 170%;
FONT-FAMILY : TAHOMA;
FONT-SIZE : 7PT;
}

f0089808_0485374.gif

[PR]
# by tyanngumu | 2006-07-08 00:53
左右のメニュー
左右のメニュー、まっさらで囲いがないので、寂しかった。
で、どうしたらいいのか???
で、ブログメイン『リンドウの徒然日記』からコピーして見た。
が、ただのラインだし、上下左右で変化を持たせてあるので
ラインを替えても何か変(;一_一)??

で、ちょっとづついじったらこのように完成。

ソースは下のように換えた。

*………………………………………………………………………………*

プロフィール・・・ラインで囲む

DIV.PROFILE{ WIDTH : 150PX; PADDING : 0PX 0PX 10PX; LINE-HEIGHT : 130%; OVERFLOW : HIDDEN; TEXT-ALIGN:LEFT;}

を下に変更
DIV.PROFILE {
WIDTH : 190PX;
BACKGROUND : #FFF;
BORDER-LEFT : 1PX #F5F5F4 SOLID;
BORDER-RIGHT : 1PX #BAB7AD SOLID;
BORDER-BOTTOM : 1PX #BAB7AD SOLID;
LINE-HEIGHT : 140%;
MARGIN-BOTTOM : 20PX;
PADDING-BOTTOM : 6PX;
}

ラインと色を変更で以下のように・・・・。

DIV.PROFILE {
WIDTH : 150PX;
BACKGROUND : #FFF;
BORDER-top : 5PX #FF99FF dotted;
BORDER-LEFT : 5PX #FF99FF dotted;
BORDER-RIGHT : 5PX #FF99FF dotted;
BORDER-BOTTOM : 5PX #FF99FF dotted;
LINE-HEIGHT : 140%;
MARGIN-BOTTOM : 20PX;
PADDING-BOTTOM : 6PX;
}
[PR]
# by tyanngumu | 2006-07-02 13:11
カレンダーのバックに画像
DIV.CAL_BODY {


WIDTH: 150PX;
TEXT-ALIGN: CENTER;

  /*------- ここから追加 ---------*/

background-image:url(イメージURL);
background-repeat:no-repeat;
background-position:bottom;

  /*------- ここまで ---------*/



}
[PR]
# by tyanngumu | 2006-07-02 00:42
コメント入力欄の編集Ⅰ
投稿欄を編集するつもりが

コメント入力欄をいじってしまったようだ。(;一_一)
なにせ、まだ初心者の域を脱してない私です。

DIV.COMMENT {
MARGIN-TOP : 20PX;
MARGIN-BOTTOM : 20PX;
BORDER : 5PX #D3D3D3 dotted;
BACKGROUND : #F2F2F2;
PADDING : 15PX;
PADDING-TOP : 10PX;
}

下のように出来ました。

f0089808_0322014.gif

[PR]
# by tyanngumu | 2006-06-15 00:15 | コメント入力欄の編集Ⅰ
コメント欄を広く!
CSSに下のソースを貼り付けたらOKです。
1EMはひと文字の大きさと言う意味ですね。

「コメント欄を広くする」

方法はすごく簡単です。CSS編集に次のコードを加えるだけ。

TEXTAREA.TXTFLD {height:10em;}

これでまんまとコメント欄を10行にすることができます。
TEXTAREA.TXTFLDがコメント欄のスタイルを定義してるところ。

で、そのコメント欄の長さを10emにしてます、、「現在の文字の大きさ」を1emとして定義されているから10文字分の行が広くなった事になります。
[PR]
# by tyanngumu | 2006-05-23 14:08 | コメント欄を広く
スクロールバーのカラー設定
/*スクロールバー*/
*{
scrollbar-3dlight-color:#FFC0CB;
scrollbar-arrow-color:#ffffff;
scrollbar-darkshadow-color:#FFC0CB;
scrollbar-face-color:#FFC0CB;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#ffffff;
scrollbar-track-color:#ffffff;
scrollbar-track-color:#FFE4E1;
}
[PR]
# by tyanngumu | 2006-05-10 23:31 | スクロールバー


カレンダー
        
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
          
  2006.7/2~のカウント





クリックして消してね。
以前の記事
最新のトラックバック
その他のジャンル
ファン
記事ランキング
ブログジャンル
画像一覧