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年08月30日

マイカー?

my_car.jpg

なにやらのどかな風景にも見えますが、一応東京です(^-^;
てか、実は大学の構内です。


農学部の敷地なので、緑がとにかく豊富です。
写真を撮った横は牧場で牛がいるみたいですが、残念ながら今日はいませんでした。

実は最近チャリを買いまして、そうこの写真の真ん中に写ってるのです。
駅まで歩いても10分かからないし、たいがい電車かバスで移動なので必要性を感じなかったのですが、最近行きはじめた仕事先が近所で便利だと思ったのが大間違い!
バスは時間通りに来ないし、バス降りてから徒歩15分・・・とっくに新宿に着いてるよ(>_<)ってことで、急遽コンパクトな折りたたみ自転車を購入です。
今のとこ週2回ぐらいしか乗らないので充分かなって感じです。

久しぶりに乗るチャリは気持ちいいんですが、車がいっぱいのとこはやっぱり怖いので大学構内や住宅地など裏道x2めざして走りまわってます(^-^)/。
で、気がついたんですが住宅街の暴走族は実はゴミ収集車ではないかと・・・
いやいや、なかなかのスピードっぷりなのですよ。
「右へ曲がります」なんてアナウンス流してるんですが、もう曲がり終わってるし(>_<)
カーブでもスピード落ちてないんだからスゴイ!
何台も立て続けに後ろから来られると正直ビビリます。
表通りのほうが安全だったりして。。。
by 杏 at 08月30日 | Comment(0) | TB(0) | 日記

2005年08月28日

テンプレ屋さん

ながーーーいこと放置してたのですが、やっとこさ本格始動させたいと思います(^-^;。
実はちまちまとテンプレ作ってたりしたのですが、同じやるならXHTMLとCSSについて勉強したいなと思って・・・、いっそのことサラから作っちゃえ !ってことでサイトとして作っちゃいました。
上のメニューでサイトと一体化してます。
テンプレートの他にもリストマークに使えそうなアイコンや写真など素材も置いてあります。
順次、増殖中・・・ということで、よろしくお願いします。
by 杏 at 08月28日 | Comment(0) | TB(0) | テンプレ・素材

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年以上新しい記事の投稿がないブログに表示されております。