7デザインカスタマイズ【シンプル3選】WEB関連の記事を気楽に書いています。2019.12.15こんにちわ。今回は、ワードプレスのお問い合わせフォームのカスタマイズ手順を紹介したいと思います。記事の内容は、デザイン変更の画像例とコピペで使えるCSSを書いています。7(コンタクトフォーム7)というプラグインでフォームを作成している方向けのカスタマイズになります。お問い合わせフォームをまだ設置していない方は、以下の記事で詳しく画像解説していますので参考にしてくださいね。【WordPress】お問い合わせフォームの簡単設置方法を画像解説ワードプレスブログ内にお問い合わせフォームを作成、設置する方法を豊富な画像で解説しています。7」を使えば、わずか一行のショートコードを新規ページに貼り付けるだけの超簡単作業です。ryuumarublog.com2019.12.25コード追加の手順と画像は、ワードプレステーマCocoonの解説例ですが他のテーマでも基本的の同じ手順で大丈夫だと思います。テーマによっては、項目の表示や場所が異なる場合があると思いますがご了承ください。CSSを使う場合カスタムCSSの編集手順テーマファイルの編集手順デザイン例3選とコピペ用CSSデザイン例1デザイン例2デザイン例3デザインを変更するときのCSS書き換えお問い合わせフォームカスタマイズまとめお問い合わせフォームのカスタマイズ今回紹介するカスタマイズは、以下の内容です。入力欄は、テキスト入力前と入力中のデザインが変化し、送信ボタンはマウスオーバーでデザインが変化する仕様になります。7のデフォルトコード(HTML)を編集すれば、企業サイトの様な本格的なデザインにすることもできます。ここで紹介するデザインは、シンプル派の方にお勧めです。必要最小限の項目と、ちょっとした装飾程度ですが、その分カスタマイズまでの作業もとても簡単な工程です。7デフォルトとデザイン変更後の比較画像です。デフォルト仕様はかなりシンプルで味気ない気もしますが、少し装飾するだけでずいぶん見た目が変わります。こちらは、カスタマイズ前(デフォルト)の画像です。こちらが、カスタマイズ後の画像です。今回3パターンの画像とCSSを紹介しようと思います。デザイン変更の簡単な説明も書いておきますので、お好みのデザインに変更してくださいね^^まず、デザイン変更のCSSをサイト内に設置する手順を解説します。引き続きデザイン例の画像とCSSを書いていきます。(CSSはトグルボックス内です)カスタマイズの手順カスタマイズの手順は、簡単なCSS(デザイン用のコード)を入力ボックスに追加するだけです。テーマのファイル内にCSSを記述している方は、その続きにコピペしてもらうだけでOKです。他のプラグインでフォームを設置している場合は反映しないので注意してください。(コードの頭に、wpcf7と指定)コードを追加する場所ですが、お使いのテーマにカスタムCSSがある場合はそちらに追加してください。編集ページの下の方にカスタムCSSと書かれた項目があると思います。CSSの入力枠が表示されていないときは、右側の矢印(▼マーク)をクリックすると開きます。カスタムCSSは、特定のページだけCSSを編集したいときに使える便利な機能です。今回の様に、サイト全体のデザインを編集(カスタマイズ)する必要がない場合は、カスタムCSSを使った方が表示の読み込みも早いのでおすすめです。CSSというプラグインがおすすめです。ややこしい設定など一切せず、インストールするだけでカスタムCSSを設置できます。CSSをインストールには、ダッシュボードのプラグインにカーソルを置いて新規追加をクリックします。CSSと入力してください。タイトルの横の今すぐインストールをクリックすると、数秒でインストール中から有効化に変わるのでそのまま有効化をクリックします。CSSを有効化するだけで、ページ(投稿、個別)の下部にカスタムCSSの入力ボックスが追加されます。カスタムCSSの編集手順お問い合わせフォームは、固定ページに作成している方がほとんどだと思いますが、通常ページの場合も同じ手順です。7のIDコードが表示されているだけの状態です。そのままページ下部までスクロールしていきます。画像はビジュアルエディタですが、テキスト(コード)エディタでも同じ要領です。カスタムCSSの入力ボックスに、カスタマイズ用のCSSを貼り付けます。7の画面は一切編集しません。サイト内のカスタムCSSにコピペするだけです。下の画像は、CSSが貼り付けてある画像です。実際は空白の状態です。コードを貼り付けたら、更新ボタンをクリックします。プレビューボタンかページを表示で確認してください。お使いのテーマにカスタムCSSがない場合や、プラグインを使いたくないという場合は、テーマのファイルを編集してください。こちらも、既存のテーマファイル(スタイルシート)にコピペするだけです。子テーマのスタイルシートにCSSを追加(既存のデータはバックアップしておく)ファイル更新をクリック※以前に設置してあるCSSコードがある場合は、編集前に既存のデータを保存(バックアップ)してからコードを追加してください。ダッシュボード画面の外観にカーソルを置くとサブメニューが表示されるので、その中のテーマの編集をクリックします。テーマの編集をクリックすると子テーマのスタイルシートを編集する画面に変わります。表示されているページが子テーマ(child)であることを確認してください。CSSを設置する場合は「子テーマ用のスタイルを書く」の下にコードを追加します。「/*必要ならばここにコードを書く*/」の文字は削除してもいいですし、その下に追加しても大丈夫です。以前にCSSを設置している場合は、その下(続き)に追加してください。コードを追加したら、ファイルを更新ボタンをクリックします。サイトを表示して確認してください。デザイン例3選とコピペ用CSS今回紹介するカスタマイズは、フォームの入力欄と送信ボタンのデザインです。デザインの違う3パターンの画像とCSSを紹介します。入力欄は、お名前、メールアドレス、題名、メッセージ本文です。送信ボタンは、マウスオーバーでデザインが変化します。CSSはトグルボックスをクリックして開いてください。コードと一緒に書いてある説明(赤文字)はコメントアウトです。サイト表示には反映されないので全コピで使ってください。デザイン例1入力欄の背景色と枠線の色(入力中)が変化します。送信ボタンはマウスオーバーで色が変化します。**/デザイン例2入力欄(入力中)の枠線に影を付けるパターンです。送信ボタンの角を丸くして楕円形に、文字は太文字にしています。**/デザイン例3フォーム全体のサイズを小さくして中央に配置しています。入力欄の枠線は、実線から破線(入力中)に変化します。/*ボタンの色が変化する時間(0.5秒)*/}.wpcf7-form{text-align:center;/*フォーム全体を中央*/}/**お問い合わせここまで**/下の画像は、フォーム全体の横幅を小さくしたデザイン例3と、デフォルト仕様の比較画像です。入力欄と送信ボタンは別々にサイズを変更できます。デザインを変更するときのCSS書き換え色の変更は、#○○○○○○;の数字とアルファベットを変更してください。○○pxの数字を変更すると、文字の大きさと枠線の太さを変更できます。影のところの○○PXは、ぼかし度と広がり度を変更できます。紹介しているCSSの横に、何についての記述なのかを書いてありますので、参考にしてもらえればと思います。カラーサンプルは以下のサイトを参考にしてください。box-shadowとborder-radiusジェネレーターCSS3で使うbox-shadowのジェネレーターです。Nativeのも作ってくれます。ついでにborder-radiusも設定出来ます。7)のカスタマイズを紹介させていただきました。シンプルなカスタマイズですが、動作の変化がわかるようにしておくと、送信者の方の利便性が高まりますよね。入力する項目も、連絡手段としてなら必要最小限でよいのではないでしょうか。住所や電話番号などの個人情報が項目にあっても、ためらわずに入力する人はほとんどいないですしね。今回紹介したやり方なら、難しいコードの編集をしなくても、簡単コピペでカスタマイズできます。サイトのちょっとした演出にぜひお試しください。コメントをキャンセルメールアドレスが公開されることはありません。*サイトプロフィールこんにちわ。建築系の自営業をしている既婚者です。自分で初めて作成したホームページで少しずつ集客できるようになってきたので趣味でブログをはじめてみようと思いました。ジャンルにとらわれない自由なブログにしたいと思っています。プロフィールこんにちわ。建築系の自営業をしている既婚者です。自分で初めて作成したホームページで少しずつ集客できるようになってきたので趣味でブログをはじめてみようと思いました。ジャンルにとらわれない自由なブログにしたいと思っています。7デザインカスタマイズ【シンプル3選】2019.12.152019.12.25楽天モーションウィジェットが動かないときの対処法【スマホ最適化】2019.10.242019.11.12アドセンスポリシー違反の対処法【違反画像と修正画像公開中】2019.10.082019.12.02【画像解説】ワードプレスCocoonのコメントフォームカスタマイズ基本編2019.10.052019.12.25ワードプレスCocoonのコメントボタンのカスタマイズ8選2019.09.302019.12.25Chromeの画面が真っ白!検索出来ないときの対処方は3クリックで解決2019.08.142019.08.27トレンドネタはアクセス数を稼げるのか?初心者が無料ブログで検証してみた2019.07.042019.07.12はてなブログにGoogleアナリティクスを導入しよう【画像解説】2019.07.032019.07.27。