こんにちは、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や文字に
変えるだけで利用できます。

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

まとめ

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

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

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

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