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
この記事へのコメント
はじめまして。
TBさせていただきました。
ポラロイド風にしたいけど、どうしてもできなくて、半ばあきらめかけていたときにこちらにたどり着きました。
説明がわかりやすくて、私のブログもばっちりポラ風になりました!
どうもありがとうございました。
Posted by もちやっこ at 2005年09月10日 17:20
はじめまして、お役にたててとっても嬉しいです。
そしてTBありがとうございました。
Posted by 杏 at 2005年09月11日 00:41
はじめまして。
検索からこちらへお伺いいたしました。
もちやっこさんもお書きになってますが、説明がとてもわかりやすかったです。
TBさせていただきます。
お世話になりました。ありがとうございました。
Posted by minako at 2005年09月21日 02:57
minakoさん、はじめまして。
ポラ風にすると写真の雰囲気も違って感じるから不思議ですよね。
TBありがとうございました。
Posted by 杏 at 2005年09月22日 00:40
はじめまして
写真をポラロイド風にしたかったのですが
なかなかできずにあきらめかけてたところ、
こちらの記事でちゃんと表示できるようになりました。
すごく説明もわかりやすかったです。
TBさせていただきます。
ありがとうございました。
Posted by 刹那 at 2005年10月08日 19:41
はじめまして。
「Seesaa」「ポラロイド風」で検索して、こちらに辿り着きました。
とても分かりやすい説明で、ずっと憧れていたポラロイド風に出来てとても嬉しいです!
ありがとうございました。
配布されているテンプレートもとても素敵です!
Posted by トロロ at 2005年11月16日 15:00
はじめまして。
写真にワクをつけたくて「ブログ」「写真に枠をつける」でここにたどり着きました。
お蔭様で出来ました、ありがとうございます。
(ブログはJUGEMですが、この記事の内容そのままでいけました)
Posted by d400x at 2006年01月25日 01:12
Seesaa・ヨ・・ーツミア?、ホ・ン・鬣・、・ノシフソソノ?ヒ、ハ、[]荀??、?鯛?キ、ニ、、、[]熙?オ、キ、ニ、ウ、ウ、リテゥ、?螟ュ、゙、キ、ソ。」、ネ、ニ、篳ス、熙荀ケ、、タ篶タ、ヌ。「・ェ・?チ、ハサ荀ヌ、篶オサ ?ョ、キソ[]イ、[]ウ、ネ、ャ、ヌ、ュ、゙、キ、ソ。」
エカシユ。「エカシユ、ヌ、ケ。ェ、「、熙ャ、ネ、ヲ、エ、カ、、、゙、ケ
Posted by ウ、イニサメ at 2006年06月19日 03:28
初めましてnekobabaと申します。
ポラ風にしたくて、彷徨っていましたらこのHPに出会いました。
お陰さまで、やっと写真をポラ風にする事が出来ました。
ありがとうございました。
Posted by nekobaba at 2006年09月14日 15:48
こんばんわ、写真に枠をつける方法、その他のサイトさんでも紹介されてたんですが、どうもうまくいきませんでした・・・
でもこちらの方法でやったらあっさりきれいに成功しました!!
本当に本当にありがとうです!
Posted by nana at 2007年01月17日 22:11
はじめまして。
ただいまサイトリニューアル中で、
大変助かりました。
まだ完成までもう少し時間がかかりそうですが、また良かったら一週間後くらいに、ホームページを見に来てください。
ありがとうございました。
Posted by 肖像画工房 at 2009年07月10日 21:32

目隠しさせられて、足の先から耳の裏まで全身舐められまくり!w
気持ちよすぎて、ちょっと口から泡出たわ!ぎゃははは!!

てか、毎回7万貰えるのは良いけど、こんなん続けてたらドMになってしまうてwww
↓↓↓↓↓↓
http://mn.dodonpa50.com/uht-t0f/
Posted by ジョナさん at 2010年01月01日 08:11

真珠みたいに真っ白なお股と桃色濡れマXコってのに
すげぇムラムラきて、ひたすら舐めまくったわwwwww

しかも「いっぱい舐めてくれたお礼♪」って5万渡されたし!!
クン二だけでこんな貰えんのかwwwww

このサイト
http://hotohototo.net/bmp/k3gc0vn/
Posted by じゃらんじゃらん at 2010年01月12日 07:38

