画像に枠をつけて立体的に見せる。
06/12/2006(Mon)

写真に立体的な白い枠(フレーム)をつける方法です。
1.すべての画像に枠をつけても良い場合。
(過去の記事内の画像にもいっぺんに枠がつきます)。
スタイルシートの画像の部分を探し、以下のように修正します。
赤字部分が追加部分ですが、全部まとめてコピペでもOKです。
2.枠をつける画像とつけない画像に区別する場合。
スタイルシートの設定をした後、記事の画像タグの中で枠の指定をします。
よって過去の記事も個別に修正する必要があります。
まずはスタイルシート。
分かりやすいよう、1の下あたりに新たに以下を追加します。
次に枠をつけたい画像のタグ(個別記事の編集画面から)の中にclass="waku"を追加します。
例えば上の写真はこのようになっています。
注意:
テンプレートによっては、記事の部分が.entry_bodyだったりentry_textだったりしますのでご注意ください。
paddingの値はご自身で適当に変えてみてください。
(過去の記事内の画像にもいっぺんに枠がつきます)。
スタイルシートの画像の部分を探し、以下のように修正します。
赤字部分が追加部分ですが、全部まとめてコピペでもOKです。
/*画像*/
.entry_body img {
margin:10px;
padding:15px;
background-color:#fff;
border-top:1px solid #eee;
border-right:1px solid #bbb;
border-bottom:1px solid #bbb;
border-left:1px solid #eee;
}
2.枠をつける画像とつけない画像に区別する場合。
スタイルシートの設定をした後、記事の画像タグの中で枠の指定をします。
よって過去の記事も個別に修正する必要があります。
まずはスタイルシート。
分かりやすいよう、1の下あたりに新たに以下を追加します。
/*画像にフレームをつける*/
.entry_body .waku {
padding:15px;
background-color:#fff;
border-top:1px solid #eee;
border-right:1px solid #bbb;
border-bottom:1px solid #bbb;
border-left:1px solid #eee;
}
次に枠をつけたい画像のタグ(個別記事の編集画面から)の中にclass="waku"を追加します。
例えば上の写真はこのようになっています。
<a href="http://blog-imgs-41.fc2.com/p/a/p/paperbag/FH000021b400.jpg" target="_blank"><img src="http://blog-imgs-41.fc2.com/p/a/p/paperbag/FH000021b400.jpg" alt="FH000021b400.jpg" class="waku" border="0"></a><br clear="all">
注意:
テンプレートによっては、記事の部分が.entry_bodyだったりentry_textだったりしますのでご注意ください。
paddingの値はご自身で適当に変えてみてください。
| ホーム |


















pb(07/17)
まっくろくろすけ(06/22)
pb(06/22)
まっくろくろすけ(06/22)
Jonamina(06/13)
pb(06/12)
meg(06/12)
pb(06/12)
Jonamina(06/12)
pb(06/10)
Jonamina(06/10)
pb(06/05)
タカモト(06/01)
pb(05/30)
pb(05/28)
タカモト(05/28)
pb(05/24)
pb(05/22)
しろくま(05/22)