ゆるく働き ゆるく生きる ゆるいだれかの日記

menu

ゆるりの足あと


【ワードプレス テーマ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スタイルがテーマに組み込まれています。

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

少しはお役に立てましたか?

役に立つかも?と思われた方はぜひシェアを!

関連記事

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

過去に作成したサイト集