ここ連日雨ばっかりですが、８月おわりの空です。
何やら秋の空・・・という感じです。
さてさて、設定の仕方ですが
他のブログではかなりポピュラーな方法で、DEAR DAYSさんで紹介されているのですが、ここSeesaaで行うとIEでは写真のまわりに線が表示されるだけでうまくいきません。
これはボックスモデルと呼ばれるコンテンツをとり囲むborder, margin, paddingの関係の解釈？方法の違いからおきるものです。
IEも6.0で標準モードになってるのですが、文書型宣言ありのXHTML1.0を採用するとこれが後方互換モードになってしまうのです(>_<)。
簡単な対応策としてはXML宣言の部分を削除する・・・という方法がありますが、html的には問題ないと思うのですが、XMLとの連動でSeesaaの場合影響があるのかないのか、私にはとんとわからないので(^^;、基本ラインはふれないで対応しています。
CSS
現在使用してるスタイルシートに下記を追加します。
お好きなタイプだけでも大丈夫です。
/*写真風*/
.photo {
background: White;
padding: 6px;
border-width: 1px;
border-style: solid;
border-color: Silver Gray Gray Silver;
float: left;
}
/*ポラロイド風*/
.pora1 {
background-color: White;
border-color: #DCE3E3 #C1C1C1 #C1C1C1 #DCE3E3;
border-width: 2px;
padding: 10px 10px 50px 10px;
border-style: solid;
float: left;
}
/*ポラロイド風・背景画像つき*/
.pora2 {
background-color: White;
border-color: #DCE3E3 #C1C1C1 #C1C1C1 #DCE3E3;
border-width: 2px;
padding: 10px 10px 50px 10px;
border-style: solid;
float: left;
background-image: url(http://xxx.seesaa.net/image/xxx.gif);
background-position: 95% 100%;
background-repeat: no-repeat;
}
記事掲載時
<div class="photo">
アップロードした画像またはサムネイルのhtml文
</div><div style="clear : both ;"></div>
画像、サムネイル部分はSeesaaアップロード画面の「HTML」または「サムネイル」の「コピー」というところをクリックして貼り付ければＯＫです。
※それぞれのCSSには画像から記事部分のmarginを設定していません。
floatを使用しているためmarginを設定するとIEとその他のブラウザで表示が違ってしまうためです。
