今回は、Contact Form 7のお問い合わせフォームの文字を簡単に装飾する方法
を図解入りで詳しく解説します。

Contact Form 7で作ったデフォルトのお問い合わせフォームは、
ただの黒文字だけで何だか寂しいですよね。
▼▼

そこで、難しい知識無しで簡単に文字の色を変えたり
装飾をする方法を解説していきます^^

フォームをコピーして投稿ページで編集する

まずはコンタクトフォームの編集画面を開きましょう。

ダッシュボードから、
【お問い合わせ】⇒【コンタクトフォーム】をクリックします。

あなたが作ったお問い合わせフォームを開いてください。

こんな感じですね。

次に、【投稿】⇒【投稿一覧】
にカーソルを合わせて右クリックをします。

出てきた項目から、新しいタブで開くをクリックしてください。

そして、その新しく開いたタブで
【投稿】⇒【新規追加】をクリック。

編集画面が開きました^^

今は、
①元々開いていたお問い合わせフォーム
②新しいタブで開いたページ

の2ページが開いていますよね。

まずは①を表示させてください。

フォームに記載されている文字を全てコピーします。

そして、新しいタブで開いた
②の投稿編集画面を表示させてください。

そして、
①テキストタブを開いて
②先ほどコピーした文字を貼りつけます。

次に、テキストタブをビジュアルタブに切り替えます。

そして、この状態でお好きに文字を装飾してください♪

通常の記事を書くときと同じです^^*

装飾ボタンの種類を増やしたい場合は、
こちらの記事を参考にしてください。
▼▼
「文字の大きさや背景色」を変えるプラグイン

私の場合はこんな感じに装飾してみました。

装飾が出来たらまたテキストタブを開いて、全ての文字をコピーします。

フォームに編集したコピー文を貼りつける

次に、お問い合わせフォームのタブを表示させてください。

元々記載されていた文字を全て消して、
先ほどコピーした文字を貼りつけます。

そして、保存をクリックします。

お問い合わせページを確認する

お問い合わせページを見てみてください。

このように編集後の表示に変更されているはずです^^*

編集前▼

編集後▼

まとめ

投稿の編集画面のテキストタブを使えば、
このようにHTMLの詳しい知識無しで編集をする事が出来ます。

このやり方はウィジェットなどにも使えるので
ぜひ色々試してみてくださいね♪

こちらの記事も参考にしてみてください^^
▼▼
誰でも簡単に、テキストウィジェットの文字に色などの装飾を付ける方法

こんにちは、chieです(^^)

今回は、WordPressでサイドバーにお問い合わせフォームを設置する方法について図解入りで詳しく解説します。

・ついでにウィジェットの使い方も知りたい
・お問い合わせ用の記事をすでに作成している
・contactform7(プラグイン)をインストールしている

という方向けの内容になります。

お問い合わせフォームを設置するには、先に固定ページでお問い合わせ用の記事を作成しておく必要があります。

先にこちらの記事を参考に固定ページで記事を作ってみて下さいね。

WordPressの固定ページにコンタクトフォームを設置するプラグイン【ContactForm7】

では早速取り掛かりましょう♪

WordPressでサイドバーにお問い合わせフォームを設置

まずはワードプレスにログインして、ブログの管理ページに入りましょう。

このページはブックマークしておきましょう。

よく見るサイトをブックマークに登録する方法【GoogleChrome】

今ログインしている画面の左側に、黒い背景の項目がずらーっと並んでいますね。

ダッシュボード、ホーム、更新などと文字の書いてある部分です。

今後、この項目を利用して記事を書いたり編集したりしていく事になります^^

外観→ウィジェット

サイドバーにお問い合わせフォームを設置するには、ダッシュボードから【外観】→【ウィジェット】をクリック。

青色の線を付けている場所が、今回設定に使っていく場所です。
(これと全く同じ項目が並んでいる必要はありませんので、自分の画面と違っていても大丈夫です^^)

緑色の線を付けている場所も、使用しているワードプレスのテーマによって変わってきます。
同じ項目がなくても気にしなくてOKです。

ちなみに、私が今使用しているテーマはSimplicity2 です。(現在は変更しています)
カスタマイズしやすい無料テーマでSEO的にも強いのでおススメです。

【WordPress】Simplicityの無料で利用できるテンプレートのテーマ導入で簡単にSEO対策♪

サイドバーにお問い合わせフォームを付けるには、上の画像の青色の線を付けている部分に【テキスト】という項目を追加する必要があります。

テキストを追加

ウィジェットのサイドバーに【テキスト】を追加していきましょう。

利用できるウィジェットと書いてある下にあるのが利用できるウィジェットです。

この中のどこかに【テキスト】というウィジェットがあるので、画像のように下にスクロールして探します。

【テキスト】のウィジェットが見つかりましたか？

任意のテキストやHTMLという表記がありますが、これは、このウィジェットを使えば自分の好きな言葉で項目を追加できるという事です。

文字の色を変えたりする事もできます。

【WordPress】タグの知識は必要なし♪簡単にテキストウィジェットの文字に装飾を付ける方法

次に、テキストの文字をクリック。

クリックすると、このような項目が出てきます。

一番上のサイドバーウィジェット
(サイドバーという文字があればOK)
が選択されている事を確かめましょう。

選択されていなかったら、サイドバーと文字がある項目をクリックして選択して下さい。

そして、ウィジェットを追加をクリック。

これで、サイドバーのウィジェットに【テキスト】というウィジェットが追加されました。

ここまで来ればもう少しで設定は完了です♪

上の画像で解説していきます。

①この部分にはタイトルを書き込みます。

お問い合わせやお問い合わせフォームなどと記入すればOKです。

②ここが少し分かりづらいですね。
ただ文章を入れるだけでは、お問い合わせフォームへのリンクをつける事が出来ません。
そこで、HTMLを使ってリンクを作成します。

←先ほどの【テキスト】をウィジェットに
追加するという手順での画像です。

ここに、任意のテキストやHTMLとありましたよね。

HTMLは、リンクを入れたり文字を強調したりなどの、文章を整理する為のものだという風に理解できれば良いと思います。

【WordPress】タグの知識は必要なし♪簡単にテキストウィジェットの文字に装飾を付ける方法

②で使用するHTMLはこちらです。

<a href=”リンク先のURLを入れる“></a><br>
<a href=”リンク先のURLを入れる“>お問い合わせはこちら</a>

分かりやすいように色分けをしています。

まずは、リンク先のURLを入れると書いてある部分が二か所ありますね。

この二か所に、固定ページで作成したお問い合わせ用の記事のURLを入れましょう。

WordPressの記事や画像のURLの確認方法とリンクの設定方法

上記のHTMLの青色でマークしているお問い合わせはこちらという文字は、この部分をクリックするとお問い合わせ用の記事へと移動する事になります。

この部分には、リンクをクリックする為の誘導の文章を自分なりに入れてみて下さい。

そして最後に、④の保存をクリック。

これであなたのブログのサイドバーにお問い合わせフォームを設置する事が出来ました^^

設定の確認とまとめ

ちゃんとサイドバーに設定が反映されたかどうかの確認をしてみましょう。

ウィジェットの使い方についても触れたので、自分なりに色々とウィジェットを設定してみて下さいね^^

サイドバーはブログ訪問者の目につきやすい場所です。

画像を設定したりしてオリジナルのサイドバーを作成してみましょう♪