Home > スポンサー広告 > 画像に線や枠を付けて装飾する


スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 Comments:-

Comment Form

 Trackback+Pingback:-

TrackBack URL for this entry
http://blackcat13numbers.blog31.fc2.com/tb.php/174-7dfb89b2
Listed below are links to weblogs that reference
スポンサーサイト from TRASH

Home > スポンサー広告 > 画像に線や枠を付けて装飾する

Home > FC2blog Tips > 画像に線や枠を付けて装飾する


画像に線や枠を付けて装飾する

記事に貼り付けた画像の見せ方を変える説明をしたいと思います。画像の周りに線や枠を付けることで、画像をポラロイド写真風の見せ方にしようと思います。

通常の画像
2006006.jpg
ポラロイド風
2006006.jpg
ポラロイド風(影付き)
2006006.jpg

ポラロイド風にするためには、css編集と画像タグに追記する作業が必要です。

●ポラロイド
●css編集
.pora img{
    background-color:#fff;
    padding: 5px 5px 20px 5px;
    border: solid 1px #999; 
}
●タグ編集
<div class="pora"><img src="http://blog-imgs-16.fc2.com/b/l/a/blackcat13numbers/2006006s.jpg" alt="2006006.jpg" border="0" align="left/><br clear="all" /></div>

●ポラロイド(影付き)
●css編集
.pora-kage img{
    background-color:#fff;
    padding: 5px 5px 20px 5px;
    border-top: 1px #ccc solid;
    border-right: 5px #ccc solid;
    border-bottom: 5px #ccc solid;
    border-left: 1px #ccc solid; 
}
●タグ編集
<div class="pora-kage"><img src="http://blog-imgs-16.fc2.com/b/l/a/blackcat13numbers/2006006s.jpg" alt="2006006.jpg" border="0" align="left/><br clear="all" /></div>

「pora」や「pora-kage」は、勿論お好きな言葉にしてください。これを複数cssに記述しておくことで、都度記事に画像を貼る際にタグを追記することで、色々な画像の見せ方をすることができます。
スポンサーサイト

 Comments:0

Comment Form

 Trackback+Pingback:0

TrackBack URL for this entry
http://blackcat13numbers.blog31.fc2.com/tb.php/174-7dfb89b2
Listed below are links to weblogs that reference
画像に線や枠を付けて装飾する from TRASH

Home > FC2blog Tips > 画像に線や枠を付けて装飾する

Recent Comments
Recent Trackback
Feeds

↑Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。