{"id":10,"date":"2021-05-20T14:26:52","date_gmt":"2021-05-20T05:26:52","guid":{"rendered":"http:\/\/gaku-on.com\/?p=10"},"modified":"2024-03-07T08:40:08","modified_gmt":"2024-03-06T23:40:08","slug":"contactform7-%e4%bb%8a%e3%81%ae%e3%81%a8%e3%81%93%e3%82%8d%e3%81%93%e3%82%8c%e3%81%8c%e3%83%99%e3%82%b9%e3%83%88css%ef%bc%81%ef%bc%81","status":"publish","type":"post","link":"http:\/\/gaku-on.com\/?p=10","title":{"rendered":"contactform7 \u4eca\u306e\u3068\u3053\u308d\u3053\u308c\u304c\u30d9\u30b9\u30c8CSS\uff01\uff01"},"content":{"rendered":"\n

HTML\u306b\u306f<\/p>\n\n\n\n

\u203b\u9001\u4fe1\u5f8c\u306f\u3001\u3044\u3089\u3093\u30d5\u30a9\u30fc\u30e0\u3092\u6d88\u3059<\/p>\n\n\n\n

<div class=\"contact-input-area\">\n\n<label><span class=\"hissu\">\u5fc5\u9808<\/span>\u304a\u540d\u524d<div id=\"koumoku\">[text* your-name] <\/div><\/label>\n<label><span class=\"hissu\">\u5fc5\u9808<\/span>\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9<div id=\"koumoku\">  [email* your-email] <\/div><\/label>\n<label><span class=\"hissu\">\u5fc5\u9808<\/span>\u90f5\u4fbf\u756a\u53f7\u3000\u4f4f\u6240\u81ea\u52d5\u5165\u529b<div id=\"koumoku\">[text* zip id:zip watermark\"\u4f8b\uff1a7300123\"] <\/div> <\/label>\n<label><span class=\"hissu\">\u5fc5\u9808<\/span>\u90fd\u9053\u5e9c\u770c<div id=\"koumoku\">[text* pref id:pref watermark\"\u4f8b\uff1a\u5e83\u5cf6\u770c\"]<\/div><\/label>\n<label><span class=\"hissu\">\u5fc5\u9808<\/span>\u3054\u4f4f\u6240<div id=\"koumoku\">[text* addr id:addr watermark\"\u4f8b\uff1a\u5e83\u5cf6\u5e02\u4e2d\u533a\u5927\u624b\u753a\uff12\u4e01\u76ee\uff15\u2212\uff11\uff11\"]<\/div><\/label>\n<label><span class=\"nini\">\u4efb\u610f<\/span>\u8077\u7a2e<div id=\"koumoku\">[text text-54 watermark\"\u4f8b\uff1a\u5efa\u8a2d\u696d\u3000\u4e0d\u52d5\u7523\u696d\u306a\u3069\"]<\/div><\/label>\n<span class=\"hissu\">\u5fc5\u9808<\/span>\u8cc7\u683c\u8a8d\u5b9a\u8b1b\u5ea7\u3068\u30bb\u30c3\u30c8\u7533\u8fbc\u3067\u3059\u304b\uff1f\n<div id=\"koumoku2\">[checkbox checkbox-212 \"\u306f\u3044\" \"\u3044\u3044\u3048\"]<\/div>\n<strong><span class=\"hissu\">\u5fc5\u9808<\/span>DIY\u30ea\u30d5\u30a9\u30fc\u30e0\u30a2\u30c9\u30d0\u30a4\u30b6\u30fc\u8cc7\u683c\u53d6\u5f97\u306e\u76ee\u7684\uff08\u8907\u6570\u56de\u7b54\u53ef\uff09<\/strong>\n<div id=\"koumoku2\">[checkbox checkbox-667 \"\u81ea\u5b85\u3092\u30ea\u30d5\u30a9\u30fc\u30e0\u3057\u305f\u3044\" \"\u6240\u6709\u7a7a\u304d\u5bb6\u3092\u30ea\u30d5\u30a9\u30fc\u30e0\u3057\u305f\u3044\" \"\u6240\u6709\u3059\u308b\u8cc3\u8cb8\u4f4f\u5b85\u306e\u30ea\u30d5\u30a9\u30fc\u30e0\u306b\u6d3b\u7528\u3057\u305f\u3044\" \"\u73fe\u5728\u306e\u4ed5\u4e8b\u306b\u6d3b\u304b\u3057\u305f\u3044\" \"\u65b0\u3057\u3044\u30d3\u30b8\u30cd\u30b9\u3092\u8003\u3048\u305f\u3044\"]<\/div>\n<label><div class=\"qqqq\">\u3054\u8cea\u554f\u306a\u3069\u3069\u3046\u305e<\/div>\n    [textarea your-message] <\/label>\n\n[acceptance acceptance-0]\u5185\u5bb9\u3092\u3054\u78ba\u8a8d\u306e\u4e0a\u30c1\u30a7\u30c3\u30af\u3092\u5165\u308c\u3066\u304f\u3060\u3055\u3044[\/acceptance]\n\n[submit \"\u9001\u4fe1\u3059\u308b\"]\n\n<\/div>\n\n<div class=\"complete-display\">\n\u304a\u554f\u5408\u305b\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3059\n\u5f8c\u65e5\u30b9\u30bf\u30c3\u30d5\u3088\u308a\u6298\u308a\u8fd4\u3057\u3055\u305b\u3066\u9802\u304d\u307e\u3059\n<a href=\"\/\">\u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u3078\u623b\u308b<\/a>\n\n<\/div><\/code><\/pre>\n\n\n\n
CSS<\/p>\n\n\n\n
\u203bcontactform7\u6a19\u6e96\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u306b
\u3054\u8a18\u5165\u3044\u305f\u3060\u3044\u305f\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\u306b\u78ba\u8a8d\u30e1\u30fc\u30eb\u3092\u9001\u4fe1\u3057\u3066\u3044\u307e\u3059
\u3092\u66f8\u304d\u63db\u3048\u3066\u304a\u304f\u3068\u30d9\u30bf\u30fc<\/p>\n\n\n\n
\/*————————————————————–
# form\u7cfb
————————————————————–*\/
.qqqq{
    font-weight: bold;
    font-size: 110%;
    margin-top: 10px;
    margin-bottom: 5px;
}<\/p>\n\n\n\n
.sent .contact-input-area{
    display: none;
}<\/p>\n\n\n\n
span.wpcf7-list-item {
display: block;
}<\/p>\n\n\n\n
.complete-display{
    display: none;
}<\/p>\n\n\n\n
.sent .complete-display{
    display: block;
    text-align: center;
}
.hissu{
    background-color: #DB2446;
    padding-top: 6px;
    padding-right: 10px;
    padding-bottom: 4px;
    padding-left: 10px;
    color: #FFFFFF;
    font-weight: bold;
    margin-right: 18px;
}
.nini{
    background-color: #177AB8;
    padding-top: 6px;
    padding-right: 10px;
    padding-bottom: 4px;
    padding-left: 10px;
    color: #FFFFFF;
    font-weight: bold;
    margin-right: 18px;
}
#koumoku{
    margin-top: 10px;<\/p>\n\n\n\n
    
}
#koumoku2{
    margin-top: 10px;
    margin-bottom: 10px;    
    
}<\/p>\n\n\n\n
.wpcf7 input[name=”your-name”],
.wpcf7 input[name=”your-email”],
.wpcf7 input[name=”zip”],
.wpcf7 input[name=”pref”],
.wpcf7 input[name=”addr”]{
        width: 50%;
        height: 35px !important;
}
 
.wpcf7 textarea[name=”your-message”] {
        width: 80%;
        height: 350px !important;
}<\/p>\n\n\n\n
\/* \u9001\u4fe1\u30dc\u30bf\u30f3\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba *\/
.wpcf7 input[type=”submit”] {
font-size: 100%; \/* \u30d5\u30a9\u30f3\u30c8\u306e\u5927\u304d\u3055 *\/
padding: 1em 2em; \/* \u300c\u9001\u4fe1\u3059\u308b\u300d\u3068\u3044\u3046\u6587\u5b57\u3068\u30dc\u30bf\u30f3\u306e\u67a0\u307e\u3067\u306e\u9593\u9694\uff08\u4e0a\u4e0b1\u6587\u5b57\u3001\u5de6\u53f32\u6587\u5b57\u3092\u6307\u5b9a\uff09*\/
background: #00008b; \/* \u80cc\u666f\u8272 *\/
color: #ffffff; \/* \u6587\u5b57\u8272 *\/
border-radius: 4px; \/* \u30b3\u30fc\u30ca\u30fc\u3092\u5fae\u5999\u306b\u4e38\u304f*\/
box-shadow: 0 2px 4px rgba(0,0,0,0.2); \/* \u30dc\u30bf\u30f3\u306b\u5f71\u3092\u3064\u3051\u3066\u7acb\u4f53\u7684\u306b *\/
border: 1px solid #ccc; \/* \u30dc\u30bf\u30f3\u306e\u67a0\u306e\u6307\u5b9a *\/
text-align: center; \/* \u30dc\u30bf\u30f3\u306e\u4e2d\u306e\u6587\u5b57\u306e\u4f4d\u7f6e\u306e\u6307\u5b9a\uff08\u4e2d\u592e\uff09*\/
}
\/* \u9001\u4fe1\u30dc\u30bf\u30f3\u306b\u30de\u30a6\u30b9\u304c\u4e57\u3063\u305f\u3089\u8272\u3092\u5909\u3048\u308b *\/
.wpcf7 input[type=”submit”]:hover {
background: #f0ffff; \/* \u30de\u30a6\u30b9\u304c\u4e57\u3063\u305f\u3089\u80cc\u666f\u8272\u3092\u5909\u66f4 *\/
color: #555555; \/* \u30de\u30a6\u30b9\u304c\u4e57\u3063\u305f\u3089\u6587\u5b57\u8272\u3092\u5909\u66f4 *\/
}<\/p>\n\n\n\n
\u4f4f\u6240\u81ea\u52d5\u5165\u529b\u306f<\/code>

 <\/p>\n\n\n\n
<!-- ajaxzip --><\/code><\/p>\n\n\n\n
<script src=\"https:\/\/ajaxzip3.github.io\/ajaxzip3.js<\/a>\" charset=\"UTF-8\"><\/script><\/code><\/p>\n\n\n\n
<script type=\"text\/javascript\"><\/code><\/p>\n\n\n\n
jQuery(function(){<\/code><\/p>\n\n\n\n
jQuery('#zip').keyup(function(event){<\/code><\/p>\n\n\n\n
AjaxZip3.zip2addr(this,'','pref','addr');<\/code><\/p>\n\n\n\n
})<\/code><\/p>\n\n\n\n
})<\/code><\/p>\n\n\n\n
<\/script><\/code><\/p>\n\n\n\n
footer.php\u306e\uff1c\/body\uff1e\u76f4\u524d\u306b\u3044\u308c\u3066\u307f\u3066\u304f\u3060\u3055\u3044<\/p>\n\n\n\n
\u30b5\u30f3\u30af\u30b9\u30da\u30fc\u30b8\u3000\u30d5\u30a1\u30f3\u30af\u30b7\u30e7\u30f3\u306b\u5165\u308c\u308b\u3060\u3051
<script type=”text\/javascript”>
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
    location = ‘\u4f5c\u6210\u3057\u305f\u30b5\u30f3\u30af\u30b9\u30da\u30fc\u30b8\u30a2\u30c9\u30ec\u30b9’;
}, false );
<\/script><\/p>\n\n\n\n
\u753b\u9762\u5909\u79fb\u305b\u305a\u306b\u5b8c\u4e86\u753b\u9762
https:\/\/www.cherrypieweb.com\/weblog\/technical\/20121211133906.php<\/a>]<\/p>\n\n\n\n
\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u3082\u5fd8\u308c\u305a\u306b\u3000reCAPTCHA v3<\/strong>
https:\/\/www.google.com\/recaptcha\/admin\/create<\/a>
\u2191
\u4e0a\u8a18\u304b\u3089\u767a\u884c\u3059\u308b
\u30b5\u30a4\u30c8\u30ad\u30fc\u3068\u30b7\u30fc\u30af\u30ec\u30c3\u30c8\u30ad\u30fc\u3092\u3000contactform7\u306e\u30a4\u30f3\u30c6\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u306b\u5165\u308c\u308b\u3060\u3051
 <\/p>\n","protected":false},"excerpt":{"rendered":"
HTML\u306b\u306f \u203b\u9001\u4fe1\u5f8c\u306f\u3001\u3044\u3089\u3093\u30d5\u30a9\u30fc\u30e0\u3092\u6d88\u3059 C…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-10","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/gaku-on.com\/index.php?rest_route=\/wp\/v2\/posts\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/gaku-on.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/gaku-on.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/gaku-on.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/gaku-on.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10"}],"version-history":[{"count":4,"href":"http:\/\/gaku-on.com\/index.php?rest_route=\/wp\/v2\/posts\/10\/revisions"}],"predecessor-version":[{"id":334,"href":"http:\/\/gaku-on.com\/index.php?rest_route=\/wp\/v2\/posts\/10\/revisions\/334"}],"wp:attachment":[{"href":"http:\/\/gaku-on.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/gaku-on.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=10"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/gaku-on.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}