写真の縁取りについて

以下は、エキサイトブログのスキンの変更に関わる話です。
書いてあることがよく分からない場合は、止めておかれた方がいいでしょう。
もし実行される場合、ソースコードを変更して「保存」してしまうと、間違っていても元に戻せません。
ソースコードを変更される場合は、まず今の設定をメモ帳などに保存して、それをコピー＆ペーストすれば今の状態に戻せるようにしてから、ぜひ実行してください。

1. 一般的な話

まず私のブログの写真をどれでもクリックしてみて下さい。　例えばこれ　→
写真だけ表示されますが、それには白い枠や黒い縁取りのラインがありませんよね。
つまり私は、写真を「加工」して白い枠や黒い縁取りのラインを付けているわけではありません。
その代わりにCSS（ウェブの表示に関わる設定）を使って、写真に白い枠と黒い縁取りのラインをブラウザ上でだけ「表示」させています。

エキサイトブログの場合、「スキン変更」の「スキン編集」の「■ CSS編集」で写真の表示に関する項目があります。
IMG.IMAGE_LEFT　→　左寄せで配置する写真の設定
IMG.IMAGE_RIGHT　→　右寄せで配置する写真の設定
IMG.IMAGE_MID　→　中央に配置の設定
このそれぞれの項目で
PADDING : 枠の広さを設定
border : 縁取りラインの色と太さを設定
BACKGROUND : 写真の背景（枠）の色の設定
を追加しています。

具体的には、こんな風に設定しています。

IMG.IMAGE_MID {
margin-top : 15px;
margin-bottom : 15px;
padding : 15px;
border : 1px solid #0a0a0a;
background : #fff;
}

IMG.IMAGE_LEFTとIMG.IMAGE_RIGHTも同様です。

farfarsideKさんの設定の場合、現在、CSSの写真の設定は

img.IMAGE_LEFT { margin-right : 15px; margin-bottom : 15px; text-align:left;}
img.IMAGE_MID { margin-top : 15px; margin-bottom : 15px; }

となっています（右寄せの設定がないですね）。
これを以下のようにすれば、白い枠と黒い縁取りラインが付きます。

img.IMAGE_LEFT { margin-right : 15px; margin-bottom : 15px; text-align : left; padding : 15px; border : 1px solid #000; background : #fff;}
img.IMAGE_MID { margin-top : 15px; margin-bottom : 15px; padding : 15px; border : 1px solid #000; background : #fff;}

写真の左寄せ（写真の右側に文章が入る）の表示を使わないなら、img.IMAGE_MIDだけ変更すれば充分です。

2. farfarsideKさんの特殊な事情

ただし、farfarsaideKさんの場合、ひとつ問題があります。
CSSを変更すると、その表示の変更はこれまでのすべての画像にも及びます。
つまり影をつけてアップした写真にも、影の外側に白い枠と黒い縁取りラインが付いてしまいます。
写真に影をつけたのはここ数か月なので、目をつむる、とおっしゃるのなら、これで解決です。
しかし、影がついた画像に縁取りがあるのはいやだ、という場合・・・
むむむむむむむむ・・・

これまでの写真はそのままで、これから載せる写真だけ白い縁に黒い縁取りラインをつける方法を考えてみました。

まず、新しく載せる写真の設定に
＜DIV CLASS=PHOTO-FRAME＞
［#IMAGE|d0000000_0000000.jpg|200708/08/88/|mid|600|400#］
＜/DIV＞
（表示のため＜＞と［］は全角文字にしているが実際は半角）
とDIV要素を被せてみましたが、左右のPADDINGがうまく働きませんでした（なぜだ？）

そこでimg.IMAGE_RIGHTの設定がないので、これを使うことを考えてみました。
要するにこれまで写真を右寄せする設定を使っていない、右寄せになってもいいという前提です。
もし、左寄せも使っていないなら、そちらを使った方が格好がいいかも知れません。

１．「■ CSS編集」で一番最後に以下の設定を付け加える

img.IMAGE_RIGHT {
margin-top : 15px;
margin-bottom : 15px;
padding : 15px;
border : 1px solid #000;
background : #fff;}

２．img.IMAGE_LEFTとIMG.IMAGE_MIDは変更しない
３．画像タグの後に＜br clear=all＞（実際は<>は半角）を付け加え、文章が写真の左に来るのを防ぐ）

［#IMAGE|d0000000_0000000.jpg|200708/08/88/|mid|600|400#］＜br clear=all＞
（表示のため［］と＜＞は全角文字にしているが実際は半角）

これで、今までの画像に影響を与えず画像は右寄せになってしまいますが、白い縁に黒い縁取りラインをつけることができます。
画像は右に寄っていますが・・・
右によらないように出来ないかやってみましたがダメでした（涙）

左寄せを使う場合は現在のCSSの設定の

img.IMAGE_LEFT { margin-right : 15px; margin-bottom : 15px; text-align:left;}

の部分を以下のように書き換えてみて下さい。

img.IMAGE_LEFT {
margin-top : 15px;
margin-bottom : 15px;
padding : 15px;
border : 1px solid #000;
background : #fff;}

これで如何でしょうか？
どなたか、もっとよい方法をご存知なら教えて下さい。

3. farfarsideKさんのエキサイトブログの表示についてもう少し

ところで、farfarsideKさんのブログは、Macのブラウザで見ると、safari系のブラウザでは問題ありませんが、firefoxだと写真（実際は本文の幅）がかなり狭く、通常のモニタでは、表示を画面いっぱいに広げても、写真が半分ぐらい切れています。
これは「スキン変更」の「スキン編集」の「■ HTML編集」の「メイン画面編集」の設定だと思いますが

＜table align=center border=0 cellpadding=0 cellspacing=0 width=60%＞

の表示幅60%という値のせいです。
もしデザイン的に問題がないと思われるのであれば、これを90%〜100%に変更されると、firefox系のブラウザでも写真がきれいに表示されると思います。
それから、また「■ CSS編集」の設定に戻りますが、

/* +++++++++++ menu 要素 +++++++++++ */
.menu{width:１５０px;

この１５０が全角文字になっているのでこの値は反映されていません。
半角文字で150pxにとれるか、それが反映された幅がおかしければ再度変更されるとよいと思います。

出過ぎたことまで書いておりましたらお許し下さい。
今後ともよろしくお願いします。