こんにちは、chieです(^^)
今回は、Contact Form 7のお問い合わせフォームの文字を簡単に装飾する方法
を図解入りで詳しく解説します。
Contact Form 7で作ったデフォルトのお問い合わせフォームは、
ただの黒文字だけで何だか寂しいですよね。
▼▼
そこで、難しい知識無しで簡単に文字の色を変えたり
装飾をする方法を解説していきます^^
目次
フォームをコピーして投稿ページで編集する
まずはコンタクトフォームの編集画面を開きましょう。
ダッシュボードから、
【お問い合わせ】⇒【コンタクトフォーム】をクリックします。
あなたが作ったお問い合わせフォームを開いてください。
こんな感じですね。
次に、【投稿】⇒【投稿一覧】
にカーソルを合わせて右クリックをします。
出てきた項目から、新しいタブで開くをクリックしてください。
そして、その新しく開いたタブで
【投稿】⇒【新規追加】をクリック。
編集画面が開きました^^
今は、
①元々開いていたお問い合わせフォーム
②新しいタブで開いたページ
の2ページが開いていますよね。
まずは①を表示させてください。
フォームに記載されている文字を全てコピーします。
そして、新しいタブで開いた
②の投稿編集画面を表示させてください。
そして、
①テキストタブを開いて
②先ほどコピーした文字を貼りつけます。
次に、テキストタブをビジュアルタブに切り替えます。
そして、この状態でお好きに文字を装飾してください♪
通常の記事を書くときと同じです^^*
装飾ボタンの種類を増やしたい場合は、
こちらの記事を参考にしてください。
▼▼
「文字の大きさや背景色」を変えるプラグイン
私の場合はこんな感じに装飾してみました。
装飾が出来たらまたテキストタブを開いて、全ての文字をコピーします。
フォームに編集したコピー文を貼りつける
次に、お問い合わせフォームのタブを表示させてください。
元々記載されていた文字を全て消して、
先ほどコピーした文字を貼りつけます。
そして、保存をクリックします。
お問い合わせページを確認する
お問い合わせページを見てみてください。
このように編集後の表示に変更されているはずです^^*
編集前▼
編集後▼
まとめ
投稿の編集画面のテキストタブを使えば、
このようにHTMLの詳しい知識無しで編集をする事が出来ます。
このやり方はウィジェットなどにも使えるので
ぜひ色々試してみてくださいね♪
こちらの記事も参考にしてみてください^^
▼▼
誰でも簡単に、テキストウィジェットの文字に色などの装飾を付ける方法
初めまして、こんばんは。
ランキングから訪問させていただきました。
出来上がっているお問い合わせフォームの文字装飾、
ワードプレスを使い慣れていない私にとっても
とても分かりやすい説明でした。
ぽちっとさせていただきます。
ありがとうございました。
kinokaさん、初めまして。
ご訪問ありがとうございます♪
分かりやすかったという事で良かったです^^
応援ぽちもありがとうございます(*^^*)
chieさん。こんにちは。
ランキングサイトからお邪魔しました。
「編集後▼」の見た目の方が、、
なんだか、、「ホンワカ」した雰囲気があって
印象がイイですね。(*´▽｀*)
ランキング２か所応援をさせていただきました。
mioruさん、こんばんは。
ご訪問ありがとうございます♪
「ホンワカ」した雰囲気ですか～！
編集前の硬い印象を変えたかったので
そう感じていただけて嬉しいです( *´艸｀)
応援もありがとうございます^^*