★影付背景画像の作成
GraphicConverter で「ファイル」メニューから
「新規ファイル」で「イメージ」
幅は:494px (796px) など任意
高さ:494px (796px) など任意
色深度:約1760万色(32ビット)
※にしておかないと「シャドウ」メニューが有効になりません
目的のサイズを500pxでシャドウサイズを6pxにする場合は494px。汎用に使用出来るように大きめのサイズで作成しておく。白紙の画像が作成される。「エフェクト」メニューの「シャドウ」からシャドウサイズを指定する。出来上がった画像を保存する。軽くする為に .jpgより .pngなどに。影付背景画像サンプル
.shadow
{
background: url(./shadow-bg.png) right bottom;
float: left;
margin: 6px 12px 6px 6px;
}
画像を左に配置したい場合はleft指示。右にしたい場合はright指示
.shadow img
{
position: relative;
left: -5px;
top: -5px;
padding: 6px 6px 24px 6px;
background: #ffffff;
border: 1px solid #999999;
}
全て白枠を均等にするにはpadding: 6px;
.clr {clear: both;}
回り込み文章が短い場合や連続して記述する場合で配置ポジションをクリアするため。
<span class="shadow"><img alt="name" src="画像url" width="任意" height="任意" /></span>文章…
必要な場合は<div class="clr"></div>を追加記述する
※PiPELiNEぶろぐさんのcssを参考にしました
