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

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

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

 

まとめ

 

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

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

 

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

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

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

      ■私が「就職」ではなく「ネットビジネス」という生き方を選択した理由
      ■自由を手に入れた今の現状
      ■あなたに伝えたい、ネットビジネスにおいて大事な考え方

などについての音声講座(無料メルマガ)を配信しています^^*

メルマガ

2 件のコメント

  • こんにちは。ブログランキングから参りました。

    私はタグの知識が全然ないのですが、
    ご紹介されていた方法は、「その手があったか!」という感じで、
    すぐに真似してみたくなりました。

    また訪問させていただきますね☆

    • ブログランキングからありがとうございます(*^^*)

      そうですね!
      難しい設定をする必要がないので、
      かなり役に立つ方法だと思います。

      ぜひぜひお試し下さい~^^

      またのご訪問、お待ちしております♪

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です