ただ、写真の周りに線を入れるだけの話ですが
書いておかないと 即効 で忘れて、
写真の周りに線いれられないのかな？と同じ事を考える羽目になりますので書いておきます。
なんのこっちゃ？というところからですが。
通常何にも考えずに画像を入れてあげると下みたいな感じですよね。
べつの不都合がある訳ではないのですが。
白の背景の場合、写真をこういう風に貼り付けてると
ちょっと貧相な感じがふとしたのです。
背景が黒だとそのまま写真を貼り付けても引き締まっていい感じなんですが。
そこで下のように表示することを考えました。
ちょっとだけいい感じがするでしょ？
でやり方をイロイロ探していたのですが。
最初やっていたのが
画像を埋め込むときに
<img src="https://******/smp.jpg" height="78" width="152"
style="border:1px solid rgb(204, 204, 204); margin: 5px; padding: 10px;" />
と（黒字の部分を）埋め込む方法を採用して画像を貼り付ける度に style部分を挿入していました
しばらく ヨシヨシ なんてやっていましたが いまいち メンドクサ～
誰か自動でやってくんない？と思い 調べてみました。
でたどり着いたのが スタイルシート で img のスタイルを制御するという方法。
スタイルシートで
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
img
{
border:1px solid rgb(204, 204, 204); margin: 5px; padding: 10px;
}
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
と定義してあげれば
スタイルを読み込んでいるhtmlの <img > タグ内全てに上のスタイルが適用されていい感じ。
でも やってみると 本文以外の画像にも適用されちゃって グズグズに。 orz
スタイルシートについてもうちょっと良く調べてみると
<div> で指定された範囲に絞って効果を発揮できるみたい。
自分のブログの出力画面のソースファイルをジーット見つめていると
本文部分は <div class="asset-body"> なんてタグで括られていました。
このタグで括られている部分だけにスタイルを効かせるには
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
.asset-body img
{
border:1px solid rgb(204, 204, 204); margin: 5px; padding: 10px;
}
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
なんて定義してあればイイっぽい。
で再度確認すると おぉ～ すばらしい。 勝手に枠が付いてる。
ばっちり 試してみて。
と思って 他の記事も確認してたら。
本文に埋め込んでる ブログ村へのリンクボタン
にも枠が付いちゃってるよ。 うぅーん。
