前提・実現したいこと
ワードプレスで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/ツールのバージョンなど)
前回教えてもらった内容でコピペすると設定がおかしく表示されてしまいうまく行きません。
あなたの回答
tips
プレビュー