css&htmlちょー初心者による、ちょー初心者のためのらぽの独り言ブログ

あんまり参考にしないでくださいね(^ω^ )
僕も初心者ですからwwwwwwうえwwww


テーマ:
おおおおおお!!!
俺sugeeeeeeeeeee







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


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



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


今回は




/* (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;の下に
ぱぱっと付け加えてくださいな


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


/* 火きつね */
これはファイアフォックス(でしたっけ?w)
に対しての命令
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;



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







まぁ、私も初心者なのでkwskは知りません(逃
故に質問されてもくまっちゃいます^p^





$css&htmlちょー初心者による、ちょー初心者のためのらぽの独り言ブログ-まぁるく
(くろーむで確認済みだぜっと)





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




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


読者登録してね
相互読者募集してるよー






AD
いいね!した人  |  コメント(2)  |  リブログ(0)

AD

Ameba人気のブログ

Amebaトピックス

      ランキング

      • 総合
      • 新登場
      • 急上昇
      • トレンド

      ブログをはじめる

      たくさんの芸能人・有名人が
      書いているAmebaブログを
      無料で簡単にはじめることができます。

      公式トップブロガーへ応募

      多くの方にご紹介したいブログを
      執筆する方を「公式トップブロガー」
      として認定しております。

      芸能人・有名人ブログを開設

      Amebaブログでは、芸能人・有名人ブログを
      ご希望される著名人の方/事務所様を
      随時募集しております。