このサイトでは、TCDのWordPressテンプレートChillをほとんどカスタマイズせずに利用しています。
Chillというテーマ、最初からデフォルトで入っているCSSの気の利き方が半端ないので、一部紹介したいと思います。
カスタマイズ不要！デフォルトCSSでできること
囲み枠のスタイルを選ぶだけできるデザイン７つ
テーマChill付属のCSSを使うと次のようになります！
表示サンプル
<div class=”well”>囲み枠デザイン①</div>
<div class=”well2″>囲み枠デザイン②</div>
<div class=”well3″>囲み枠デザイン③</div>
<div class=”wl_red”>囲み枠デザイン④</div>
<div class=”wl_yellow”>囲み枠デザイン⑤</div>
<div class=”wl_blue”>囲み枠デザイン⑥</div>
<div class=”wl_green”>囲み枠デザイン⑦</div>
複数の囲み枠スタイルも組み合わせ可能！
「class=”well2 wl_green”」のように”半角 空白”で区切り、classを複数指定すると以下のような囲み枠を作ることができます。
表示サンプル [well]+[青色]
<div class=”well wl_blue”>囲み枠デザイン⑧</div>
表示サンプル [well2]+[緑色]
<div class=”well2 wl_green”>囲み枠デザイン⑨</div>
色合いや丸みなども使いやすく配慮されていて、とても便利に利用しています。
ワードプレステーマChillのstyle.cssには、次のようなCSSが定義されています。
|
1 2 3 4 5 6 7 8 9 10 |
/* ---------------------------------------------------------------------- flame - 囲み枠 ---------------------------------------------------------------------- */ .well { min-height:20px; padding:19px; margin-bottom:20px; background-color:#f5f5f5; border:1px solid #e3e3e3; border-radius:4px; -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.05); box-shadow:inset 0 1px 1px rgba(0,0,0,0.05); } .well2 { margin:1em 0 30px; padding:1em 1.5em; line-height:2; border:1px solid #cdcdcd; background:#fcfcfc; box-shadow: 0 1px 3px 0 rgba(195,195,195,0.3); } .well3 { margin:2em 0 2.5em; padding:1em 1.5em;line-height:2.0; border:1px dashed #cdcdcd; background:#fcfcfc; box-shadow: 0 1px 3px 0 rgba(195,195,195,0.3); } .wl_red { background-color: #f2dede; border-color: #ebccd1; color: #a94442; } .wl_yellow { background-color: #fcf8e3; border-color: #faebcc; color: #8a6d3b; } .wl_blue { background-color: #d9edf7; border-color: #bce8f1; color: #31708f; } .wl_green { background-color: #dff0d8; border-color: #d6e9c6; color: #3c763d; } |
他にも
- 見出し
- CSSボタン
- テーブル
- カードリンク
- フォントサイズ
- フォントカラー
- 背景色
- 配置
- 回り込み
- 画像リンクマウスオーバー時の不透明度
- テキストスタイル
- 余白
など、CSSを定義しなおす必要がないくらい様々なCSSスタイルがテーマに組み込まれています。
次はテーブルについて紹介します。
コメント