当サイトでは、WordPressの有料テーマ「SWELL」を使用しています。
ブログにお問合せフォームは必須。
そこでプラグイン「Contact Form 7」を使ってお問合せフォームを作りました。
参考サイト:hitodeblog
↑ありがとうございます(^^)

でも、各項目の幅が狭く、何だか書き込みにくい印象。
そこで、CSSでカスタマイズして使いやすくしました。
超初心者ブロガーでも出来ます!
参考サイト:PC-crea
↑ありがとうございます(^^)
それでは具体的な手順を手順を見て行きましよう!
固定ページで作ったお問合せページを編集する
手順としては、
固定ページに作った「お問合せ」の記事下部にある、
カスタムCSSにコードをコピー&ペーストします。
①固定ページの「お問合せ」の編集
まずは
[固定ページ]>[固定ページ一覧]
をクリック


ここで、あらかじめ作っておいた
[お問合せ]>[編集]
をクリック。

これで編集画面が出てきます。
左下部の
『カスタムCSS&JS』
『CSS』
に注目です。

下部の欄に「カスタムCSS」が書き込めるようになっています。

ここに以下のコードをコピー&ペーストします。
.wpcf7 input [name=”your-name”],
.wpcf7 input [name=”your-email”],
.wpcf7 input [name=”your-subject”] {
width: 100%
height: 35px !important;
background: #fff;
}
.wpcf7 textarea[name=”youra-message”] {
width: 100%
height: 300px !important;
background: #fff;
}
そして、さら以下のコードをコピー&ペーストします。
.wpcf7 input[type=”submit”{
width:50%
padding:10px;
margin-top:30px;
margin-left:25%
color: #fff;
borde-radius:10px;
-wekbkit-border-radius: 0px;
-moz-border-radius: 0px;
border: none;
box-shadow: 0 3px 0 #ddd;
background: #D89CA6;
tansition: 0.3s;
}
.wpcf7-submit:hover {
background: #a4dd6c;
tansform: tandlate3d(0px, 3px, 1px);
-webkit-transforms: translate3d(0px, 3px, 1px);
-moz-transform: translate3d(0px, 3px, 1px);
}
コピペができたら、画面右上の更新ボタンをクリックして更新します。


②完成!
このようになります。

「お問合せ」の編集画面から[プレビュー]>[新しいタブでプレビュー]で完成画面のプレビューが見れます。

もちろん、サイトから確認しても良いです。
まとめ
固定ページに作った「お問合せ」の記事下部にある、カスタムCSSにコードをコピー&ペーストします。
これだけです。
でも、いまだにブログ初めて約6ヶ月の私でも、これが出来ませんでした。
自分で調べて試行錯誤。結果がこの方法でした。
まだまだ、勉強中!
ブログ初心者の方の参考になれば幸いです。
コメント