【猿でも】アメブロちょー初心者のためのスタイルシート簡単講座その２【わかるｗｗ】

おおおおおお！！！
俺sugeeeeeeeeeee







ごめん調子乗りました＾ｐ＾
はい、こんにちは


今日はブログ記事の背景を
四角から丸に変更する方法を書きますお
(私は角丸君ってよんでいます(ぇ)



まぁ、前回の記事を読んでない人は読んでねー


今回は




/* (3-6) 記事
--------------------------------------------*/

/* skinArticle 記事エリア */




このへんにちょっと色々付け加えただけです。


そんなわけで、デザインの変更→CSSの編集に行って




/* (3-6) 記事
--------------------------------------------*/

/* skinArticle 記事エリア */






この項目を探してください♪






/* (3-6) 記事
--------------------------------------------*/

/* skinArticle 記事エリア */
.skinArticle{
/* 注　ベースのcssに margin-bottom の記述有り */
padding:16px 0;
border:5px dotted #dddddd;



とのようになっていると思うので
(いや。私は少し弄ってるので皆様と少し違うかも)




border:5px dotted #dddddd;
この線の太さとか線色とか線に対しての命令の後ろに
新たに命令を加えるんよ



border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
/* さふぁり、くろーむ */
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
/* 火きつね */
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 20px;
-moz-border-radius-bottomright: 20px;



はい。↑これを
border:5px dotted #dddddd;の下に
ぱぱっと付け加えてくださいな


/* さふぁり、くろーむ */
これはサファリとクロームに対しての命令


/* 火きつね */
これはファイアフォックス(でしたっけ？ｗ)
に対しての命令
left-radiusとかtopleftは場所で
20pxでいうのは丸み具合よ


つまり・・
/* 火きつね */
-moz-border-radius-topleft: 20px;
左上に対しての命令

-moz-border-radius-topright: 20px;
右上に対しての命令

-moz-border-radius-bottomleft: 20px;
左下に対しての命令

-moz-border-radius-bottomright: 20px;
右下に対しての命令




pxはお好みで調整してほしい
ただ、プラウザ別で指定してあるので
どのプラウザでも同じように表示させるには・・



border-top-left-radius: 0px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
/* さふぁり、くろーむ */
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
/* 火きつね */
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 20px;
-moz-border-radius-bottomright: 20px;



みたいに数字を揃えることを推薦







まぁ、私も初心者なのでｋｗｓｋは知りません(逃
故に質問されてもくまっちゃいます＾ｐ＾





(くろーむで確認済みだぜっと)





ちなみに、記事の背景に背景を入れることも可能です。
こちらに関してはただいま調べ中です
でも、スタイルシート系のブログっていくらでもあるし
ぐぐればアメブロのブログ記事の背景に背景をつける方法なんて
簡単に出てくると思うおー(・3・)





ペタはのんびり返す派です(ごめんね)



相互読者募集してるよー