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

menu

ゆるりの足あと

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

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

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

見出しのスタイルを選ぶだけできるデザイン10種

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

表示サンプル

<h3 class=”style3a”>見出しデザイン①</h3>

<h3 class=”style3b”>見出しデザイン②</h3>

<h4 class=”style4a”>見出しデザイン③</h4>

<h4 class=”style4b”>見出しデザイン④</h4>

<h5 class=”style5a”>見出しデザイン⑤</h5>
<h5 class=”style5b”>見出しデザイン⑥</h5>
<h6 class=”style6″>見出しデザイン⑦</h6>
<h6 class=”news_headline1″>見出しデザイン⑧</h6>
<h6 class=”news_headline2″>見出しデザイン⑨</h6>
<h6 class=”balloon”>見出しデザイン⑩</h6>

marginやpaddingもほどよく調整されていて、特にテーマをいじらなくても見やすいデザインに仕上がります。

ワードプレステーマChillのstyle.cssの中身を見ると次のようなCSSが定義されていました。

他にも

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

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

次は囲み枠について紹介します。

関連記事

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

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

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

過去に作成したサイト集