CSSテクニック 投稿画像を写真のように表示させる
- カテゴリ : FC2ブログTips
- タグ : CSS テクニック 画像 装飾
- 2009-02-06(Fri)
-
FC2ブログ・テンプレートカスタマイズのTipsをまとめています。
投稿した画像に装飾を施すことができます。
以下、いくつか簡単にコピペで出来るものを紹介していきたいと思います。
↑CSSで特に装飾を施していないデフォルト画像
(CSS部で以下のように記述されている部分をカスタマイズします)
img, img a {
上のソースをコピーして、CSS部のimgの部分にペーストしてお使いください。
例えば、このソースを少し変更すると、色などを変更することもできます。
img, img a {
投稿される画像のサイズは、いつでも同じとは限らない場合もあるので、
横や縦に並べても繋がる背景画像(シームレス画像)を使うと良いと思います。
ここでは、背景画像に
←このような画像を使用しています。
background-imageでは、特に何も指定しない場合は、
縦方向・横方向、全体に背景画像が敷き詰められた状態になります。
使用する画像の質感によって、フォトフレームのような装飾が可能になります。
img, img a {
←このような背景画像を使い、
background-repeatを追加して、
背景画像を横・又は、縦方向だけに並べる、といった方法もあります。
img, img a {
縦方向に並べたい場合は、
background-repeat: repeat-y; /*縦方向(y)に並べるという指示*/を出します。
ここで紹介したCSSテクニックは初歩のもので、
今回は、CSS部で img,img a の部分である投稿画像について書きました。
このCSSでの簡易装飾は、ほとんどの要素でも同じように装飾することが出来ます。
(divやp、tableなどの箱状のものから、
リスト(li)、見出し(h1,h2,h3…)、リンク(a)…など、ほぼ全てにおいて使うことができます。)
CSS ブログを綺麗に整列させる為のmarginとpaddingの基礎メモ。
各記事に、毎回表示させたい文字や画像を埋め込む。
CSS リンク文字 小技集【色,線,画像】
CSS 文字(フォント)の大きさ・色などの基本 まとめ
記事に美しい個性を持たせる簡易小技 "リスト"のカスタマイズサンプル
投稿画像を写真のように表示させよう
CSSをカスタマイズすることで、投稿した画像に装飾を施すことができます。
以下、いくつか簡単にコピペで出来るものを紹介していきたいと思います。
↑CSSで特に装飾を施していないデフォルト画像
(CSS部で以下のように記述されている部分をカスタマイズします)
img, img a {
}
写真のように縁取ったCSSテクニック
- background-color
縁取り枠内の色。(写真の場合、大抵色は白) - border
縁取り枠の、外枠の線の太さ・線種・色を指定します。 - padding
縁取り枠の幅。(数値が大きくなると太い幅になる)
img, img a {
background-color: #FFF; /*写真の背景部の色*/
border: 1px solid #B9B9B9; /*縁取り線の太さ・線種・色*/
padding: 3px; /*縁取りの幅*/
}
上のソースをコピーして、CSS部のimgの部分にペーストしてお使いください。例えば、このソースを少し変更すると、色などを変更することもできます。
img, img a {
background-color: #DCD; /*写真の背景部の色*/
border: 2px solid #F67; /*縁取り線の太さ・線種・色*/
padding: 8px; /*縁取りの幅*/
}
縁取り枠に画像を使ったテクニック ��
backgroundで、背景に画像を使用してみます。投稿される画像のサイズは、いつでも同じとは限らない場合もあるので、
横や縦に並べても繋がる背景画像(シームレス画像)を使うと良いと思います。
ここでは、背景画像に
←このような画像を使用しています。background-imageでは、特に何も指定しない場合は、
縦方向・横方向、全体に背景画像が敷き詰められた状態になります。
使用する画像の質感によって、フォトフレームのような装飾が可能になります。
img, img a {
background-image: url(http://○○/△△.gifなど画像のURI); /*背景画像*/
border: 2px solid #999; /*縁取り線の太さ・線種・色*/
padding: 8px; /*縁取りの幅*/
}
縁取り枠に画像を使ったテクニック ��
←このような背景画像を使い、background-repeatを追加して、
背景画像を横・又は、縦方向だけに並べる、といった方法もあります。
img, img a {
background-image: url(http://○○/△△.gifなど画像のURI); /*背景画像*/
background-repeat: repeat-x; /*横方向(x)に並べるという指示*/
border: 1px solid #666; /*縁取り線の太さ・線種・色*/
padding: 8px; /*縁取りの幅*/
}
縦方向に並べたい場合は、
background-repeat: repeat-y; /*縦方向(y)に並べるという指示*/を出します。
ここで紹介したCSSテクニックは初歩のもので、
今回は、CSS部で img,img a の部分である投稿画像について書きました。
このCSSでの簡易装飾は、ほとんどの要素でも同じように装飾することが出来ます。
(divやp、tableなどの箱状のものから、
リスト(li)、見出し(h1,h2,h3…)、リンク(a)…など、ほぼ全てにおいて使うことができます。)
こちらの記事もどうぞ
CSS divのidとclass、#と.って。初歩の確認事項CSS ブログを綺麗に整列させる為のmarginとpaddingの基礎メモ。
各記事に、毎回表示させたい文字や画像を埋め込む。
CSS リンク文字 小技集【色,線,画像】
CSS 文字(フォント)の大きさ・色などの基本 まとめ
記事に美しい個性を持たせる簡易小技 "リスト"のカスタマイズサンプル
