【ワードプレステーマChillに標準装備】便利すぎる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; }

/* ----------------------------------------------------------------------

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機能について紹介します。

お知らせ

羽織紐を手作りしてます！よろしければご覧ください！

天然石マグネット式羽織紐 #01 / 着物小物 / ブルーグリーン / 水晶
天然石マグネット式羽織紐 #09 / 着物小物 / グレー / 高品質ルチルクォーツ
天然石マグネット式羽織紐 #04 / 着物小物 / ネイビー

お知らせ

羽織紐を手作りしてます！よろしければご覧ください！

天然石マグネット式羽織紐 #01 / 着物小物 / ブルーグリーン / 水晶
天然石マグネット式羽織紐 #09 / 着物小物 / グレー / 高品質ルチルクォーツ
天然石マグネット式羽織紐 #04 / 着物小物 / ネイビー