初の逆¥やったけど、こんなスケベ女おるんかい!
どっちに入れる?ってチ ン コにお尻すりつけてきて
オレ、無我夢中で犯しまくってもうたわ!笑

しかも両穴に中 出 ししまくったのにめちゃ喜んでたでwww
http://toe.comoscomos.com/ct6x3yk/
Posted by パンダおやじ at 2010年01月16日 03:08

もー無理だってーーー!!!!(*≧д≦)
ティンティンしごくの止めてくれねぇし!!www
水鉄砲みたいにどっぴゅぅぅっ!って1mぐらい精子飛んじゃったよ!!!
確かに5万もらえたけど、まさかこんなプレイされるとはwwwww
http://buta-infr.net/ino/i-f50hu/
Posted by はるぞう at 2010年02月01日 06:01

まさかこの歳で女を抱いて金が貰えるとは!!
http://xabrina.net/don/-mm4v1i/
この前とか「おじさんのおちんちんきもちいいよぉ〜!」って23歳のコに言われちゃったぞ(笑)
初めは遊び半分だったけど、こりゃハマるわっ!!d(* ̄ー ̄*)b
Posted by 尻上がり親父 at 2010年02月11日 04:11

昨日はエヴァの綾波コスの子にヌキヌキしてもらってきた(笑)
小柄なレイたんに手コキやフェラしてもらっちゃって、もう。。。(*´д`*)ハァハァ
ここって毎回5万もらえるし、色んなタイプの子がいるから楽しすぎるぜw
http://nuda.pocket-m.net/xtp6vrq/
Posted by 健太くん at 2010年02月17日 04:06

おっさん童☆貞が15万ゲットォォォ!!!!
若いコに筆おろししてもらえるとかマジ勝ち組すぐるwwwww

ていうか女とやるって意外とカンタンなんだなwwww
最近じゃ俺のメタボディを武器に、おにゃのこハメまくりっすよ!(*゚∀゚)=3
http://goo.gl/q3XS
Posted by 余裕すぎわろたwww at 2010年10月02日 11:09

尺八してもらったけどありゃたまんねーな!!
ジュパジュパ凄い音させながら吸いつかれて、30秒で発射しちまった(笑)
しかもオレ、女にお任せして寝てただけなのに5マソも貰った件wwww
http://a14bem1.jp.takaoka.mobi/
Posted by 吸引力の変わらないただひとつの… at 2011年07月30日 05:46
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのTrackBack URL


写真をポラロイド風に表示させる
Excerpt: アップする写真をポラロイドっぽくしている方を時々見かけ、 私もやってみたい!と思いチャレンジしてみました。 CSSってなに?テンプレートって?とわけもわからずいろんなとこ
Weblog: relaxin’
Tracked: 2005-09-10 17:17

Seesaaにて・・・画像にポラロイド風枠をつけてみる
Excerpt: &amp;#63901;追記&amp;#63901; うわぁ~&amp;#63913;できたぁ~&amp;#63913;&amp;#63893; ここ数日、つけたくてつけたくてうずうずしてた..
Weblog: ***petit diary***
Tracked: 2005-09-21 03:04

ちびっとカスタマイズ
Excerpt: どうしても写真にポラロイド風の枠をつけたくって いろいろやってみたんだけど いまいちわからず・・・ 他のBLOGの記事を参考にCSSいじってみるも わからない・・・てかでないよ?って思って ..
Weblog: innocence
Tracked: 2005-10-08 19:38

ちびっとカスタマイズ
Excerpt: どうしても写真にポラロイド風の枠をつけたくって いろいろやってみたんだけど いまいちわからず・・・ 他のBLOGの記事を参考にCSSいじってみるも わからない・・・てかでないよ? アメブロで..
Weblog: innocence
Tracked: 2005-10-08 19:52

ポラロイド風のフレーム
Excerpt: yaplogで写真ブログやってるんだけど、そっちのテンプレートって いじれないから、(一部できる)ここのブログにやってみたよ。 だってかわいいんだもん。[:ラブラブ:] ブログカスタマイ..
Weblog: 29歳のしゅふlog volume2 ロリポブログ
Tracked: 2005-10-12 10:24

写真をポラロイド風にUPする
Excerpt: 写真をポラロイド風にUPする
Weblog: KALEIDO-SCOPE
Tracked: 2006-09-14 15:51
×

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