今回は、テキストウィジェットで活用できるタグのご紹介です。

 

色々あるウィジェットですが、その中で【テキスト】というウィジェットがあります。

実は、これは使い勝手がとても良いので、是非活用をお勧めします。

wegit01

 

簡単に言うと、テキストだけでも、画像を張り付けたり、リンクを貼ったりできますのでユーザビリティーの向上ができるだけではなく、読者さんに対して記事への誘導などがしやすくなります。

 

ただ、投稿フォームのようにフォントを色付けしたり画像を挿入する便利なショートカットボタンが備わっていない為、ちょっとしたHTMLタグの知識が必要となります。

そこで、すぐに使える便利なタグをいくつかご紹介します!

wegit02

スポンサーリンク

基本的なタグををコピペ活用しよう!

ここでは、コピペで活用できるタグをいくつか紹介します。

すぐに使えるので、是非ウィジェットをいじる際に試してみてください。
基本的に黄色にマーカー下部分をコピペで使えます!

リンクタグ URLを指定したい場合

説明:特定のアドレスにアクセスしてもらいたいときに使います。

 

■ リンクを貼るタグ

<A Href=”アクセスしてもらいたいアドレス(URL)”>文言もしくはイメージタグ</A>

 

■ リンクにマウスを乗せると説明文が表示される

<A Href=”アクセスしてもらいたいアドレス(URL)” Title=”説明文”>文言もしくはイメージタグ</A>

 

■ リンク先を別ページで表示させる

<A Href=”アクセスしてもらいたいアドレス(URL)” Target=”_blank”>文言もしくはイメージタグ</A>

 

注意点として、必ずリンクタグは閉じて下さい。

リンクタグは、<A Href=”アクセスしてもらいたいアドレス(URL)”>で「ここから先の文字や画像をクリックすると、指定したアドレスにアクセスさせますよ。」

という意味ですので</A>の「ここまでですよ。」という命令をしないと、どこまでもリンクになってしまいます。

 

イメージタグ 画像を挿入したい場合

説明:画像を表示させたい場合に使います。

 

尚、画像は予めサーバーにアップロードしておいて下さい。

僕も昔やりましたが、デスクトップからの表示は出来ません。

 

■イメージを表示させるタグ

<Img Src=”表示させたい画像のアドレス”>

 

■表示させる画像のサイズ指定をする場合

 <Img Src=”表示させたい画像のアドレス” width=”画像の横幅” height=”画像の高さ”>

因みに、サイズは、ピクセル数もしくはパーセントで指定可能です。

予め画像のサイズを合わせておくのもいいですし、これを活用するのも手です。

 

文字関連 文字を太くしたり、ハイライトする

説明:文字の装飾で使います。恐らくブログ上で一番使うタグでしょう。

 

■太字

<strong>太字にしたい文字</strong>

 

■ななめ文字

<em>ななめ文字</em>

 

■文字サイズ

<span style=”font-size: 文字のサイズpt;”>このようにサイズ指定 </span>

太字の箇所でサイズを指定します(数字)。

 

■文字カラー

<span style=”color:  “>色を付けます</span>

*太字の箇所で色を指定します。

 

■アンダーバー

<span style=”text-decoration: underline;”>下線をつけます</span>

 

■カラーマーカー

<span style=”background-color: #ff6600;”>このようにマーカーを引きます</span>

*太字の箇所で色を指定します。

 

文字装飾のタグに関しても、リンクタグ同様に必ず閉じて下さい。

 

尚、色の指定ですが下記サイトを参考にしてみて下さい。

色見本 原色大辞典

 

 

リンク・画像表示・文字装飾は組み合わせることができますので、自分の表現したいように組み合わせてみるといいでしょう。

 

まずはこう言った小ネタを駆使して、読みやすい記事を増やすことを心がけてみてはいかがでしょうか!

これらが分かるだけで、ブログの記事はグッと変わりますよ!