投稿2016/12/07 10:37
編集2016/12/13 06:50こんばんわ。
wordpressのフォームを企業のお問い合わせのようにカッコよくカスタマイズしたいです。
ネットで調べると、contact form7のカスタマイズについてのサイトがたくさん出てきますが、今回質問したいのはカスタマイズの方法ではなく、使うテーマによってはcontactform7のカスタマイズができるのか否かという質問です。私が使ったテーマはTwenty SixteenとTwenty Twelveです。前者はcssが効かず後者はcssが効きました。普通style.cssにcontact form7のcssを書けば効くはずですが、効かないので使うテーマによって違うのかなと思い質問しました。
tableタグを入れてもcontact formはtableになりません。
twenty Sixteenはtableタグを入れるとtableになります。twenty twelveに入れたコードをそのままtwenty Sixteenに入れただけです。
私はtableタグをcontact form 7に直接書いたのですが、これはまずいでしょうか？
twenty Sixteenは直接書いてtableになったのですが・・・
style.cssに書くほうがいいんでしょうか？
参考のサイトはこれです。
コードを表示します。
あまり、手をつけていないコードです。
html
1<table class="table1"> 2 <tr> 3 <th>お名前</th> 4 <td>[Text* your-name watermark"例：山田 太郎"] </td> 5 </tr> 6 <tr> 7 メールアドレス</th> 8 <td>[email* your-email watermark"例：×××@×××.com"]</td> 9 </tr> 10 <tr> 11 <th>郵便番号</th> 12 <td>[Text* zip id:zip watermark"例：840-0015"] </td> 13 </tr> 14 <tr> 15 <th>ご住所</th> 16 <td>[Text* addr id:addr watermark"例：佐賀市木原２丁目２５-１０ UTビル２F東号室"]</td> 17 </tr> 18 <tr> 19 <th>お電話番号</th> 20 <td>[Text* text-17 watermark"例：0952-60-6240"]</td> 21 </tr> 22 <tr> 23 <th>メッセージ本文</th> 24 <td>[textarea* your-message watermark"業種・目的・デザインイメージなど"]</td> 25 </tr> 26</table> 27
css
1 2table.table1{ 3width: 100%; 4color: #444; 5text-align: left; 6margin: 0 auto; 7}
これが問題のコンタクトフォームです。
回答2件
0
ベストアンサー
質問者さんの言いたいことが「テーブルにならない」ではなく「テーブルに枠がない」という問題であれば、
カスタマイズしていないTwenty Twelveというテーマ自体がそういうものだからです。
何も変更を加えない状態だとテーブルの罫線は一部にしかついてません。
css
1.entry-content table, .comment-content table { 2border-bottom: 1px solid #ededed; 3} 4.archive-title, .page-title, .widget-title, .entry-content th, .comment-content th { 5/* ボーダーの指定なし */ 6} 7.entry-content td, .comment-content td { 8 border-top: 1px solid #ededed; 9}
となっています。（ボーダーに関するところだけ抜粋）
style.cssの一番初めのリセットで「border: 0;」もついてますので「指定した線のみひかれている」状態です。
てっとり早く「周りに枠が引きたい」のであれば子テーマを作成して
css
1.entry-content table, .comment-content table { 2 border: 1px solid #ededed; 3} 4.entry-content th, .comment-content th { 5 border: 1px solid #ededed; 6} 7.entry-content td, .comment-content td { 8 border: 1px solid #ededed; 9}
とでも入れればいいんじゃないでしょうか。（まとめてもよかったんですが見づらくなるのでバラバラにしてます）
参考画像
paddingとかの調整もしないといけないかもしれませんがそこはお好みに合わせてください。
あ、あとコピペミスかもしれないですが「メールアドレス」の前の<th>がないですよ。
投稿2016/12/14 02:36
総合スコア17
0
使うテーマによってはcontactform7のカスタマイズができるのか否かという質問
通常はできると思います。
私が使ったテーマはTwenty SixteenとTwenty Twelveです。前者はcssが効かず後者はcssが効きました。普通style.cssにcontact form7のcssを書けば効くはずですが、効かないので使うテーマによって違うのかなと思い質問しました。
一般的には、あるテーマで有効だったCSSが別のテーマで有効であるかというと、そうとは限りません。
私はtableタグをcontact form 7に直接書いたのですが、これはまずいでしょうか？
それでいいと思います。
style.cssに書くほうがいいんでしょうか？
CSSファイルにHTMLを書くことはできません。
具体的な問題の解決法はソースを提示していただかないと何とも言えません。
投稿2016/12/13 02:54
総合スコア36074
あなたの回答
tips
プレビュー
Q&A
