記事欄 & サイドバー枠の角を丸くしたい！
ついでに、枠に影もつけたい！
そんなカスタマイズの方法についてのお話しﾃﾞｽ。
記事欄の角を丸くする & 影をつける
/* 記事欄に背景色と影*/
.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 数値を変更することで、角の丸み 具合を変更できます。
角が丸くなって優しい雰囲気になりました！((( *´꒳`* ))) ﾎﾟﾜﾜｰﾝ
カラーコードは、▼・ｪ・▼にっき。では毎度お馴染みのコチラ ▼
和色大辞典さまﾃﾞｽ！
柔らかい印象の色がたくさんあるよ♪٩(ˊᗜˋ*)و
いつもお世話になっております！
今回は、この辺でお終いです。
最後までお付き合いくださいまして、ありがとうございました。
情報をｼｪｱしてくださる先人の皆々様に感謝。
どなたさまも素晴らしい Blog Life を楽しまれますように❤
愛と祝福を込めて･･ *ଘ(੭*ˊᵕˋ)੭* ੈ✩‧₊˚
ﾟ*｡.ღ ⊹⊱ 𝔏𝔬𝔳𝔢 & 𝔅𝔩𝔢𝔰𝔰 𝔶𝔬𝔲 ⊰⊹ ღ.｡*ﾟ
𝔱𝔥𝔞𝔫𝔨 𝔶𝔬𝔲.
𝔦 𝔩𝔬𝔳𝔢 𝔶𝔬𝔲.
