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

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

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

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

Calculated Fields Form

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

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

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

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

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

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

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

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

解説

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

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;
}

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