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