計算フォームをWordPress上で簡単に表示できるプラグイン「Calculated Fields Form」を導入したところ、Discription欄の表示に見出しスタイルが勝手に適用されていたので修正してみました。
Calculated Fields Form
プラグインのダウンロードはこちら。
![](https://ps.w.org/calculated-fields-form/assets/banner-772x250.png?rev=1734395)
ブログに投稿したところ、表示がおかしかった
下の画像のとおり、「スマホ、乗り換えたほうがお得?~…」の頭に、見出しh2と同じスタイルが適用されてしまっています。
![](https://3daysam.com/wp-content/uploads/2018/02/iphoenx-500x332.jpg)
![](https://3daysam.com/wp-content/uploads/2019/09/f5b0aa7db56ed5bdf8b1aa9ed58b6020-800x407.png)
![](https://3daysam.com/wp-content/uploads/2018/02/iphoenx-500x332.jpg)
上が、投稿した記事です。
このままでは読みにくいため、<h2>指定を外す必要があります。
意図しない場所に<h2>のCSSが適用されていた
どうやら、「Description」欄に入力した文頭にh2が適用されてしまっているようです。
![](https://3daysam.com/wp-content/uploads/2019/09/8ce4900eb14ba055b3cc18b287d5c71b-800x380.png)
CSS追記で解決しました
Calculated Fields FormはCSSを追記でスタイルを変更できます。
Calculated Fields Form内のh2だけ無効になるよう、Calculated Fields Form設定画面のCSS追記欄に以下のコードを貼り付けます。
#fbuilder .fform h2:before {
background-image: initial;
}
CSSの追記場所
CSSの追記場所は、Calculated Fields Formの設定画面です。
①タイトル部分を選択→②Form Settingsをクリックします。
![](https://3daysam.com/wp-content/uploads/2019/09/959acfc57ececc0d3b6edea56931fe77-800x171.png)
下の方にスクロールすると、CSS追記欄があります。
ここに入力します。
![](https://3daysam.com/wp-content/uploads/2019/09/ebd2b34a8ce74b615e4f07f8ee3e4284-800x582.png)
#fbuilder .fform h2:beforeの解説
Calculated Fields Form公式でCSSのクラス等指定が示されています。
Google Chrome「要素の検証」で確認したところ、「background-image」のチェックを外すと見出しの表示が消えました。
この設定を消すため、background-image:initial としています。
![](https://3daysam.com/wp-content/uploads/2019/09/ee8e92cd7ba2eaa0302ddc8f5b5c3170.png)
出来ました
無事、記事のh2見出しはそのままに、プラグイン「Calculated Fields Form」のh2見出しスタイルを反映させないことに成功しました。
![](https://3daysam.com/wp-content/uploads/2019/09/6205334db33eef76aa68834fca462cc5-800x377.png)
補足
下のようにCSSを書くと、記事全体の見出しスタイルが消えます。
h2:before {
background-image: initial;
}
![](https://3daysam.com/wp-content/uploads/2019/09/6e444a6084b1256b1f0dd3e7cce65311-800x174.png)
以上です。