賢威7でウィジェットコンテンツに枠線と影をつける方法

スクリーンショット 2016-02-08 11.25.53

 

今回は賢威7のウィジェットコンテンツに枠線と影をつけて立体的に見せる方法をご紹介します。

デフォルトの状態では平面になっているので、立体感をつけることで目立たせる効果もあり、見栄えもよくなります。

⇩賢威についての詳しい情報は下記から⇩
賢威公式サイト
 

ウィジェットコンテンツに枠線と影をつける方法

効果を付ける前と後で比較してみると一目瞭然です。

スクリーンショット 2016-02-08 11.32.24

変更後はウィジェットに枠線と影がついて立体感が出ています。

また変更前と比べてみても明らかに見やすくなっています。

 

付け加わえるCSSコードは以下の通りです。

.widget-conts,.post {
border: solid 1.5px #A9A9A9;
box-shadow: 3px 3px 6px rgba(0,0,0,0.4);
padding: 0.5em;
margin-bottom: 1.0em;
border-radius: 5px;
}

これをbase.css内に記述していきます。

(ダッシュボード⇒外観⇒⇒base.css)

 

場所は一番下が見やすくていいでしょう。

スクリーンショット 2016-02-08 11.25.13

 

CSSコードを解説

簡単に今回使用したCSSコードの解説していきます。

 

border

コンテンツ周りの枠線の種類や太さ、色を指定できます。

 

solid:実線

1.5px:枠線の太さ

#〜:枠線の色

 

box-shadow

コンテンツに付ける影の設定です。

 

3px 3px 6px

左の数字:右側へのずれ

真ん中の数字;下側へのずれ

右の数字:影のぼかし具合

 

padding

paddingというのは『余白』という意味です。

つまり間隔を自由に変えれるので、ここの数字を変えれる事で内側の余白を調整することができます。

 

margin-bottom

こちらも余白を調整するコードですが、『margin』は外側の余白を調整できます。

 

border-radius

枠線の角を丸くするコードになります。

丸くしたくない場合は記述不要です。

賢威7カスタマイズ大図鑑へ戻る

副業から月収10万円以上を安定的に稼ぐ力を身につける無料メルマガ講座

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-10-16-37-15

一緒にビジネスや遊びを全力でシェアしよう!お気軽に申請どうぞ!

スクリーンショット 2016-08-17 0.43.46

One Response to “賢威7でウィジェットコンテンツに枠線と影をつける方法”

  1. chimi より:

    昨日賢威をようやく取り入れ、検索しているときに、このサイトをみつけました。とてもわかりやすく解説されているので、助かります。
    またみにきます。

コメントを残す

自己紹介・挨拶がないコメントに関しては返答を控えさせて頂きます。
サブコンテンツ

一緒にビジネスや遊びを全力でシェアしよう!お気軽に申請どうぞ!

スクリーンショット 2016-08-17 0.43.46

キラの公式LINE@

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-29-7-40-42

このページの先頭へ