2005年09月06日

写真に枠をつける

sky_050830.jpg
たとえば写真風に

sky_050830_l.jpg
sky_050830_l.jpg
こちらはサムネイルのポラロイド風
ここ連日雨ばっかりですが、8月おわりの空です。
何やら秋の空・・・という感じです。

さてさて、設定の仕方ですが


他のブログではかなりポピュラーな方法で、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>

class=photoの部分をpora1,pora2と変えれば枠が変わります。
画像、サムネイル部分はSeesaaアップロード画面の「HTML」または「サムネイル」の「コピー」というところをクリックして貼り付ければOKです。

※それぞれのCSSには画像から記事部分のmarginを設定していません。
floatを使用しているためmarginを設定するとIEとその他のブラウザで表示が違ってしまうためです。
by 杏 at 09月06日 | Comment(19) | TB(6) | カスタマイズとCSS

2005年05月02日

カスタマイズとDOCTYPE

ブログのカスタマイズという視点で無料ブログの比較をしてみたのですが、単にできるできないってことだけじゃなくて、文書型宣言もいろいろだったのですね。
ざっと見るとこんな感じです。

ブログhtmlcssDTD Ver.url宣言
SeesaaXHTML1.0 Transitional
ExciteXHTML1.0 Transitional
FC2HTML 4.01Transitional-
Livedoor記載なし-
Goo不可HTML 4.01Transitional-
ドブログ不可HTML 4.01Transitional-
ヤブログ一部可一部可HTML 4.01Transitional-
はてな一部可HTML 4.01Transitional-
ドリコム不可不可記載なし-
ココログ不可不可XHTML1.0 Transitional
アメブロ不可不可XHTML1.0 Transitional

で、これがどうした?って話しなんですが
続きを読む
by 杏 at 05月02日 | Comment(0) | TB(0) | カスタマイズとCSS

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。