記事エリアの仕切り線を角丸・影付きにする

こんにちは。
『やさしいブログの作り方』の松田です。

これまで記事内の囲み枠を角丸にする方法などをご紹介してきました。

そのやり方を応用すると、囲み枠以外にも記事エリアの仕切り線やサイドバーの仕切り線も角丸にすることができます。



もともとはこんな感じで枠の角は角張っています。




カスタマイズ後は角が丸くなってかつ、右の枠線に影がつきます。


今日はこの、「記事エリアの囲み枠を角丸にして、かつ立体的に見えるように影付きにする」カスタマイズをご紹介しますね。

ＣＳＳの編集の最後に以下の記述を追記します。

.skinArticle, .skin-blogMainInner{
border:1px solid #999999; !important;
box-shadow: 3px 3px 3px #cccccc;
border-radius:10px;
}

※ＣＳＳ編集用デザインスキンのカスタマイズになります。

１０の値を大きくすると丸みが増します。

また、赤字の#999999を好みのカラーコードに変更すると枠線の色が変わります。＾＾


最後までお読みいただきありがとうございました。

お知らせ

ご登録頂くと、ＬＩＮＥ＠スタートアップセミナーをプレゼント！
やさしいブログのＬＩＮＥ＠のご登録はこちらから

これからブログを頑張っていきたい！ まずは基本から。
やさしいブログづくりのための、やさしいメール講座

初めてでも安心して始められるメルマガ作成ガイド。
メルマガスタートアップガイド　YouTubeにて配信中

ブログが持つ魅力や可能性を私の言葉で綴りました。
書籍はこちらのオンラインショップのみで販売中です！