ブログライターが使える!HTMLで使う色を覚えて文字の色・背景色を変えよう!


ブログを作成する際、「こうしたいのにできない (><)」とお困りのことを解決!

前回はブログで使える表の作り方を5つご紹介いたしました。

今回は↓このんな風に↓文字の色を変えたり、背景色をつける方法をご紹介です!
HTML カラーコード 文字色 背景色 変更方法

まずはどうやって色を表示されているかご紹介いたします。

「それは知ってる」という方はこちらのボタンで説明スキップしてください。

まずはWEBで使う色の仕組みを知ろう!

パソコン・スマートフォンの画面は「光の三原色」で全て表示されています。
RGBと聞いたことはありますでしょうか? (R=赤(red)=緑(green)・B=青(blue)

光の三原色 RGB WEBカラー
↑こんなやつです↑

WEBでは、この赤(Red)緑(Green)青(Blue)の三色それぞれの明るさで色を表現しています。

で?そのRGBをどうしたらいいのさ?

というのが一番知りたいところだと思いますが、
WEBではこんな風「#」と「6ケタの英数字」で表記して、色を指定しています。

# 00RED 00GREEN 00BLUE

というように、左から2ケタずつ 色の明るさを指定します。

明るさは16進数で表し、段階は下記の通りとなっています。

0 1 2 3 4 5 6 7 8 9 A B C D E F

↑のように「0」が一番暗く、「F」が一番明るくなります。

それでは 実際に色を作ってみよう!

「赤」を表示するには

黒い紙に赤いライトだけつけた状態を想像してください。

ということで、「赤い部分だけを明るく」した下記のような記載をします。

# FFRED 00GREEN 00BLUE

あか(RED)

このように「#FF0000」が赤になります。
赤の明るさをちょっと暗くすると■こんな色■になったり、■こんな色■になったりします。

緑と青も赤と同様に表現できます。

「赤・緑・青」以外はどうするの?

黒い紙に「赤」と「緑」のライトを当てると・・・


↑こんな風↑に重なる部分が黄色になります。

なので、黄色は下記のように表します

# FFRED FFGREEN 00BLUE

黄色(YELLOW)

このように赤と緑がついた状態→「#FFFF00」が黄色になります。

どんどんいきます!

今度は「赤」と「青」のライトを当てると重なった部分はこんな風になります。

# FFRED 00GREEN FFBLUE

マゼンタ(magenta)

今度は「緑」と「青」のライトを当てると・・・

# 00RED FFGREEN FFBLUE

シアン(cyan)

といったように表現できます。

ちなみに黒・グレー・白は

光の三原色 RGB WEBカラー
↑3色の中心↑が白くなってるように
赤・緑・青の明るさを全て同じ明るさにすると表現できます。

なので「白」は全てライトがついた状態

# FFRED FFGREEN FFBLUE

ホワイト(white)

「黒」は全てライトが消えた状態

# 00RED 00GREEN 00BLUE

ブラック(black)

で表します。

仕組みはわかったけど・・・

毎回「赤がこの位で、青が・・・・で何色?」と考えるのは大変ですよね?

そこで、便利なものがありまして。


参照:原色大辞典

こちらのようなWEBの色辞典に色々な色の設定が記載されております。

そちらをまずご活用いただくとわかりやすいです!

仕組みが分かったところで、文字の色を変えてみよう

それではようやく本題!

文字の色の変え方 5つの方法をご紹介です。

パターン1:<font></font>で設定する難易度★☆☆

文字の設定をするHTML<font></font>を使用します。
文字の色を変えたいところに下記のように記載します。

<font color="#FF0000">赤いテキスト</font><br />
<font color="#00FF00">緑のテキスト</font><br />
<font color="#0000FF">青いテキスト</font>

※「<br />」は改行を表すHTMLです

↓こんな風に表示されます↓
赤いテキスト
緑のテキスト
青いテキスト

文字を変えたい部分を<font></font>で囲み、開始の<fontの後に半角スペースcolor=”色表記”で色を指定します。

前回表のつくりかたでもご紹介しましたが、表記は全て「半角英数字」で記載してください!

パターン2:スタイルで設定する難易度★★☆

文字の色を変えるだけであれば、<font>で充分なのですが、
文字に背景色を付けたい
だったり
一緒に文字サイズや太さも変えたい
という方はコチラを覚えて下さい。

使い方は<font>とほぼ一緒なのですが、文字色を変えたい箇所を何かHTMLタグでくくり、そこにスタイルを設定します。

くくるHTMLタグは状況によって適切なものが変わるのですが、
どんな状況でも大体影響なく使えるのが<span></span>です。
ここでは<span></span>を使ってスタイルを設定します。

文字の色を変える

文章中の<span style="color:#FF0000;">一部を赤字</span>にしました。

↓こんな風に表記されます↓
文章中の一部を赤字にしました。

開始の<spanの後に半角スペースstyle=”color:色名;”で色を記載します。
スタイルの便利なところは複数の事がいっぺんに設定できる点!

いくつか設定する場合は一つのスタイルの終わり「;」の後に半角スペースを入れ、別の表記を追加することで設定できます。

文章中の<span style="color:#FF0000; font-weight:bold; font-size:25px;">一部を赤い25pxの太字</span>にしました。

↓こんな風に表記されます↓
文章中の一部を赤い25pxの太字にしました。

ちなみに、太字は「font-weight」、文字のサイズは「font-size」で設定できます。

文字の背景色を変える

上記のような感じで、文字の背景色を変えることも可能です。

うすうす感づいていらっしゃるかとは思いますが、スタイルの指定は英語ベース。
背景=background、色=color…ということで
背景色は「background-color」で設定できます。

文章中の<span style="background-color:#FF0000; color:#FFFFFF;">一部を赤く</span>することができます。

↓こんな風に表記されます↓
文章中の一部を赤くすることができます。

スタイルでもっと文字をいろいろと装飾したい場合、
こちらのHTMLリファレンスをご確認ください。
「文字色・背景」に使うスタイルがページ冒頭でまとめられていて、かつ、一つ一つのスタイルの設定も別ページでされているので、非常にわかりやすいです。

パターン3:画像にしちゃう難易度★☆☆

「文字を複雑にいろいろな色にしたいわ♪」という場合、画像で作った方が綺麗で早かったりもします。

全部を画像で!というのは検索順位的にあまりオススメはできませんが、一部に使用する分には問題ありません。

パターン4:ビジュアルエディタを利用する(Wordpressの場合)難易度★☆☆

WordPressの場合、ビジュアルエディタの機能を拡張するプラグイン「TinyMCE Advanced」をインストールすることで、HTMLタグを使用せずに、表を作成することができます。

プラグインを追加することで、ブログの設定や環境によってはサイト全体が表示されなくなるなど影響がある場合がございます。追加される際は、事前にバックアップを保存後 プラグインを追加ください。サイト制作者・管理者がいる場合は、事前にご相談いただくことをオススメいたします。

設定方法

  1. WordPressにログイン
  2. サイドメニュー「プラグイン」から「新規追加」を選択
  3. プラグインの検索に「TinyMCE Advanced」と入力
  4. 検索結果に表示された「TinyMCE Advanced」の「いますぐインストール」をクリック
  5. インストール完了画面下にあります「プラグインを有効化」をクリック

投稿画面

  1. 文章をうつ
  2. 文字の色または背景色を変えたい部分を選択する
  3. 選択された状態で文字の色を変える(または背景色を変える)アイコンをクリック
  4. アイコン横の下三角▼をクリックすると色の変更が出来ます

パターン5:人に頼んじゃう難易度☆☆☆

弊社では、WEBサイト制作の他、運営のサポートなど管理も行っております。その中で、ブログの記事がうまく書けない!表現できない!というお悩みもサポートしております。

また、ブログライター向けのセミナー・スクールも実施しております。 » 2016年3月まで実施されているセミナー情報はコチラ

お困りの際は、まずはお気軽にお問い合わせください。

お問い合わせ

お問い合わせ種別 (必須)
新規ホームページのご相談既存ホームページリニューアルのご相談ショップ売上アップのご相談SEO対策のご相談セミナー・各種講演のご依頼その他ご相談
お名前 (必須)
メールアドレス (必須)
お問い合わせ内容


コメントは受け付けていません。