WordPressのContact Form 7をレシポンシブ化するのでR

WordPressのお問い合わせでもっとも利用されているプラグインの一つに「Contact Form 7」があるのでR。

「Contact Form 7」の詳細は、ここにあるのでR。

ここをみて分かるように、開発者は日本の方でR。

この「Contact Form 7」は非常に柔軟なプラグインでRが、テーマによってはdafaultではレシポンシブになっていないのでR。パソコンでは問題ないのでRが、スマホでは名前やメールアドレスなどの入力する枠が、右側にニィキーと延びているのでR。

そこで、

これを修正するのでR。

いくつかの方法があるようで、こことか、こことか、ここにそれがあるのでR。

そこで、こことか、ここの方法をしたのでRが、なぜかテーマによってはうまくいかなかったのでR。

そこで、CSSに張り付けるここの方法をしたのでR。

それによると、テーマのstyle.cssに

.wpcf7 input[name="your-name"],
.wpcf7 input[name="your-email"],
.wpcf7 input[name="your-subject"] {
        width: 100%;
        height: 35px !important;
}
 
.wpcf7 textarea[name="your-message"] {
        width: 100%;
        height: 350px !important;
}

を貼りつけるとよいようでR。

試すと、できたのでR。

しかし、

これまたテーマによっては出来なかったのでR。

そこでテーマの「外観」→「カスタマイズ」をみると、テーマに追加CSSをする項目があったのでR。

そこに、

.wpcf7 input[name="your-name"],
.wpcf7 input[name="your-email"],
.wpcf7 input[name="your-subject"] {
        width: 100%;
        height: 35px !important;
}
 
.wpcf7 textarea[name="your-message"] {
        width: 100%;
        height: 350px !important;
}

を貼りつけたら、レシポンシブ化できたのでR。

（広告）月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』
（広告）WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』
（広告）年間920円（税抜）からの格安ドメイン取得サービス─ムームードメイン─