▼・ェ・▼にっき。

ゲームをこよなく愛する▼・ェ・▼のメインBlogデス

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

 

f:id:bless-you:20170522004700j:plain

 

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

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

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

 

 

 

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

 

/* 記事欄に背景色と影*/ 
.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

 

和色大辞典さまデス!

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

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

 

 

ってところで、今日はおしまいデス!

 

 

゚*。.ღ ⊹⊱  £ονё & βLёss уoц  ⊰⊹ ღ.。*゚

 

Thank you.

I love you.