カテゴリ:CSS( 7 )
|Topにもどる
ハウステンボスにて
以前ハウステンボスに行った時の画像です
画像にマウスを乗せてください。



[PR]
by snowdropa | 2008-11-17 16:35 | CSS |Topにもどる
背景画像
1.背景画像を作ります。

2.スキンの変更・・・マイイメージアカウントに登録します

3.背景のURLの部分を変更します。

変更前のCSSタグ


変更後のCSSタグ

(変更前のCSSタグの部分に変更後のCSSタグをはりかえます)
[PR]
by snowdropa | 2008-07-17 17:46 | CSS |Topにもどる
タイトルの前に画像を入れる
タイトルの前に画像を入れる(小さなアニメGIFなどを入れてみましょう)
a0107510_045915.jpg

書き加えるタグです
<img src="画像のURL">
  ↑
この部分は自分の画像のアドレスです

サンプル
a0107510_0105085.gifa0107510_0111711.gifa0107510_0122966.gifa0107510_01361.gifa0107510_0134423.gifa0107510_0145541.gifa0107510_0152721.gifa0107510_0163125.gif

a0107510_22341974.gifa0107510_22343650.gifa0107510_2235095.gifa0107510_223518100.gifa0107510_10194085.gifa0107510_10203690.gifa0107510_10205182.gif
[PR]
by snowdropa | 2008-07-02 00:05 | CSS |Topにもどる
画像の縁取りでポラロイド写真風に
画像の縁取りでポラロイド写真風
DIV.POST_BODY img{
margin:5px;
padding:5px 5px 30px 5px;
border-top:1px solid #cccccc;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
border-left:1px solid #cccccc;
background-color:#F6F6F6;
background-image:url(サイン.gif URL);
background-repeat:no-repeat;
background-position:95% bottom;
}

このソースをCSS編集の最後に追加すればOKです。
サインは適当なグラフィックスソフトで作ってください。

↓上段のタグの説明です

枠線の外側に余白を5px分取ります。
枠線の内側に余白を取ります。上5px、右5px、下30px、左5px
上の線 1px 実線 薄いグレー色
右の線 1px 実線 少し濃いグレー色
下の線 1px 実線 少し濃いグレー色
左の線 1px 実線 薄いグレー色
背景色 薄いグレー色
背景画像 サイン 透過gif
背景画像の繰り返し なし
背景画像の位置 左から95%、下端
[PR]
by snowdropa | 2008-01-18 00:35 | CSS |Topにもどる
t
枠の中にコメントを入れます。

テストです


枠の中に画像を入れます。

a0107510_22384769.gif


blockquote style="background-color:#fffff0;padding:15px 15px 15px 15px;border-top:1px solid #629666;border-left:1px solid #629666;border-right:3px solid #629666;border-bottom:3px solid #629666;"コメントや画像を入れます/blockquote
すべての<>は半角英数に直してね
[PR]
by snowdropa | 2007-12-09 22:39 | CSS |Topにもどる
ONマウス
/*画像の拡大表示*/
.popup a:link img.zoom,
.popup a:visited img.zoom,
.popup a:active img.zoom,
.popup a:focus img.zoom{
display:none;
border-style:none;
}

.popup a:hover{background-color:transparent;}

.popup a:hover img.zoom{
border-style:none;
display:block;
}

.popup a:link img.small,
.popup a:visited img.small,
.popup a:active img.small,
.popup a:focus img.zoom{
border-style:none;
display:block;
}
.popup a:hover img.small{
border-style:none;
display:none;
}
[PR]
by snowdropa | 2007-12-07 11:08 | CSS |Topにもどる
コメント欄に画像を・・・
画像をマイイメージアカウントに登録しておきます
赤い文字の部分が変更するところです。
水色の文字のところがマイイメージアカウントに登録した画像のURLです。

DIV.COMMENT {
MARGIN : 40PX 0PX 0PX;
BORDER : 1PX #D3D3D3 SOLID;
BACKGROUND : #FFF;
PADDING : 10PX 15PX;
background-image:url(http://pds.exblog.jp/pds/1/200710/23/10/siro.jpg);
background-repeat: no-repeat; background-position: 100% 0%;}



TEXTAREA.TXTFLD {
FONT:9PT osaka;
COLOR:#000;
BORDER:1PX SOLID #666678;
BACKGROUND:#FFF;
height:15em;
background-image:url(http://pds.exblog.jp/pds/1/200710/23/10/tree2.gif);
background-position:0% 100%;
background-repeat:no-repeat;}

[PR]
by snowdropa | 2007-10-23 22:40 | CSS |Topにもどる