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

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

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

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

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

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

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

こんな感じですね。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

編集前▼

編集後▼

まとめ

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

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

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

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

今回は、誰でも簡単にテキストウィジェット
の文字に色を付けたり、太字にしたりする
装飾の方法を図解入りで詳しく解説します♪

テキストウィジェットを使って、
・記事本文下に定型文
・サイドバーにプロフィール

という設定をする事がありますよね。

そんな時、
・黒文字だけでシンプルすぎる
・テキストウィジェットに書いた文字にも色をつけたい
・太字にしたり、文字を強調して目立たせたい

と、思う事がありませんか？

テキストウィジェットには、HTMLのタグを使う事で
文字に色をつけたりの設定が可能なのですが、

多少のタグの知識がないと、ちょっと難しいです。

タグは、文字に意味を持たせる役割をします。

例えば、太い文字にしたいなあと思ったら、文字を挟んで両側に
<strong>文字</strong>とタグをつける事で太文字に出来ます。

が、細かく設定しようと思ったら大変ですし、
何より面倒くさいです(*_*;

そこで、誰でも簡単に【タグの知識ゼロ】
でテキストウィジェットの文字を装飾する方法を解説します。

簡単すぎて驚きますよ～(*^^*)♪

ウィジェットに載せたい文章は、投稿編集画面で書く

えっ、テキストウィジェットに
そのまま書きこまないの？

と思ったと思いますが、その通りです。

テキストウィジェットには書きこまないで、
投稿編集画面で文章作成するのがポイントです^^

テキストウィジェットには、
普段記事を書いている時の画面のように
色をつけたり、線を引いたり
する為の項目がまずないですよね。

そのため、タグを使わない限りは
黒い文字で文章を書くしかないです。

ただ、このタグを使うというのがポイントです。

投稿の編集画面を開いて、何か文字を書いて
太文字に設定してみて下さい。

太文字に出来たら、テキストに切り替えて下さい。

すると、このような表示が出ます。

これ、見覚えありますよね^^

記事の冒頭で例を出した、
太文字のタグが表示されています。

つまり、投稿の編集画面で入力した文字には
全てにタグが付いている状態です。

なので、このタグが付いた状態の文章を
テキストウィジェットに貼り付けるだけで、
そのままの装飾がウィジェットに反映されます♪

(テキストに切り替えた状態の文章をそのまま貼り付けます)

例えばこの文章、

これは、投稿編集画面で書いた
タグが付いた状態の文章を
テキストウィジェットに貼り付けただけです。

手順としては、

①投稿編集画面で文章を書いて、②テキストに切り替える。

表示されている文字を全てコピーして、

テキストウィジェットにそのまま貼り付ける。
そして保存をクリック。これだけです^^*

これで、文字の装飾などが全て反映されます。

ちなみに、画像も同じやり方が可能です。

画像の情報をテキストウィジェットに貼り付ける

実際にやってみて分かったのですが、
なんと、違うタブで開くように画像に設定した
リンクまで、そのままテキストウィジェットに
反映させる事が出来ます♪

『ウィジェットにメルマガなどのお知らせ画像を載せて
　クリックしたら違うタブで開けば良いのにな～』

と思っていたのですが、
投稿編集画面でその設定をしておけば
テキストに切り替えてコピー → 貼り付け

という同じ作業で反映されることが分かりました。

画像の場合のやり方も説明しておきますね。

①ウィジェットに載せたい画像を投稿編集画面に貼って、

画像を選択した状態で、②のリンクの挿入ボタンをクリック。

出てきた表示の一番右をクリックして、

①画像に付けたいサイトのリンク(URL)を入力

②画像をクリックしたときに
　違うタブで開くようにチェックを入れて、

③のリンク追加をクリック。

次に、テキストに切り替えて

表示された文字を全てコピーします。

そして、テキストウィジェットに貼り付けて保存。

これで、実際の画面ではこのように
画像が表示されます。

この画像をクリックする事で、
ちゃんと設定したリンク先のサイトが
違うタブで開きます(^^)♪

コピペで使える便利なタグの紹介

投稿編集画面でテキストに切り替えると、
色んなタグが表示されていましたよね。

あのままの画面の文字を全てコピーすれば
OKなのですが、

その中でも、よく使うと感じたタグを
いくつかご紹介しておきます(^^)

このページのタグをそのままコピーしてお使いください♪

※文字の部分を、自分が入れたい言葉や
URLに変えて利用して下さい。

・文字を太文字にするタグ

<strong>太字にする文字</strong>

・文字に色をつけるタグ

<span style=”color: 付けたい色 “>色を付ける文字</span>

色については、こちらのサイトを参考にして下さい。
↓↓
色見本

・文字にマーカーを引くタグ

<span style=”background-color: 付けたい色”>マーカーを引きたい文字</span>

色については、同じく上記のサイトを参考にして下さい。

・画像を表示させるタグ

<Img Src=”画像のURL”>

・テキストリンクをクリックして、
　指定のURLにアクセスしてもらいたい時のタグ

<A Href=”アクセスする先のURL”>テキストリンクにする文字</A>

よく使うタグをいくつか挙げてみました^^*

コピーして、貼り付けて、
文字の部分を指定したいURLや文字に
変えるだけで利用できます。

もし良かったら使ってみて下さいね♪

まとめ

今回のテキストウィジェットでの
文字の装飾と画像のリンクについては

知っている人は知っている知識でしょうが、
私からすると大発見でした。

これでもうタグは怖くないですね～♪

ぜひ活用してみて下さいね^^*