このサイトでは、TCDのWordPressテンプレートChillをほとんどカスタマイズせずに利用しています。Chillというテーマ、最初からデフォルトで入っているCSSの気の利き方が半端ないので、一部紹介したいと思います。
カスタマイズ不要!デフォルトCSSでできること
スタイルを選ぶだけ「CSSボタン」デザイン12種以上!
コンバージョンボタンも画像いらず。CSSだけで作成できます。テーマChill付属のCSSを使うと次のようになります!
<a class=”q_button” href=”#”>CSSボタン デザイン①</a>
<a class=”q_button rounded” href=”#”>CSSボタン デザイン②「丸い角」</a>
<a class=”q_button pill” href=”#”>CSSボタン デザイン③「錠剤型」</a>
<a class=”q_button sz_full” href=”#”>CSSボタン デザイン④「最大」</a>
<a class=”q_button sz_l” href=”#”>CSSボタン デザイン⑤「大」</a>
<a class=”q_button sz_s” href=”#”>CSSボタン デザイン⑥「小」</a>
<a class=”q_button bt_red” href=”#”>CSSボタン デザイン⑦「赤色」</a>
<a class=”q_button bt_yellow” href=”#”>CSSボタン デザイン⑧「黄色」</a>
3種類以上のスタイルを組み合わせ可能!
上記だけでも既に10種類のCSSボタンを利用できますが、複数のCSSを組み合わせることにより、さらにカスタマイズすることが可能です。
「class=”q_button bt_yellow”」のように”半角 空白”で区切ることでclassを複数指定することができます。もちろん3種類指定することもできるので、以下のようなCSSボタンも作成できます。
<a class=”q_button pill sz_full bt_red” href=”#”>CSSボタン デザイン⑪</a>
中央揃えや左寄せも自由自在
さらに、「中央揃えにしたい」「右寄せしたい」時でも、TCDテーマには便利なCSSが備わっているので、以下のように可能です。
このように手軽にCSSボタンを作成できます。CSSボタンは読み込みに時間がかからないため、画像ボタンを利用するより表示が速く、ユーザビリティが改善するはずです。
ワードプレステーマChillのstyle.cssには、次のようなCSSが定義されています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | /* ---------------------------------------------------------------------- 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:1em1.5em.9em;} .sz_l{min-width:350px;max-width:90%;font-size:110%;padding:.8em1.5em.7em;} @mediascreenand(max-width:479px){ .sz_l{min-width:320px;max-width:95%;} } .sz_s{min-width:100px;max-width:90%;font-size:85%;padding:.4em1em.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機能について紹介します。
コメント