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

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

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

スタイルを選ぶだけ「CSSボタン」デザイン１２種以上！

コンバージョンボタンも画像いらず。CSSだけで作成できます。テーマChill付属のCSSを使うと次のようになります！

3種類以上のスタイルを組み合わせ可能！

上記だけでも既に１０種類のCSSボタンを利用できますが、複数のCSSを組み合わせることにより、さらにカスタマイズすることが可能です。

「class=”q_button bt_yellow”」のように”半角 空白”で区切ることでclassを複数指定することができます。もちろん3種類指定することもできるので、以下のようなCSSボタンも作成できます。

中央揃えや左寄せも自由自在

さらに、「中央揃えにしたい」「右寄せしたい」時でも、TCDテーマには便利なCSSが備わっているので、以下のように可能です。

このように手軽にCSSボタンを作成できます。CSSボタンは読み込みに時間がかからないため、画像ボタンを利用するより表示が速く、ユーザビリティが改善するはずです。

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

/* ----------------------------------------------------------------------
 button - CSSボタンのスタイル
---------------------------------------------------------------------- */
.q_button { min-width:200px; max-width:90%; background-color:#535353; display:inline-block; vertical-align:middle; padding:.6em 1.3em .5em; font-weight:400; font-size:100%; color:#fff; margin:0; text-decoration:none; text-align:center; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; transition:all 0.3s ease-in-out 0s; box-shadow:0 1px 3px rgba(0,0,0,.15); }
.q_button:hover, .q_button:focus { text-decoration:none; color:#fff; background-color:#7d7d7d; box-shadow:0 2px 2px rgba(0,0,0,.15) inset; }
/* Button option */
.rounded { border-radius:6px; }
.pill { border-radius:50px; }
.sz_full { min-width:100px; max-width:100%; display:block; font-size:110%; padding:1em 1.5em .9em; }
.sz_l { min-width:350px; max-width:90%; font-size:110%; padding:.8em 1.5em .7em; }
@media screen and (max-width: 479px) {
  .sz_l { min-width:320px; max-width:95%; }
}
.sz_s { min-width:100px; max-width:90%; font-size:85%; padding:.4em 1em .3em; }
.bt_red{ background:#c01f0e; color:#fff; }
.bt_red:hover, .bt_red:focus { background-color:#d33929; color:#fff; }
.bt_yellow{ background:#f1c40f; color:#fff; }
.bt_yellow:hover, .bt_yellow:focus { background-color:#f9d441; color:#fff; }
.bt_blue{ background:#2980b9; color:#fff; }
.bt_blue:hover, .bt_blue:focus { background-color:#3a91c9; color:#fff; }
.bt_green{ background:#27ae60; color:#fff; }
.bt_green:hover, .bt_green:focus { background-color:#39c574; color:#fff; }
 

他にも

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

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

次はフォントサイズのCSS機能について紹介します。