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

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

スポンサーリンク

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

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

テーマ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が定義されています。

他にも

  • 見出し
  • CSSボタン
  • テーブル
  • カードリンク
  • フォントサイズ
  • フォントカラー
  • 背景色
  • 配置
  • 回り込み
  • 画像リンクマウスオーバー時の不透明度
  • テキストスタイル
  • 余白

など、CSSを定義しなおす必要がないくらい様々なCSSスタイルがテーマに組み込まれています。

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

コメント

お知らせ

羽織紐を手作りしてます!よろしければご覧ください!
  • 天然石 マグネット式羽織紐 #01 / 着物小物 / ブルーグリーン / 水晶
    天然石 マグネット式羽織紐 #01 / 着物小物 / ブルーグリーン / 水晶
  • 天然石 マグネット式羽織紐 #09 / 着物小物 / グレー / 高品質ルチルクォーツ
    天然石 マグネット式羽織紐 #09 / 着物小物 / グレー / 高品質ルチルクォーツ
  • 天然石 マグネット式羽織紐 #04 / 着物小物 / ネイビー
    天然石 マグネット式羽織紐 #04 / 着物小物 / ネイビー

お知らせ

羽織紐を手作りしてます!よろしければご覧ください!
  • 天然石 マグネット式羽織紐 #01 / 着物小物 / ブルーグリーン / 水晶
    天然石 マグネット式羽織紐 #01 / 着物小物 / ブルーグリーン / 水晶
  • 天然石 マグネット式羽織紐 #09 / 着物小物 / グレー / 高品質ルチルクォーツ
    天然石 マグネット式羽織紐 #09 / 着物小物 / グレー / 高品質ルチルクォーツ
  • 天然石 マグネット式羽織紐 #04 / 着物小物 / ネイビー
    天然石 マグネット式羽織紐 #04 / 着物小物 / ネイビー
タイトルとURLをコピーしました