【ワードプレス テーマChillに標準装備】便利すぎるCSSと表示サンプル – 囲み枠編

このサイトでは、TCDのWordPressテンプレートChillをほとんどカスタマイズせずに利用しています。
Chillというテーマ、最初からデフォルトで入っているCSSの気の利き方が半端ないので、一部紹介したいと思います。

カスタマイズ不要！デフォルトCSSでできること

囲み枠のスタイルを選ぶだけできるデザイン７つ

テーマChill付属のCSSを使うと次のようになります！

複数の囲み枠スタイルも組み合わせ可能！

「class=”well2 wl_green”」のように”半角 空白”で区切り、classを複数指定すると以下のような囲み枠を作ることができます。

色合いや丸みなども使いやすく配慮されていて、とても便利に利用しています。

ワードプレステーマChillのstyle.cssには、次のようなCSSが定義されています。

/* ----------------------------------------------------------------------
 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スタイルがテーマに組み込まれています。

次はテーブルについて紹介します。