プラグイン「Calculated Fields Form」の表示がおかしかったのでカスタマイズで修正しました

スポンサーリンク

計算フォームをWordPress上で簡単に表示できるプラグイン「Calculated Fields Form」を導入しました。

Calculated Fields Formを入れたところ、Discription欄の表示に見出しスタイルが勝手に適用されていたので修正してみました。

このブログは無料テーマ「Cocoon」を使用しておりスキン「Season」を適用しています。

スポンサーリンク

Calculated Fields Form

プラグインのダウンロードはこちら。

Calculated Fields Form
Calculated Fields Form iは、動的に計算されたフィールドを含むフォームを作成し、その結果を表示するためのプラグインです。

ブログに投稿したところ、表示がおかしかった

下の画像のとおり、「スマホ、乗り換えたほうがお得?~…」の頭に、見出しh2と同じスタイルが適用されてしまっています。


上が、投稿した記事です。

このままでは読みにくいため、この指定を外す必要があります。

意図しない場所に<h2>のCSSが適用されていた

どうやら、「Description」欄に入力した文頭にh2が適用されてしまっているようです。

CSS追記で解決しました

Calculated Fields FormはCSSを追記でスタイルを変更できます。

Calculated Fields Form内のh2だけ無効になるよう、CSS追記欄に以下のコードを貼り付けました。

#fbuilder .fform h2:before {
    background-image: initial;
}
解説

#fbuilder .fform h2:before

Calculated Fields Form公式でCSSのクラス等指定が示されています。

CFF - FAQ
Calculated Fields Form is a WordPress plugin for creating forms with dynamically calculated fields.

h2のスタイル

Google Chrome「要素の検証」で確認したところ、「background-image」のチェックを外すと見出しの表示が消えました。

この設定を消すため、background-image:initial としています。

CSSの追記場所

CSSの追記場所は、Calculated Fields Formの設定画面で

①タイトル部分を選択→②Form Settingsをクリックします。

下の方にスクロールすると、CSS追記欄があります。

出来ました

無事、記事のh2見出しはそのままに、プラグイン「Calculated Fields Form」のh2見出しスタイルを反映させないことに成功しました。

補足

下のようにCSSを書くと、記事全体の見出しスタイルが消えます。

 h2:before {
    background-image: initial;
}

以上です。このほかにも色々カスタマイズできそうなので、いろいろ挑戦したいところです!