このサイトでは、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:1em030px;padding:1em1.5em;line-height:2;border:1pxsolid#cdcdcd; background:#fcfcfc; box-shadow: 0 1px 3px 0 rgba(195,195,195,0.3); } .well3{margin:2em02.5em;padding:1em1.5em;line-height:2.0;border:1pxdashed#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スタイルがテーマに組み込まれています。
次はテーブルについて紹介します。
コメント