質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • WordPress

    8942questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • CSS

    7556questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

contactform7のフォームのcssが効かない・・・

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,426

lewishome

score 10

こんばんわ。
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に書くほうがいいんでしょうか?

参考のサイトはこれです。

contactform7のカスタマイズ

コードを表示します。
あまり、手をつけていないコードです。

<table class="table1">
    <tr>
        <th>お名前</th>
        <td>[Text* your-name watermark"例:山田 太郎"] </td>
    </tr>
    <tr>
        メールアドレス</th>
        <td>[email* your-email watermark"例:×××@×××.com"]</td>
    </tr>
    <tr>
        <th>郵便番号</th>
        <td>[Text* zip id:zip watermark"例:840-0015"] </td>
    </tr>
    <tr>
        <th>ご住所</th>
        <td>[Text* addr id:addr watermark"例:佐賀市木原2丁目25-10 UTビル2F東号室"]</td>
    </tr>
    <tr>
        <th>お電話番号</th>
        <td>[Text* text-17 watermark"例:0952-60-6240"]</td>
    </tr>
    <tr>
        <th>メッセージ本文</th>
        <td>[textarea* your-message watermark"業種・目的・デザインイメージなど"]</td>
    </tr>
</table>
table.table1{
width: 100%;
color: #444;
text-align: left;
margin: 0 auto;
}

これが問題のコンタクトフォームです。
結果の写真

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • lewishome

    2016/12/14 10:20

    色指定やborder="1"としても、色は変わらないし枠線は表示されません。

    キャンセル

  • Lhankor_Mhy

    2016/12/14 10:25

    繰り返しになりますが、私が見た限り色指定は効いているように見えます。なぜなら上記CSSでは#444になっており、#444とは黒に近い灰色のことであり、スクリーンショットの文字色は黒に近い灰色になっているように見えるからです。実際に適用しているCSSが違うのかと思い、質問者に『色指定や幅指定をしたCSS』をご提示願いましたが、『写真の上のコードがcssです』とのことでしたので、私の眼には何の問題も生じていないように見えます。誰にでもわかる形で質問者が問題であると思っている現象を示してください。問題が示されない限り回答はできません。

    キャンセル

  • 退会済みユーザー

    2016/12/15 10:04

    こちらの質問が他のユーザから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 2

checkベストアンサー

+1

質問者さんの言いたいことが「テーブルにならない」ではなく「テーブルに枠がない」という問題であれば、
カスタマイズしていないTwenty Twelveというテーマ自体がそういうものだからです。
何も変更を加えない状態だとテーブルの罫線は一部にしかついてません。

.entry-content table, .comment-content table {
border-bottom: 1px solid #ededed;
}
.archive-title, .page-title, .widget-title, .entry-content th, .comment-content th {
/* ボーダーの指定なし */
}
.entry-content td, .comment-content td {
    border-top: 1px solid #ededed;
}


となっています。(ボーダーに関するところだけ抜粋)
style.cssの一番初めのリセットで「border: 0;」もついてますので「指定した線のみひかれている」状態です。

てっとり早く「周りに枠が引きたい」のであれば子テーマを作成して

.entry-content table, .comment-content table {
    border: 1px solid #ededed;
}
.entry-content th, .comment-content th {
    border: 1px solid #ededed;
}
.entry-content td, .comment-content td {
    border: 1px solid #ededed;
}


とでも入れればいいんじゃないでしょうか。(まとめてもよかったんですが見づらくなるのでバラバラにしてます)

参考画像
イメージ説明

paddingとかの調整もしないといけないかもしれませんがそこはお好みに合わせてください。

