WordPress投稿時の文字サイズ・色HTMLタグでの変更方法

htmlバナー

Wordpressでのブログ記事投稿時に、
文字サイズや文字色を変更して文字装飾することができます。

使用しているWordpressテンプレートごとにも独自設定あったり(ショートコード)、
WordPressのビジュアルエディタでも変更できますが、
タグを使った基本的なWordpressでの文字装飾を解説します。

テキスト文字の色を変更する

テキスト文字の色を変える場合には「font color=」タグを使って色を指定します。

<font color="red">赤</font>
<font color="blue">青</font>
<font color="green">緑</font>
<font color="yellow">黄色</font>
<font color="Fuchsia">ピンク</font>

次のようにカラーコードを選んで指定する事でも変更が出来ます。

カラーコード「#DC143C」の色
<span style="color: #dc143c;">カラーコード「#DC143C」の色</span>

カラーコードを使うことによって、沢山の種類の色に変更する事が出来ます。
カラーコードは、こちらのサイトで確認できます。

参考:カラーコード表 ウェブサイト


賢威6.1限定ショートコード 文字に背景色をつけるタグ

以下はワードプレステンプレートで賢威を使用している場合に有効なショートコードです。
テキスト文字に背景色をつけることができます。

  • 黄色マーカー
  • <span class="box-yellow">黄色マーカー</span>

  • 水色マーカー
  • <span class="box-aqua">水色マーカー</span>

  • 灰色マーカー
  • <span class="box-gray">灰色マーカー</span>

  • 赤色マーカー
  • <span class="box-red">赤色マーカー</span>

※ショートコードは指定テンプレートごとなどで利用できるもので、それ以外だと無効になります。

テキスト文字のサイズを変更する

テキスト文字のサイズを変えるにはスタイルシートを使った%での全体での変更方法などもありますが、
部分指定では簡単な「font size=」タグを使った方法を解説します。


文字サイズの大きさは数字の1~7までとなっており、
数字が大きいほど大きなサイズになります。

フォントサイズ1 ⇒<font size="1">フォントサイズ1</font>
フォントサイズ2 ⇒<font size="2">フォントサイズ2</font>
フォントサイズ3 ⇒<font size="3">フォントサイズ3</font>
フォントサイズ4 ⇒<font size="4">フォントサイズ4</font>
フォントサイズ5 ⇒<font size="5">フォントサイズ5</font>
フォントサイズ6 ⇒<font size="6">フォントサイズ6</font>
フォントサイズ7 ⇒<font size="7">フォントサイズ7</font>

その他の文字装飾HTMLタグ

文字を太文字にする ⇒ <b>文字を太文字にする</b>

文字を斜体にする ⇒ <em>文字を斜体にする</em>

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

文字に下線を付ける ⇒ <u>文字に下線を付ける</u>

ノート風の下線を付ける
⇒ <font style="border-bottom: 1px dashed">ノート風の下線を付ける</font>

文字に背景色を付ける
⇒ <font style="background-color:#FFFF00">文字に背景色を付ける</font>
(背景色はカラーコードで指定)


水平線を引く


⇒<hr>

水平線の長さを変える


⇒<hr width=200>

水平線の色を変える


⇒<hr width=200 color=red>


HTMLタグの組み合わせで文字装飾

赤い文字で太文字にする
⇒ <font color="red"><b>文字を太文字にする</b></font>

フォントサイズ4の太文字で赤にする
⇒ <font color="red" size="4"><b>フォントサイズ4の太文字で赤にする</b></font>

文字に背景色を付け下線を付ける
⇒ <font style="background-color:#FFFF00"><u>文字に背景色を付け下線を付ける</u></font>

文字を太文字にして背景色を付け下線を付ける
⇒ <font style="background-color:#FFFF00"><u><b>文字を太文字にして背景色を付け下線を付ける</b></u></font>

文字を赤太文字にして背景色を付け下線を付ける
⇒ <font color="red"><font style="background-color:#FFFF00"><u><b>文字を太文字にして背景色を付け下線を付ける</b></u></font></font>


ウェブ上にHTMLタグを表示させる場合

そのままの記号で書き込んでもWEB上では表示されない特殊文字の場合は、
それぞれ指定されている特別な記号で記述して表示させます。

以下のコードを記述する場合の特別記号です。

  • <は、&lt;
  • >は、&gt;

上記に置き換えて記述します。


テキストの背景色変える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="margin: 0; padding: 10px;border: 1px solid #ccc; background-color: #f7f7f7;">男には休日は無い</p>
と表示しています。

それぞれHTMLタグの指定している内容を変更していくことにより、
枠の幅や背景色、文字の配置場所等を変更することが可能です。

HTMLを少しづつ習得することにより理解していきましょう。


注意事項

上記htmlタグを、コピー・ペーストでそのまま使う場合、
「”」の部分が、ウェブの特性上全角に変換されていますので、
記述する際に、その部分を半角に変更して下さい。

(2013年7月19日更新で特殊文字に対応しました。そのままコピペできます)


関連記事

以下の記事は、当記事と同じく基本的なhtmlタグをまとめています。

以下の記事でhtml文法のチェックできるツールを解説しています。


当サイトは人気ブログランキングに参加しています。
かなりな位置にいますので、是非現在の順位を以下のボタンより確認してみて下さい。
↓ ↓


記事の内容はいかがだったでしょうか?

もしも当記事を読んで少しでも興味深く思われましたら、
以下のソーシャルメディアボタンで共有してもらえると嬉しいです!
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓   


月収100万円を稼ぐ為のメルマガ講座に無料登録しませんか?


お名前 必須
メール 必須


コメントを残す

サブコンテンツ

このページの先頭へ