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

menu

ゆるりの足あと


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

このサイトでは、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>

<a class=”q_button bt_blue” href=”#”>CSSボタン デザイン⑨「青色」</a>

<a class=”q_button bt_green” 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機能について紹介します。

少しはお役に立てましたか?

役に立つかも?と思われた方はぜひシェアを!

関連記事

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

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

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

過去に作成したサイト集