[CSS]各記事を囲むborderに丸みを付けてあげた

こんばんわ。@MasterPeace_21です。
Blogを初めて9ヶ月が経ちました。始めはWordPress？なにそれ？みたいな感じで始めたのでCSSとかPHPとか全くもってわかりませんでした。

最近では、大分ここがこうなってるのね！ってコードを見ればわかるようになっては来ました。
しかし、自分でデザインを作成するなんて事は出来るわけが無いので、もちろんテーマを使っています。

テーマを使っていますけど、少しでも変えられる所は自分色に変えたいものです。
今まで、色々と変更を加えてきましたが、今回はコンテンツごとに囲っているborderに丸みを出したいと思い実践してみました。

元々、このテーマにはコンテンツごとに囲むborderはありませんでした。
なので、まずborderを書き加えました。テーマによって、CSSは変わってくる？ので自分の場合です。←ホントにわかってないｗ

私の最初の環境では、元々CSSでこうなっていました。これではTOPページで記事ごとの区切りがわかりにくいのでborderを書き加えました。
[CSS]
#content article {
padding:20px 30px 10px 30px;
display:block;
clear:both;
margin-bottom:40px;
}
[/CSS]

borderを追加

[CSS]
#content article {
border:solid 2px silver;
padding:20px 30px 10px 30px;
display:block;
clear:both;
margin-bottom:40px;
}
[/CSS]

これで、記事ごとに枠が出来て若干見やすくなって！！

当分の間、この状態でした。
でも何か堅苦しいなと思い始めて、このborderが丸く出来たらイイなと思い、探してみたところ出来るみたい。

なので、さっそく実践。

borderを丸く

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;

なんか、これを挿入すればいいみたい(^^)
めっちゃ簡単だった。

結果、CODEはこうなった。

#content article {
	-webkit-border-radius: 50px; //Safari,Chrome//
	-moz-border-radius: 50px;//Firefox//
	border:solid 2px silver;
	padding:20px 30px 10px 30px;
	display:block;
	clear:both;
	margin-bottom:40px;
}

若干、フンワリしたかな？ｗ
そしたら、何かborderの中の色を換えたら、もっと見やすくなるかなと思い。backgroundを指定してみました。

記事内の背景を変更

#content article {
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border:solid 2px silver;
	background: #fff; //白に//
	padding:20px 30px 10px 30px;
	display:block;
	clear:both;
	margin-bottom:40px;
}

しかし、想像以上にブサイクに・・・・

なので、これは辞めました。

IEでは表示できない

InterExporerでは表示は出来ないみたいなんですね。
やろうと思うと、色々面倒そう。最近ではIEユーザーは少ないですし・・・IEユーザーさんゴメンナサイm(__)m

追記：
IE9でも普通に表示できました・・・(*´ω｀*)
これで、完璧だ！！

#content article {
	border-radius: 50px;//IE//
	-webkit-border-radius: 50px; //Safari,Chrome//
	-moz-border-radius: 50px;//Firefox//
	border:solid 2px silver;
	padding:20px 30px 10px 30px;
	display:block;
	clear:both;
	margin-bottom:40px;
}

そぅそぅ、IEで確認した時に気づいたのですが、何故か記事の画像が表示されていないことに気づいたんです。
border変えているときにミスったかと思って、確認してみるとわからず。

そしたら原因は画像を貼り付けているcodeに問題があったみたいです。

僕の記事の画像は全てFlickrにUPしています。なので@feelingplaceさんのFlickr2htmlを使わせてもらっています。

ブックマークレット | Feelingplace