スポンサーサイト

一定期間更新がないため広告を表示しています

| スポンサードリンク | - | - | pookmark |
Entry: main  << >>
ポラロイド風の枠をつける
画像に枠をつけるの応用編




■ ポラロイド風の枠をつける



CSSを利用すれば上記のように投稿画像をポラロイド風に見せることできます。
尚、.xxxの箇所はテンプレートにより異なります。
.xxx img {
background:#fff; /* 写真余白部分の背景色 */ 
padding:5px 5px 15px 5px; /* 余白の設定 */
border : 1px solid #aaa; /* 写真枠部分の設定 */
}

※IE6対策
テンプレート1行目にあるXML宣言を削除する。
<?xml version="1.0" encoding="文字コード"?>
XML宣言が記述されているとブラウザが「後方互換モード」として動作されます。
XML宣言を削除して「標準準拠モード」として動作するようにしましょう。




■ クラス属性、id属性ごとに指定する

予めCSSにポラロイド枠設定のクラスを用意しておくことで画像に枠をつける方法。
.pora {
background:#fff; /* 写真余白部分の背景色 */ 
padding:5px 5px 15px 5px; /* 余白の設定 */
border : 1px solid #aaa; /* 写真枠部分の設定 */
}

画像挿入の際にクラスを書き換える。
<img src="画像URL" width="xxx" height="xxx" alt="xxx" class="pora" />




| pika | - | - | pookmark |
スポンサーサイト
| スポンサードリンク | - | - | pookmark |