固定ページを複数作成したのですが、「お問い合わせフォーム」のみサイドバーの検索ボタン表示が崩れてしまいます。サイドバーの設定は「カスタマイザーの設定に従う」にしています。添付ファイルで表示崩れをご確認ください。修正方法を教えてください。どうぞよろしくお願いいたします。
@yumiway さま
ご質問いただきましてありがとうございます。
サイト拝見したところ、以下のyumiwayさまが追加されているインラインCSSの記述が
原因であることがわかりました。
ソースコード
[type=button], [type=reset], [type=submit] {
display: block;
width: 200px;
margin: 0 auto;
padding: 10px;
background-color: #222;
color: #fff;
}
こちらの記述の仕方ですと、
意図していない他のボタン（今回でいうと検索ボタン）にも
同じスタイルが反映されてしまっているようです。
クラス名を追加して限定するなど、
対象を絞り込む方法を検討してみてください。
ご確認いただけますと幸いです。
＠hamada様
ご返信いただき誠にありがとうございます！
私はまったくの初心者で、以下サイトの説明にある記述をそのままコピペした次第です。
https://www.xserver.ne.jp/blog/wordpress-xwrite-page/
「クラス名を追加して限定するなど、
対象を絞り込む方法を検討してみてください。」
了解いたしました。調べて対応してみます。
もしできなかった場合は、あらためてご相談させてください。
どうぞよろしくお願いいたします。
＠hamada 様
いろいろ試してみましたが、私には難しすぎます。
今度はフォームのテキストエリアが短くなってしまいました。テキストエリアの幅はどこで調整するのでしょうか？
恐れ入りますが、ご教示いただけますと幸いです。
@yumiway さん
横からすみません。
取り急ぎ、該当箇所をこちらのコードに修正いただけますでしょうか。
input.wpcf7-submit[type=submit] {
display: block;
width: 200px;
margin: 0 auto;
padding: 10px;
background-color: #222;
color:#fff;
}
↑上記コードは問い合わせフォームの送信ボタンのみ有効なコードとなります。
@hamada 様
お世話になっております。
本件ですが、貴社エックスサーバーの公式コンテンツが原因でこのような事態が起こってしまいましたので、明らかな検証不足と考えます。
恐れ入りますが、修正いただくよう、コンテンツ管理者にご連絡をお願いいたします。
（私の方からも一意見としてエックスサーバー様にご連絡させていただきます）
よろしくお願いいたします。
XWRITEがリリースされたときからのユーザーです。
※回答は個人の見解によるもので、エックスサーバー様のご意見とは異なる場合がございます※
@yumiway さん
問題なく修正できたとのこと、ありがとうございます。
お役に立てたようで何よりです。
textareaの広げ方についてですが、元からあるCSSコードを修正せず、そのままお使いいただいて問題ございません（むしろ、先ほど無理に修正しようとしたので問題が起きたのだと思います）。
ただ、そのまま使い続けると、後々チェックボックス等を挿入しようとしたときにデザイン崩れが発生するので、私は以下のとおり変更して使っています。
.wpcf7-form-control-wrap input[type=text],
.wpcf7-form-control-wrap input[type=url],
.wpcf7-form-control-wrap input[type=email],
.wpcf7-form-control-wrap textarea {
width:100%;
}
上記で問題なく動作するか、ご確認いただけますでしょうか。
XWRITEがリリースされたときからのユーザーです。
※回答は個人の見解によるもので、エックスサーバー様のご意見とは異なる場合がございます※
@yumiway さま
ご返信いただきありがとうございます。
また、この度は弊社コンテンツにてご提供したコードの使用に際し、
ご不便をおかけし誠に申し訳ございません。
先にyinabaさまよりご回答いただいた内容にて、
解決いただけたのことで何よりでございます。
また何かございましたらお気軽に
当フォーラムをご利用いただけますと幸いです 😊
@yinaba さま
いつもお世話になっております。
迅速なフォローをいただき、誠にありがとうございます。
問題解決のサポート、大変助かりました。
この度は、弊社がご提供したコンテンツ（「コピペで使える」部分）において、
他の箇所へ影響する可能性への考慮が不十分であったため、
ユーザーの皆様にご不便・ご迷惑をおかけし、誠に申し訳ございません。
いただきましたご指摘は、担当部署にこちらからも共有し、
今後のコンテンツ作成・提供における品質向上に努めてまいります。