【CSS編集】小変更しました。

見た目は殆ど変わっていないと思いますが、記事タイトル部と画像部の処理を小変更しました。

記事タイトル部

/* エントリータイトル囲み */ .etTitleKazari { border-top: 1px solid #57ACD5; padding: 5px; border-bottom: 1px dotted #57ACD5; margin: 0px 0px 0px 0px; }

えっと「padding: 5px,0px;」となっていたのを「padding: 5px;」に変更しました。
どういうことかというと、最初の設定では上下を5pxあけて左右は0pxという指定なんですが、全周囲5px空けるという指定にしたということです。

なぜこういうことをしたかというと、記事タイトルが左に寄りすぎて文字によっては少し切れてしまうことがあった為です。

画像部

/* エントリー内画像レイアウト用 */ .etBody img { margin: 5px ; padding: 0px; float:; border: double 4px #57ACD5; background-color:#F4F7FF; }

/* エントリー内の画像位置 */ .etImage { margin: 5px ; padding: 0px; float:; border: double 4px #57ACD5; background-color:#F4F7FF; }

/* エントリー内の画像位置（一覧） */ .thumbnail { margin-right: 5px ; padding: 0px; float:left; border: double 4px #57ACD5; background-color:#F4F7FF;; }

先日、コチラの記事で画像に枠をつけましたが、カメラテンプレートのような二重線にした方が見やすそうだったのでboderを二重線に変えました。これによりpaddingの指定が意味をなしませんので2pxから0pxに変更。

えっと、苦労したのが幅の指定ですね。最初「border: double 1px #57ACD5;」って指定したんですが、線がなくなっちゃったんですよ。原因が全然わからなかったんですが、しばらくして気付きました。外側の線と内側の線全体の幅を指定するんですね。1pxだと外側の線と内側の線が重なってしまって表示されないんですね。2pxだと、外側の線と内側の線がくっついてしまうので2pxの実線と同じに見えます。つまりdoubleを使うときは3px以上を指定しないとちゃんと二重線に見えないんですねぇ。

3pxだと間の白が少ないと感じたので、4pxを指定。外側1px、空白2px、内側1pxになっていますね。

いかがでしょうか？

---

追記
OperaとFirefoxでは4pxだと、外側1px、空白2px、内側1pxになるんですが、IEのみ外側2px、空白1px、内側1pxになっている様子。

あまりに気持ち悪い…。

IEのシェアが高い以上、無視するわけには行きませんので泣く泣く3pxにしました。

変更前

border: double 4px #57ACD5;

変更後

border: double 3px #57ACD5;

ブラウザによって処理が異なるのは勘弁して欲しい…。