PAGE TOP

取り組み

印刷する

【WordPress】Form-Control セル幅変更のため「追加CSS」の記述による他への弊害

CSS追加は注意が必要です

のりのり
カスタマイズ

WordPress公式テーマ『Lightning』を使って、カスタマイズしながらホームページをリニューアルしていますが、お客さまからこうしてほしいという要望も当然ありますが、ホームページを見にきてくれた方の視点に立ったとき、要望はなくてもカスタマイズをしようと思うことが多々あります。

その一つ、ホームページには必ず必要なお問い合わせページ。そのお問い合わせフォーム作成には欠かせないと言われている「Contact Form 7」を取り入れました。

使い方などは、ここでははしょります。たくさんのサイトで導入の方法から使い方まで説明されていますので、そちらを参考にしてください。

私がどうしてもカスタマイズしたかったのは、入力欄の幅です。とても狭すぎるので広くしたいと思いました。
まさに私の言いたいことを代弁していただいているようなサイトが以下です。感謝します。

contact7
Contact Form 7 の記事にリンク ↑

図1

子テーマのstyle.cssに以下のように追記したということですので、同じようにコピー&ペーストしてみましたが、まったく変更されませんでした。
追記したところは、管理画面-外観-カスタマイズ-「追加CSS」です。
図2
 
以下は、逆パターンで、サイドバーなどにフォームを入れるため、幅を小さめにするために、style.cssに追記したそうです。

フォーム幅
フォーム幅の生地にリンク ↑

フォーム幅

実際に作成したお問い合わせフォームを、Googleクロームの検証機能を使ってコードを調べてみました。

class」を見ましたら、「class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control"|411x35」 と書かれていました。

411(width)x35(height) と想像できましたので、幅700pxあればいいだろうと、.form-control { width: 700px; } と「追加CSS」に記述したところ、私の思う入力欄になったのです。

“カスタマイズの方法通りにやってうまくいかないときは、この検証機能を使ってコードをチェックしてみよう”という私なりの結論に至り、ひとまず喜んでいました。

後日、とんでもないことに気づき、慌てました。「.form-control」は、サイドバー(投稿)ウィジェット「カテゴリー」の幅にも使われていたので、画面から右側に幅700pxに伸びていました。それでこのクラスの親にさかのぼり、.wpcf7 .form-control { width: 700px; } にしましたら、元のサイズに戻り、こちらも修正できました。

ここでも『カスタマイズのときに追加CSSを記述するコードは、親にさかのぼり、そこから記述する』という結論に至りました。

キーワード