はじめに
WordPressでは利用するテーマごとにCSSやphpが用意されており、そこに直接変更を加えた場合テーマのアップデートを行うと変更した部分も消えてしまうそうです。
この理由から、テーマのCSSを直接書き換えるのはあまりお勧めではありません。
WordPressには追加CSSという機能があるので、そちらを使ってCSSを追加するとテーマのアップデートを行っても追加部分はそのままになります。
この記事では、実際に追加CSSの利用方法を解説します。
Contact Form 7とは
Contact Form 7は、お問い合わせフォームなどのフォームの作成や管理を簡単に行うことができる、WordPressの拡張プラグインです。
非常に多く利用されており、Contact Form 7のための拡張プラグイン(Flamingoなど)も充実しています。
目標
上記のように必須の質問に、「＊必須」の目印をつけるのを目標にします。(CSSを利用)
色を変えるだけなら、<font color="red">*必須</font>のように、CF7内に直接書き込んでも反映されますが手間や管理の面などを考えてもCSSを利用した方が良いと思います。
追加CSSの設定方法
WordPressのサイドバーから外観->カスタマイズをクリックします。
サイドバーから追加CSSをクリックします。
<記述例>
追加CSSに必要なCSSを記入します。
今回は、requiredクラスを付けた部分を赤くしたいので、span.required {color: #ff0000;}のように記入します。
先程の<font color="red">*必須</font>と書いた部分を、<span class="required">*必須</span>と書き換えることができます。
まとめ
このように書くことで、後でデザインの変更などが必要になったときは、追加CSS部分を変更することで一括で変更することが可能になります。
colorを0000ffにした例
