文字の色を変える方法
こんにちは。
ぜんです。
今日はですね、
文字の色を変える方法について
お伝えします。
では今日もいってみましょう。
文字の色を変える方法
文字の色を変えるには
下記の黄色の部分をいろいろ変えてみてください。
１ <font color="色番号もしくは色名称">色を変える文字</font>
２ <span style="color:色番号もしくは色名称">色を変える文字</span>
１，２の形式があります。
例
色名称で変えてみます。
１ 赤色 <font color="red">色を変える文字</font>
色を変える文字
色番号で変えてみます。
２ 青色 <span style="color:#0000ff">色を変える文字</span>
色を変える文字
htmlでは１６の基本的な色を次のように定義しています。
| 色名称 | 色番号 | 色 |
| 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などの無料のツールやソフトで色番号を取得できます。
色の使い方
文字の色を変える方法がわかったなら
あとは実際に使ってみて
見栄えが良くなるようにしていきましょう。
基本的な使い方
基本的な使い方としましては
あまりたくさんの色を使いすぎないということです。
いろんな色があり過ぎると訪問者さんの目も疲れますし
どの色を見ていいのかわからなくなります。
一般的に
文字は黒
リンクには青
強調したいところは赤
がいいと思います。
緑色の文字も比較的見やすいので
赤文字と違ったニュアンスを表現したいならば
使ってみてもいいかもしれません。
見やすくする使い方
１ 赤文字は普通に使うより
<b>や<strong>などの強調タグを使うとくっきりして見やすいです。
そのまま普通の赤
<b><span style="color:red;">強調した赤色</span></b>
強調した赤色
２ また背景色を黄色にするのも効果的です。
背景色を黄色にする
文字色のタグの前に
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>
大事なところは
こんなふうに背景色を黄色にすると目立ちます。
ただ私個人的には
これもあまり使い過ぎたり
あまり大き過ぎたりしない方がいいかと思います。
この記事では説明するために
多めに使っていますが
やはり黄色は刺激が強いので
大事なところにポイントを絞って使っていきましょう。
デカ過ぎ
このように
色だけですでに強調しているのに
大きさでさらに強調すると圧が強くなるので
あまり文字サイズは大きくしない方が
良いように私は思います。
こんな感じで実際に使ってみて
訪問者さんが見やすい色の使い方を
いろいろ考えてみてください。
本日もご訪問ありがとうございました～。
メルマガ発行中です。
ブログとは違う記事を書いている
ぜんメルマガ「ネットビジネス公園」
購読よろしくです！
あわせて読みたい関連記事
タグ
html、タグ、文字の色2012年2月4日 | コメント／トラックバック(10)|
カテゴリー:html タグ
トラックバック&コメント
トラックバック
コメント
ぜんさん、はじめまして。
アリアと申します。
私も、文字の色使いには気を使っています。
ただ、ズラッッと単調に書かれた分よりも、
ぱっと見たときに、読みやすいイメージを持ってもらえたほうが、
読んでいる人のストレスも少なくなりますので、基本の事ですが、
とても重要に思います！！
全力で応援！ポチ〆(･ω･。)
アリアさん、はじめまして。
普通の文章は
見やすく、読みやすく、
また見落としやすい所などに
色を使ってみるのもいいですよね。
自分の伝えたいことが
きちんと伝わるように
使い方を考えていきたいですね。
全力応援ありがとうございます。
ぜんさん
こんにちは、つなで☆です＾＾
文字に色をつける方法
とても分かりやすく良かったです
色番号がありがたいですね♪
文字を大きくしたり、色をつけたりして
記事を読みやすくすることは
アフィリエイターとして大事な事ですね！
応援させて頂きました☆
つなでさん、こんにちは～。
この記事書くのに
だいぶ時間かかっただけに
分かりやすいと言って頂けると
大変嬉しいです。
つい色をたくさん使い過ぎたり
することもあるので注意が必要ですね。
応援ありがとうございます。
はじめまして。吉岡と言います。
色の解説大変分かりやすかったです。
個人的に、いつかサブキャッチの綺麗な作成方法とか知りたいです。
応援ポチ
吉岡さん、はじめまして。
サブキャッチという言葉を初めて聞きました。
検索してみると夢リタのテンプレートでは
そういうのが挿入できるみたいですね。
応援ありがとうございます。
ぜんさん お久しぶりです hanaです！
「デカ過ぎ」の部分で大爆笑してしまいましたよー
そりゃでかいわ（笑）
アフィリエイトブログではあまり見ないですけど
やたら色や絵文字使っての文章って本当に読みづらい
やはり物事には限度というものがありますからね
読者さんが読みやすい記事が一番ですから
応援です☆
hanaさん～お久しぶりです。
大きく書くこと自体は悪くないので
「そこまで大きくせんでいいんちゃう～」
っていう程度まで大きくしてみました。
色そのものが見づらいものもありますし、
たくさん色を使うと記事やブログ全体の統一感ってものが
なくなるので余計に見づらくなるんでしょうね。
何かを伝えるのが記事の目的ですから
あれもこれもとやりすぎは禁物ですね。
応援ありがとうございます。
いつもありがとうございます。
ぬのみ～ぃです♪
わたしも、まだ大きさについては
考えながら書いてますね。
強調したい部分を、どの程度大きくするかなど。
すごく詳細に書かれてて
わかりやすい記事でした！
応援ぽちり
ぬのみ～ぃさん、こんにちは。
私は記事の標準の文字サイズを
どれくらいにしようか試行錯誤してます。
見やすいように少し大きめに設定したいんですよ。
ぬのみ～ぃさんのメルマガも読んでますよ～。
応援ありがとうございます。