このサイトでは、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が定義されています。
他にも
- 見出し
- CSSボタン
- テーブル
- カードリンク
- フォントサイズ
- フォントカラー
- 背景色
- 配置
- 回り込み
- 画像リンクマウスオーバー時の不透明度
- テキストスタイル
- 余白
など、CSSを定義しなおす必要がないくらい様々なCSSスタイルがテーマに組み込まれています。
次はフォントサイズのCSS機能について紹介します。
コメント