keima's caprice diary

気付いたことをメモのように綴ります。なるべく義務っぽくならないように気まぐれに記録します。

ポラ風

覚え書きとして、 別Fileスタイルシートでポラ風画像を貼る方法を書いておこうっと。 これはCSSに追加してHTMLでdivタグを使って呼び出すやり方。 「/*」と「*/」はコメントなので消去してもOK。 あ、因みにCSSは大文字と小文字を明確に区別するので自分で統一した方がミスが減る。
/*ポラ風写真*/ 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; }
自作ロゴ等を付け足す場合は↑のCSSを「}」で締めずに続けて以下も記述しておく。 で、以下を記述したら「}」で締める。
background-image:url(画像保存場所のパス); background-repeat:no-repeat; background-position:95% bottom;
ポラ風画像を貼りたい部分で以下のように記述する。
<div class="post_body img"> <img src="画像保存場所のパス"> </div>
今回、画像のサイズは指定していないので貼る前にサイズを調整する。 ポラの外枠の幅は気分で調整する。 ↓こんな感じになる。 サンプル
↑この画像は 272 x 232 で保存したもの。