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

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

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

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

CSS

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

Q&A

0回答

151閲覧

ワードプレスのコンタクトフォーム7の追加CSS

chashubutabuta

総合スコア11

WordPress

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

CSS

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

0グッド

0クリップ

投稿2018/12/03 10:45

前提・実現したいこと

ワードプレスでcontact foam7を使用していて、
基本の枠を拡大したり縮小したり、調度良いサイズに変更したいです。
詳しく言うと、枠のサイズを大きくする方法、小さくする方法、右下に拡大縮小が自由にできる右下矢印のようなものの設置、

発生している問題・エラーメッセージ

エラーメッセージは出ていません

該当のソースコード

試したこと

 /フロントページ のブログを非表示にする/
#content #topBlog { display:none; }
/フロントページ のブログを非表示にする。ここまで/

 /*コンタクトフォームの枠内のカラーを白くする.11から20まで
*/
.wpcf7 {
margin: 96px 0;
}
.asterisk {
margin: 0 0 0 0.2em;
color: #f5637a;
}
.wpcf7 span.wpcf7-not-valid-tip {
font-size: 80%;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 textarea {
background-color: #fff;
color: #333;
width: 95%;
font-size: 100%;
padding: 0.5em;
border-radius: 4px;
box-shadow: 1px 1px 3px rgba(0,0,0,.1) inset;
}
.wpcf7 input[type="submit"]
{
font-size: 100%;
padding: 0.2em 0.4em;
background: #eee;
color: #333;
border-radius: 4px;
cursor: pointer;
box-shadow: 0 0 1px rgba(0,0,0,.2);
border: 1px solid #ccc;
text-shadow: -1px 1px 0 rgba(255,255,255,1);
}
.wpcf7 input[type="submit"]:hover {
box-shadow: 0 0 1px rgba(0,0,0,.2) inset;
}

/* 電話番号のスタイル(1) */
input[type="tel"] {
background: none repeat scroll 0% 0% #F9F9F9;
background-color: #fff;
border-radius: 4px;
border: 1px solid #CCC;
padding: 5px;
font-size: 12px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;

}

/* 電話番号のスタイル(2) */
#content form input[type="tel"] {
position: relative;
overflow: hidden;
margin: 5px 5px 5px 0px;
width: 90%;
}

/* /* 身長体重(1) */
input[type="number"] {
background: none repeat scroll 0% 0% #F9F9F9;
background-color: #fff;
border-radius: 4px;
border: 1px solid #CCC;
padding: 5px;
font-size: 12px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;

}
/* 身長体重(2) */
#content form input[type="number"] {
position: relative;
overflow: hidden;
margin: 5px 5px 5px 0px;
width: 90%;
}

/* --- お問い合わせフォームのカスタマイズ --- /
/
入力部分 /
.wpcf7 select, input[type="date"], textarea {
border-radius: 5px; /
コーナーを微妙に丸く */
border:solid 1px #ccc;
padding: 5px;
}

body { color: #666; text-align: center;font-family:"MS P明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; }

.myrow {
display: -webkit-flex;
display: flex;
}

.myrow section {
margin: 0px;
padding: 0;
flex: 1;
}

.myrow .col-1{ flex: 1;}
.myrow .col-2{ flex: 2;}
.myrow .col-3{ flex: 3;}
.myrow .col-4{ flex: 4;}
.myrow .col-5{ flex: 5;}
.myrow .col-6{ flex: 6;}

@media screen and (max-width: 700px) {
.myrow {
-webkit-flex-direction: column;
flex-direction: column;
}
}

補足情報(FW/ツールのバージョンなど)

前回教えてもらった内容でコピペすると設定がおかしく表示されてしまいうまく行きません。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問