あ、あとコピペミスかもしれないですが「メールアドレス」の前の<th>がないですよ。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/14 23:38

    ということは<th><td>のcssにもborderを付け足すんですね?

    キャンセル

  • 2016/12/15 00:05

    .entry-content table
    って何ですか?

    キャンセル

  • 2016/12/15 08:11

    >ということは<th><td>のcssにもborderを付け足すんですね?
    そう思うならまずやってみましょう。

    >.entry-content table
    >って何ですか?
    セレクタでしょう
    http://weboook.blog22.fc2.com/blog-entry-268.html

    キャンセル

  • 2016/12/15 09:03 編集

    で、結局テーマはTwenty Twelveでいいんですか?
    また、「CSSがきいていない」のではなく「線がない」のが問題でいいんですか?

    回答にも書きましたがTwenty Twelveで線がないのはむしろ正しい状態なので、
    必要があれば自分で線を追加しなければいけません。

    .entry-content tableへのborderは正直なくても大丈夫です。thとtdで回り全部囲えるので…
    テーマが変われば編集する箇所も書き方も変わります。

    > jm1156さん
    補足ありがとうございます。(怪しいにおいはただよっていると思ってます)

    キャンセル

  • 2016/12/15 14:20

    線を追加するには、tr td にborderを付け足せばいいんですね?

    キャンセル

  • 2016/12/15 15:07

    >線を追加するには、tr td にborderを付け足せばいいんですね?
    そう思うならまずやってみましょう。

    キャンセル

  • 2016/12/15 16:22

    やったのですが、線が追加されませんでした。
    borderを付け足しました。

    キャンセル

  • 2016/12/15 17:19

    横から失礼します。
    追加・修正のコメントを読むと、質問者が『borderを付け足』したのはCSSじゃなくて属性の方かと思います。
    「CSSが効かない」というのもCSSじゃなくて属性のことではないかな?と思っていますが、現状のソースとスクリーンショットを見せていただけてないので確信が持てません。
     
    たぶん、回答者の皆さまの共通認識は「正しいコードを提示するのは簡単なんだけどコピペされるだけだし……」って感じですよね。

    キャンセル

  • 2016/12/15 22:03

    Lhanker_Mhyさん、自分の力でやろうと思います。
    ありがとうございます。

    キャンセル

  • 2016/12/16 01:25

    私が論点をずらしてたかもしれません、すみません。

    とりあえず今回のこのテーブルに関しては、
    .table1 thと.table1 tdにborder指定すれば線はつきます。

    ただ、やはりまだ「何が問題で」、「どんな風にしたくて」、「何をやったのか」が見えてないので…

    質問者さんが言う「tableを入れたけどtableにならない」は、結局「線がない」ってことですか?

    http://www.htmq.com/style/border.shtml
    太さや線種、線の色も一緒に指定してみてください

    キャンセル

  • 2016/12/16 08:02

    「解決済」になっていますけど、結局、何が問題で、どうやって解決したのかがわかってないままです。
    そのような状態で解決済にするのは、回答者さんたちに失礼だと思います。

    キャンセル

  • 2016/12/16 09:05

    Lhankor_Mhyさんのコメントの部分を失念してました。
    <table>にborder="1"を付け足しただけでは、線は表示できませんよ。

    キャンセル

+1

使うテーマによってはcontactform7のカスタマイズができるのか否かという質問

通常はできると思います。

私が使ったテーマはTwenty SixteenとTwenty Twelveです。前者はcssが効かず後者はcssが効きました。普通style.cssにcontact form7のcssを書けば効くはずですが、効かないので使うテーマによって違うのかなと思い質問しました。

一般的には、あるテーマで有効だったCSSが別のテーマで有効であるかというと、そうとは限りません。

私はtableタグをcontact form 7に直接書いたのですが、これはまずいでしょうか?

それでいいと思います。

style.cssに書くほうがいいんでしょうか?

CSSファイルにHTMLを書くことはできません。



具体的な問題の解決法はソースを提示していただかないと何とも言えません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/13 13:02

    ご回答ありがとうございます。
    ご指摘の通り、コードを表示します。

    キャンセル

  • 2016/12/13 13:16

    追記拝読。
    これにリンク先のCSSを使ったら動かないだろうと思います。tableにclassついてないですよ。
     
    というか、twenty twelveでCSS効いてたことが不思議です。

    キャンセル

  • 2016/12/13 13:19

    すみませんでした。classをつけてないのを送信してしみました。

    キャンセル

  • 2016/12/13 13:20

    訂正しました。

    キャンセル

  • 2016/12/13 13:37

    いずれにせよ、それだとclassが違うので効かないですよね……

    キャンセル

  • 2016/12/13 13:40

    ブラウザの種類とバージョンはいくつでしょう?
    「Twenty Twelveの子テーマでcss/ie.cssへの変更が反映されないとき」
    http://www.nishi2002.com/3721.html
    ぐぐるとこういうのでますが?

    キャンセル

  • 2016/12/13 13:42

    cssを提示しました。

    キャンセル

  • 2016/12/13 13:44

    子テーマ用のie.cssを作成するってことですか?
    ie.cssは使った事がないですね...

    キャンセル

  • 2016/12/13 13:50

    提示したCSSのソースはstyle.cssのソースですか?
    style.cssにはすでにtableの部分がありますが、それを変更しましたか?
    それとも追加しましたか?
    変更or追加した部分を元に戻すとどうなりますか?
    その部分以外のタグにスタイルは反映されますか?
    それを確認してみてください。

    キャンセル

  • 2016/12/13 13:52

    と、いうことはIE9未満ですか?
    そうれあれば、リンク先を読んでie.cssの編集が必要になるかと思います。
    (私は試していないので未確認ですが)

    キャンセル

  • 2016/12/13 14:22

    提示したcssは、style.css に書いたコードです。

    キャンセル

  • 2016/12/13 15:52

    写真、貼っときました。

    キャンセル

  • 2016/12/13 16:00

    ひとことずつコメントするのはやめてください。無駄な通知が増えます。
    で、
    「style.css に書いたコード」なのはいいですが、私の書いたことやってみましたか?
    変更or追加したのか、それを元に戻したらどうなるのか、その部分以外のタグにスタイルは反映されるのか、そしてブラウザはIE9未満ならリンク先の対応を行ったのか。
    あと、CSSの確認ツールには何を使っていますか?

    キャンセル

同じタグがついた質問を見る

  • WordPress

    8942questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • CSS

    7556questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。