記事欄 & サイドバー枠の角を丸くする

記事欄 & サイドバー枠の角を丸くしたい！

ついでに、枠に影もつけたい！

そんなカスタマイズの方法についてのお話しﾃﾞｽ。

記事欄の角を丸くする & 影をつける

/* 記事欄に背景色と影*/ 
.entry-inner { 
background-color:#EDE1D6; 
padding:5px;
-moz-box-shadow: 1px 3px 7px 2px #928178;
-webkit-box-shadow: 1px 3px 7px 2px #928178;


box-shadow: 1px 3px 7px 2px #928178; /* 記事欄枠に影*/ 
border-radius: 10px;/* 記事欄枠の角を丸くする*/ 
}

上記のコードを デザイン ▶ カスタマイズ ▶ 「CSS」に貼り付けます。

box-shadow: 1px 3px 7px 2px #928178; /* 記事欄枠に影*/ 

 box-shadow の px 数値を変更すれば、影の 幅 を変更できます。

#の数値を変更すれば、影の 色 を変更できます。

border-radius: 10px;/* 記事欄枠の角を丸くする*/ 

 border-radius は 角を丸くしてくれます。

px 数値を変更することで、角の丸み 具合を変更できます。

サイドバー枠の角を丸くする & 影をつける

/* サイドバーに背景色と影 */
#box2-inner {
 background-color:#EDE1D6;
 padding:5px;

-moz-box-shadow: 1px 3px 7px 2px #928178;
-webkit-box-shadow: 1px 3px 7px 2px #928178;

box-shadow: 1px 3px 7px 2px #928178;/* サイドバーに影*/ 
border-radius: 10px;/* サイドバーの角を丸くする*/
}

上記のコードを デザイン ▶ カスタマイズ ▶ 「CSS」に貼り付けます。

box-shadow: 1px 3px 7px 2px #928178;/* サイドバーに影*/ 

 box-shadow の px 数値を変更すれば、影の 幅 を変更できます。

# の数値を変更すれば、影の 色 を変更できます。

border-radius: 10px;/* サイドバーの角を丸くする*/

 border-radius は 角を丸くしてくれます。

px 数値を変更することで、角の丸み 具合を変更できます。

角が丸くなって優しい雰囲気になりました！((( *´꒳`* ))) ﾎﾟﾜﾜｰﾝ

カラーコードは、▼・ｪ・▼にっき。では毎度お馴染みのコチラ ↓

www.colordic.org

和色大辞典さまﾃﾞｽ！

柔らかい印象の色がたくさんあるよ♪٩(ˊᗜˋ*)و

いつもお世話になっております！

ってところで、今日はおしまいﾃﾞｽ！

ﾟ*｡.ღ ⊹⊱  ￡ονё & βＬёｓｓ уｏц  ⊰⊹ ღ.｡*ﾟ

Thank you.

I love you.