賢威7の影枠囲み線で記事を装飾する方法!CSS記述あり!

スクリーンショット 2016-02-17 21.01.24

 

 

今回ご紹介するのは記事(文章)を影枠囲み線で装飾する方法です。

これは賢威7のbase.cssにコードを記述してそれを呼び出す感じに設定していきます!

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

文書を影枠囲み線で装飾しよう!

 

ちなみに影枠囲み線で装飾すると以下のような感じになります。

スクリーンショット 2016-02-17 21.03.24

 

CSS記述するコードは

 

.wakukage {
border:1px solid #c0c0c0;
width:98%;
min-height:150px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-moz-box-shadow:1px 1px 3px #c0c0c0;
-webkit-box-shadow:1px 1px 3px #c0c0c0;
box-shadow:1px 1px 3px #c0c0c0;
background-color:#f7f7f7;
margin:10px;
padding:10px;
}

 

賢威7のbase.cssの最後にでも記述しておきましょう!

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

 

コードの記述が終われば、変更保存して終了です。

 

あとは記事内で装飾したい時にこれを呼び出すだけです。

以下のコードで簡単に影枠囲み線の装飾をすることができます。

 

<div class=”wakukage”>文字を入力</div>

 

コードはいちいち書くのが面倒なのでAdd Quicktagでエディターにボタンを作ってしまいましょう!

このようにかんたんに装飾することができました。

 

関連記事:賢威7の見出しデザインカスタマイズ30選まとめ!

 

 
賢威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

コメントを残す

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

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

スクリーンショット 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

このページの先頭へ