wordpressのcontactform7のエラーメッセージをキレイにする（スタイルシートのみ！）

 contactform7でお問い合わせフォームを送信する際、入力必須項目が空だとエラー分が自動的に表示されるが、その表示位置や見栄えの調整をキレイにするためのスタイルシートをメモ。

■フォーム上部にエラー文が並ぶので削除

/*上部のエラー文を消す*/
.wpcf7 .screen-reader-response {
    position: absolute;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    width: 1px;
    margin: 0;
    padding: 0;
    border: 0;
}

■各フォームの右側にエラー文が表示されるので、フォームの下に表示されるよう調整
　＆赤文字で表示する

/*各場所のエラー文位置調整*/
.wpcf7 span.wpcf7-not-valid-tip {
    display: block;
    position: static;
    top: 0;
    left: 0;
    border: none;
    color: red;
}

■メールフォーム送信

/*最下部のメッセージ装飾*/
.wpcf7 .wpcf7-response-output {
    margin: 20px 0 0;
    padding: 8px 35px 8px 14px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
    .wpcf7 .wpcf7-validation-errors {
        color: #B94A48;
        background-color: #F2DEDE;
        border: 1px solid #EED3D7;
    }
    .wpcf7 .wpcf7-mail-sent-ok {
        color: #3A87AD;
        background-color: #D9EDF7;
        border: 1px solid #BCE8F1;
    }

★まとめ

以下のスタイルシートをフォーム画面のそのままコピペ
 

<style>
/*上部のエラー文を消す*/
.wpcf7 .screen-reader-response {
    position: absolute;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    width: 1px;
    margin: 0;
    padding: 0;
    border: 0;
}
/*各場所のエラー文位置調整*/
.wpcf7 span.wpcf7-not-valid-tip {
    display: block;
    position: static;
    top: 0;
    left: 0;
    border: none;
    color: red;
}
/*最下部のメッセージ装飾*/
.wpcf7 .wpcf7-response-output {
    margin: 20px 0 0;
    padding: 8px 35px 8px 14px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
    .wpcf7 .wpcf7-validation-errors {
        color: #B94A48;
        background-color: #F2DEDE;
        border: 1px solid #EED3D7;
    }
    .wpcf7 .wpcf7-mail-sent-ok {
        color: #3A87AD;
        background-color: #D9EDF7;
        border: 1px solid #BCE8F1;
    }
</style>