「日記はいつも三日坊主。」
ブログの使い方やCSSを勉強していましたが休止中です。
コメント欄・トラックバックの怪しげなURLにはご注意ください。
(たまーにスパムのチェックはしますが消しきれませんのでm(_ _)m)
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
最近の記事
10/15 半透明フィルターの代わりに…
10/12 エキサイトブログ・モバイル…
9/19 スキン編集 ―背景編― 改訂版
9/17 コメント入力欄を大きくする。
9/14 アクセス解析について その1
9/7 POSTTAILの自分のIDを消して…
9/3 模様替えしました。&スクロールバー
9/1 いくら三日坊主といっても
全体 ブログ MENU スキン
編集
素材
配布
日記 リンク 管理用 ・・・ ・・・
スキン編集 ―背景編― 改訂版
BACKGROUNDというのは背景のことですが、CSSで指定すれば背景画像を全面に敷き詰めるだけではなく、縦方向のみ・横方向のみに並べたり、1つだけを好きな場所に固定することもできるのです。
1つだけ表示させることで背景でなくワンポイントに見せて使うこともできます。

BACKGROUNDの指定の仕方にはこんなのがあります。


A 背景色の指定をする。
BACKGROUND:#☆☆○○△△;

B 背景を透明にする
(BACKGROUNDを記述しなければ透明になる場合もありますが、
指定しないと画像が反映されないこともあります)
BACKGROUND:TRANSPARENT;

画像を使う

C 背景画像の指定
BACKGROUND-IMAGE:URL(http://~~~/○○.gif);

背景画像の並べ方

D 縦方向にのみ繰り返し
BACKGROUND-REPEAT:REPEAT-Y;
E 横方向にのみ繰り返し
BACKGROUND-REPEAT:REPEAT-X;
F 1つだけ表示してワンポイント風に
BACKGROUND-REPEAT:NO-REPEAT;

位置指定

G 1つだけ表示する場合の場所指定
BACKGROUND-POSITION:LEFT TOP; (左上に表示)
BACKGROUND-POSITION:350PX 100PX; (左から350PX、上から100PXの位置に表示)
H スクロールしても背景を固定させる
BACKGROUND-ATTACHMENT:FIXED;

青枠内のソースと下の赤枠内の画像を比べてみてください。
背景見本1
背景見本2
背景見本3

赤枠内1、2、4、8、のワンポイント画像・・・青枠内の C F Gを使います。
3・・・C D
5、6、7・・・C Eまたはフィルターを使う。
9・・・C F G H 記事部分にB
9はHを使わずに記事部分の高さを決めてその中でスクロールさせるようにして、背景固定に見せることもできます。ver.3 ver.3-2がそうです。

実際に書くとこうなります。青字部分を書き足します。
DIV.MNTTL {
WIDTH : 150PX;
BORDER-BOTTOM : 1PX #AAA SOLID;
FONT : 9PT/150% VERDANA;
PADDING : 2PX 0PX 0PX;
MARGIN : 25PX 0PX 10PX;
BACKGROUND-IMAGE:URL(http://........**.gif) C
BACKGROUND-POSITION:RIGHT BOTTOM; G
BACKGROUND-REPEAT:NO-REPEAT;
F
}


BACKGROUND部分をまとめることもできます。
BACKGROUND:URL(http://........**.gif) RIGHT BOTTOM NO-REPEAT;
[PR]
by umigasuki70 | 2005-09-19 12:40 | スキン編集記