スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

--:-- | スポンサー広告 | edit | page top↑

画像に枠をつけて立体的に見せる。

FH000021b400.jpg


写真に立体的な白い枠(フレーム)をつける方法です。
1.すべての画像に枠をつけても良い場合。
(過去の記事内の画像にもいっぺんに枠がつきます)。
スタイルシートの画像の部分を探し、以下のように修正します。
赤字部分が追加部分ですが、全部まとめてコピペでも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の値はご自身で適当に変えてみてください。
スポンサーサイト

20:13 | カスタマイズ | edit | page top↑
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。