文字の色を変える方法

こんにちは。

 

ぜんです。

 

今日はですね、

文字の色を変える方法について

お伝えします。

 

 

では今日もいってみましょう。

 

 

 

文字の色を変える方法

 

 

文字の色を変えるには

下記の黄色の部分をいろいろ変えてみてください。

 

1 <font color="色番号もしくは色名称">色を変える文字</font>

 

2 <span style="color:色番号もしくは色名称">色を変える文字</span>

 

 

1,2の形式があります。

 

 

色名称で変えてみます。

 

1 赤色 <font color="red">色を変える文字</font>          

 

色を変える文字

 

色番号で変えてみます。

 

2 青色 <span style="color:#0000ff">色を変える文字</span>  

 

色を変える文字

 

 

htmlでは16の基本的な色を次のように定義しています。

 

 

色名称 色番号
white #ffffff white #ffffff
silver #c0c0c0 silver #c0c0c0
gray #808080 gray #808080
black #000000 black #000000
red #ff0000 red #ff0000
maroon #800000 maroon #800000
yellow #ffff00 yellow #ffff00
olive 808000 olive 808000
lime #00ff00 lime #00ff00
green #008000 green #008000
aqua #00ffff aqua #00ffff
teal #008080 teal #008080
blue #0000ff
blue #0000ff
navy #000080 navy #000080
fuchsia #ff00ff fuchsia #ff00ff
purple #800080 purple #800080

 

 

このような代表的な色は英語もしくは#色番号で表すことができます。

他の色はGIMPなどの無料のツールやソフトで色番号を取得できます。

 

 

色の使い方

 

文字の色を変える方法がわかったなら

あとは実際に使ってみて

見栄えが良くなるようにしていきましょう。

 

 

基本的な使い方

 

基本的な使い方としましては

あまりたくさんの色を使いすぎないということです。

いろんな色があり過ぎると訪問者さんの目も疲れますし

どの色を見ていいのかわからなくなります。

 

 

 

一般的に

 

文字は黒

リンクには青

強調したいところは赤

 

がいいと思います。

 

 

緑色の文字も比較的見やすいので

赤文字と違ったニュアンスを表現したいならば

使ってみてもいいかもしれません。

 

 

見やすくする使い方

 

1  赤文字は普通に使うより

   

<b>や<strong>などの強調タグを使うとくっきりして見やすいです。


そのまま普通の赤

 

<b><span style="color:red;">強調した赤色</span></b>

 

強調した赤色


 

 

2  また背景色を黄色にするのも効果的です。

 

背景色を黄色にする

 

文字色のタグの前に 

background-color:色番号を入れると背景色を変えることができます。

 

 

<span style="background-color: #ffff00"><span style="color: #000000">背景色を黄色にする</span></span>

 

 

 

背景色を黄色にする


強調タグは背景色のタグの前につけます。

<strong><span style="background-color: #ffff00"><span style="color: #ff0000">背景色を黄色にする</span></span></strong>

 

 

大事なところは

こんなふうに背景色を黄色にすると目立ちます。

 

 

 

ただ私個人的には

これもあまり使い過ぎたり

あまり大き過ぎたりしない方がいいかと思います。

 

この記事では説明するために

多めに使っていますが

 

やはり黄色は刺激が強いので

大事なところにポイントを絞って使っていきましょう。

 

 

 

デカ過ぎ

 

 

 

このように

 

色だけですでに強調しているのに

大きさでさらに強調すると圧が強くなるので

 

あまり文字サイズは大きくしない方が

良いように私は思います。

 

 

 

こんな感じで実際に使ってみて

訪問者さんが見やすい色の使い方を

いろいろ考えてみてください。

 

 

 

 

本日もご訪問ありがとうございました~。

このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

メルマガ発行中です。

ブログとは違う記事を書いている
ぜんメルマガ「ネットビジネス公園」

購読よろしくです!

メルマガ登録
メールアドレス
お名前
powered byメール配信CGI acmailer

あわせて読みたい関連記事

タグ


2012年2月4日 | コメント/トラックバック(10)|

カテゴリー:html タグ

トラックバック&コメント

この投稿のトラックバックURL:

トラックバック

コメント

  1. ぜんさん、はじめまして。
    アリアと申します。
     
    私も、文字の色使いには気を使っています。
    ただ、ズラッッと単調に書かれた分よりも、
    ぱっと見たときに、読みやすいイメージを持ってもらえたほうが、
    読んでいる人のストレスも少なくなりますので、基本の事ですが、
    とても重要に思います!!
     
    全力で応援!ポチ〆(・ω・。)

    • ぜん より:

      アリアさん、はじめまして。

      普通の文章は
      見やすく、読みやすく、

      また見落としやすい所などに
      色を使ってみるのもいいですよね。

      自分の伝えたいことが
      きちんと伝わるように
      使い方を考えていきたいですね。

      全力応援ありがとうございます。

  2. ぜんさん
    こんにちは、つなで☆です^^
    文字に色をつける方法
    とても分かりやすく良かったです
    色番号がありがたいですね♪
     
    文字を大きくしたり、色をつけたりして
    記事を読みやすくすることは
    アフィリエイターとして大事な事ですね!
    応援させて頂きました☆

    • ぜん より:

      つなでさん、こんにちは~。

      この記事書くのに
      だいぶ時間かかっただけに
      分かりやすいと言って頂けると
      大変嬉しいです。

      つい色をたくさん使い過ぎたり
      することもあるので注意が必要ですね。

      応援ありがとうございます。

  3. 吉岡裕輔 より:

    はじめまして。吉岡と言います。
     
    色の解説大変分かりやすかったです。
    個人的に、いつかサブキャッチの綺麗な作成方法とか知りたいです。
     
    応援ポチ

    • ぜん より:

      吉岡さん、はじめまして。

      サブキャッチという言葉を初めて聞きました。
      検索してみると夢リタのテンプレートでは
      そういうのが挿入できるみたいですね。

      応援ありがとうございます。

  4. hana より:

    ぜんさん お久しぶりです hanaです!

    「デカ過ぎ」の部分で大爆笑してしまいましたよー
    そりゃでかいわ(笑)
     
    アフィリエイトブログではあまり見ないですけど
    やたら色や絵文字使っての文章って本当に読みづらい
     
    やはり物事には限度というものがありますからね
    読者さんが読みやすい記事が一番ですから
     
    応援です☆

    • ぜん より:

      hanaさん~お久しぶりです。

      大きく書くこと自体は悪くないので
      「そこまで大きくせんでいいんちゃう~」
      っていう程度まで大きくしてみました。

      色そのものが見づらいものもありますし、
      たくさん色を使うと記事やブログ全体の統一感ってものが
      なくなるので余計に見づらくなるんでしょうね。

      何かを伝えるのが記事の目的ですから
      あれもこれもとやりすぎは禁物ですね。

      応援ありがとうございます。

  5. いつもありがとうございます。
    ぬのみ~ぃです♪
    わたしも、まだ大きさについては
    考えながら書いてますね。
    強調したい部分を、どの程度大きくするかなど。
     
    すごく詳細に書かれてて
    わかりやすい記事でした!

    応援ぽちり
     

    • ぜん より:

      ぬのみ~ぃさん、こんにちは。

      私は記事の標準の文字サイズを
      どれくらいにしようか試行錯誤してます。

      見やすいように少し大きめに設定したいんですよ。
      ぬのみ~ぃさんのメルマガも読んでますよ~。

      応援ありがとうございます。


コメントをどうぞ

このページの先頭へ