サイトに記事を投稿する際、文章の重要点などに文字を大きくしたり色付けしたりして
インパクトを付け強調する場合が良くあります。

これはWordpressなどのビジュアルエディターなどについているクイックタグを使えば簡単に出来るのですが
少し面倒で難しいかも知れませんけど、出来ればテキスト形式でHTMLタグを用いて記事作成をやっていただきたい!

今回は、何故面倒なHTMLタグをわざわざ使って記事作成をしてもらいたいのか?その理由と
HTMLタグを使った文字装飾方法を具体的に解説します。

文字装飾HTML  

 

 

 

 

 

面倒なHTMLタグを覚え使って欲しい理由

初心者の方などにはHTMLタグ利用は少々難しい部分があります。

それにHTMLを覚えなくてもWordpressであれば
ビジュアルエディターを使って自由に記事作成が出来ます。

 

「参考:Wordpressのビジュアルエディター編集画面」
文字装飾HTML

 

 

 

 

 

 

 

ビジュアルエディターは便利で使いやすいですが、
出来ればあまりコレに頼った記事作成はしてほしくないのです。
その理由として詳しくはコチラの記事↓↓をご覧いただきたいのですが
参考記事:【初心者が陥りやすいWordPress記事作成時の落とし穴】

 

このように、あまり便利な機能を多用し過ぎるとサイトそのものの評価を下げてしまう可能性があるからです。

 

そんな理由もあり、ここでは記事作成時に良く用いられる文字の装飾についてHTMLタグでの使い方の解説をします。
パソコンが苦手な初心者の方などには、少々大変かも知れませんが少しずつでも良いですの覚え使って下さい。

 

テキスト文字の大きさを変更するHTMLタグの使い方

テキスト文字の大きさを変更するには「font size=」というタグを使います。

 

このタグを使うと大きさを1~7段階まで調整し表示させることが出来ます。
1~7までの数字が大きくなればなるほど文字サイズが大きくなります。

 

HTMLタグの書き方は以下のとおり
font size=”1~7″>文字列</font>

 

サイズ指定した具体例
<font size=”1″>文字列</font>文字列
<font size=”2″>文字列</font>文字列
<font size=”3″>文字列</font>文字列
<font size=”4″>文字列</font>文字列
<font size=”5″>文字列</font>文字列
<font size=”6″>文字列</font>文字列
<font size=”7″>文字列</font>文字列

 

テキスト文字の色を変更するHTMLタグの使い方

テキスト文字の色を変更するには「font color=」というタグを使います。

 

HTMLタグの書き方は以下のとおり
<font color=”カラーコード”>文字列</font>

 

色を指定した具体例
<font color=”カラーコード(赤)”>文字列</font>
<font color=”カラーコード(青)”>文字列</font>
<font color=”カラーコード(黒)”>文字列</font>
<font color=”カラーコード(緑)”>文字列</font>
<font color=”カラーコード(ピンク)”>文字列</font>

 

指定する色はカラーコードがありますので、それを参照して色付けして下さい。
参考サイト:【カラーコード表一覧】
※ 基本色で色をつける場合は、カラーコードを”red”,””blue”といったカラー名で指定した方がわかりやすいですが、よりバリエーションに富んだ色指定なら16進数でのカラーコードを使って下さい。

 

テキスト文字に背景色を付けるHTMLタグの使い方

マーカーのように、テキスト文字に背景色をつける方法もあります。

 

HTMLタグの書き方は以下のとおり
<font style=”background-color:カラーコード”>文字列</font>

 

背景色を指定した具体例
<font style=”background-color:カラーコード(赤);文字列</font>文字列
<font style=”background-color:カラーコード(青)”>文字列</font>文字列
<font style=”background-color:カラーコード(黄);文字列</font>文字列



 

テキスト文字に線を引くHTMLタグの使い方

文字列の様々な場所に線を引く方法が以下のやり方です。

 

・文字に下線を付ける方法。
<u>文字に下線を付ける</u>文字に下線を付ける

 

・文字に取り消し線を付ける方法。
<del>取り消し線を付ける</del>⇒ <文字に取り消し線を付ける

 

・1行に線を引く方法⇒ <hr>↓↓



 

・1行に引いた線の長さを変える方法⇒ <hr width=200>↓↓



 

・1行に引いた線の長さを変え、更に色を付ける方法⇒ <hr width=200 color=red>↓↓



 

テキスト行を背景色で囲むHTMLタグの使い方

少し難しいですが文章にメリハリをつけたい場合など、行全体を背景色で囲むことも出来ます。

 

HTMLタグの書き方は以下のとおり
<p style=”background-color:#FFE2E8;border:1px solid #FF99CC;padding:5px;”>文字列/p>

 

背景色で囲んだ具体例

文字列

 

上記のタグ記載方法は以下のとおりです。
<p style=”margin: 0; padding: 10px; padding-left: 40px; border: 1px solid #ccc; background-color: #f7f7f7;”>文字列</p>


 

文字列

上記のタグ記載方法は以下のとおりです。
<p style=”background-color:#FFE2E8;border:1px solid #FF99CC;padding:5px;”>文字列</p>