■
リンク色の指定
通常のテキストの色を変えるようにリンクの色もサイトにあったものに変更できます。
htmlで指定する場合
毎回このように指定しなくてもcssで指定してあれば指定された場所のテキストの色はあらかじめ決めておいた色で表示されるのでｈｔｍｌもすっきりする上に、サイトのイメージを保つことが出来ます。
cssで指定する
上から
text a テキストの色
text a:link まだ表示されていないページ
text a:visited すでに表示されたページ
text a:active 現在表示中のページ
text a:hover マウスがリンク文字上に乗った時の色
と、擬似プロパティの指定がしてあります。
色は数字または英語表記で指定します。
（擬似プロパティについては別記します。）
htmlで指定する場合
毎回このように指定しなくてもcssで指定してあれば指定された場所のテキストの色はあらかじめ決めておいた色で表示されるのでｈｔｍｌもすっきりする上に、サイトのイメージを保つことが出来ます。
cssで指定する
上から
text a テキストの色
text a:link まだ表示されていないページ
text a:visited すでに表示されたページ
text a:active 現在表示中のページ
text a:hover マウスがリンク文字上に乗った時の色
と、擬似プロパティの指定がしてあります。
色は数字または英語表記で指定します。
（擬似プロパティについては別記します。）
文字の大きさ（サイズ指定）
文字の大きさを指定して行きます。
プロパティが「font-size 」になるのでこの部分で値を変える事によって
文字の大きさが変わります。
指定する値は１?７、または数値+単位の種類「% px pt mm cm in pc em ex 」
決められた単語で指定して行きます。
決められた単語と文字の大きさ
xx-small ・・・ font size="1"
x-small ･･･ font size="2"
small ･･･ font size="3"
medium ･･･ font size="4"
large ･･･ font size="5"
x-large ･･･ font size="6"
xx-large ･･･ font size="7"
まったく同じではないですが大体同じくらいの大きさになります。
スタイルシートで指定する場合、「font-size: 13px;」のように数値+単位のpxで
指定してあることが多いと思います。
通常の大きさは16px
文字の大きさの目安。
1 2 3 4 5 6 7
通常が4なので1?7の数字ではなく、-3?+3でも指定可能ですが
ややこしくなるのでどれで指定するか決めて指定の仕方は統一させてください。
スタイルシートで指定した部分をHTMLに記述することで反映されます。
HTMLを探してみると
つまりは無料ブログサービスなどでテンプレートを少し触ってイメージを変えるなら
スタイルシートで指定していくのでHTMLを触ることは少なくなります。
プロパティが「font-size 」になるのでこの部分で値を変える事によって
文字の大きさが変わります。
指定する値は１?７、または数値+単位の種類「% px pt mm cm in pc em ex 」
決められた単語で指定して行きます。
決められた単語と文字の大きさ
xx-small ・・・ font size="1"
x-small ･･･ font size="2"
small ･･･ font size="3"
medium ･･･ font size="4"
large ･･･ font size="5"
x-large ･･･ font size="6"
xx-large ･･･ font size="7"
まったく同じではないですが大体同じくらいの大きさになります。
スタイルシートで指定する場合、「font-size: 13px;」のように数値+単位のpxで
指定してあることが多いと思います。
通常の大きさは16px
文字の大きさの目安。
1 2 3 4 5 6 7
通常が4なので1?7の数字ではなく、-3?+3でも指定可能ですが
ややこしくなるのでどれで指定するか決めて指定の仕方は統一させてください。
スタイルシートで指定した部分をHTMLに記述することで反映されます。
HTMLを探してみると
つまりは無料ブログサービスなどでテンプレートを少し触ってイメージを変えるなら
スタイルシートで指定していくのでHTMLを触ることは少なくなります。
文字の種類 （フォントの種類）
通常あまり変更しない気がします。
パソコンにそのフォントがインストールされていないと
反映されないからです。
フォントの種類は「ＭＳ ゴシック」「ＭＳ 明朝」など
はじめからインストールされているものが無難です。
「フォント（FONT）」で検索すればフリーのフォントを利用することができますが
先ほども書いたようにすべての方がそのフォントに対応しているとは限らないので
注意してください。
さて、その設定の仕方です。
スタイルシートを見てみると、
こんな記述を見つけられると思います。
プロパティは「font-family」の部分で値の部分で文字の種類を指定しています。
FC2のユーザーテンプレートの一部分ですがこの場合は6つのフォントを指定しています。
HG丸ｺﾞｼｯｸM-PRO
Verdana
ＭＳ Ｐゴシック
Arial Black
Impact
Osaka
複数指定しておくと、前のフォントが対応してない場合次のフォントが反映されます。
できるだけ自分のイメージで表示させたい場合はこのように複数指定しておけば安心ですね。
もちろん1つのフォントだけでもいいです。
フォント名の間に空白がある場合半角二重引用符（始）「"」で囲む必要があります。
複数指定する場合は半角カンマ「,」で区切る。
ゴシック系、明朝系、筆記系などと大まかに種類を指定することもできます。
serif ･･･ 明朝系
sans-serif ･･･ ゴシック系
cursive ･･･ 筆記体系
fantasy ･･･ 飾り文字系
monospace ･･･ 等幅系
BlogNameのほか、introduction などテキストのエリアごとに指定して行きます。
パソコンにそのフォントがインストールされていないと
反映されないからです。
フォントの種類は「ＭＳ ゴシック」「ＭＳ 明朝」など
はじめからインストールされているものが無難です。
「フォント（FONT）」で検索すればフリーのフォントを利用することができますが
先ほども書いたようにすべての方がそのフォントに対応しているとは限らないので
注意してください。
さて、その設定の仕方です。
スタイルシートを見てみると、
こんな記述を見つけられると思います。
プロパティは「font-family」の部分で値の部分で文字の種類を指定しています。
FC2のユーザーテンプレートの一部分ですがこの場合は6つのフォントを指定しています。
HG丸ｺﾞｼｯｸM-PRO
Verdana
ＭＳ Ｐゴシック
Arial Black
Impact
Osaka
複数指定しておくと、前のフォントが対応してない場合次のフォントが反映されます。
できるだけ自分のイメージで表示させたい場合はこのように複数指定しておけば安心ですね。
もちろん1つのフォントだけでもいいです。
フォント名の間に空白がある場合半角二重引用符（始）「"」で囲む必要があります。
複数指定する場合は半角カンマ「,」で区切る。
ゴシック系、明朝系、筆記系などと大まかに種類を指定することもできます。
serif ･･･ 明朝系
sans-serif ･･･ ゴシック系
cursive ･･･ 筆記体系
fantasy ･･･ 飾り文字系
monospace ･･･ 等幅系
BlogNameのほか、introduction などテキストのエリアごとに指定して行きます。
文字の設定をする
スタイルシートで文字をあらかじめ指定しておくことで
そのつどHTMLで指定する手間を省くことができます。
どんな指定があるかというと
文字の種類
文字の大きさ
文字の色
文字を太字
文字を斜体
などそれぞれ個別に指定することができます。
もちろんまとめて指定しまえばその部分はほかと区別することもできます。
それぞれの指定の仕方を説明します。
サイト全体のカラー
サイトのカラーリングでずいぶん印象が違ってくると思います。
自分の好きな色、見やすい色にすることが多いと思います。
でも、インターネット上で公開すると自分以外のいろいろな人の目に留まります。
サイト（webページ）は5つの要素があります。(重要）
これらを見やすくまた同じタグには同じカラーで統一しておくことが必要です。
ただ、リンクの部分だけは「・」で状態に合わせて指定できるので違うように見えることがあります。
これは、どこまでクリックしたか訪問者に分かりやすくするためです。
全部でなくても最低訪問済みと未訪問はカラーを分けておく方が見やすいと思います。
見慣れていると言うかほぼ常識的な感覚で言えば、
背景は白
文章などのテキストは黒
リンクは青
そんなイメージですがいろいろな色で試したい方は実際どんな風に見えるかチェックする必要があります。
そんなときに便利なサイト
Color Slider
使い方やカラーリングの重要性も書いてあるので参考にしてみてください。
自分の好きな色、見やすい色にすることが多いと思います。
でも、インターネット上で公開すると自分以外のいろいろな人の目に留まります。
サイト（webページ）は5つの要素があります。(重要）
|
要素 |
タグ |
| 見出し | ｈ１ ｈ２ ｈ３ |
| 文章 | p |
| 背景 | body |
| リンク | a |
| ・未訪問 | a:link |
| ・訪問済 | a:visited |
| ・マウスをあわせた時 | a:hover |
| ・クリックしている時 | a:active |
| 強調 | string em |
これらを見やすくまた同じタグには同じカラーで統一しておくことが必要です。
ただ、リンクの部分だけは「・」で状態に合わせて指定できるので違うように見えることがあります。
これは、どこまでクリックしたか訪問者に分かりやすくするためです。
全部でなくても最低訪問済みと未訪問はカラーを分けておく方が見やすいと思います。
見慣れていると言うかほぼ常識的な感覚で言えば、
背景は白
文章などのテキストは黒
リンクは青
そんなイメージですがいろいろな色で試したい方は実際どんな風に見えるかチェックする必要があります。
そんなときに便利なサイト
Color Slider
使い方やカラーリングの重要性も書いてあるので参考にしてみてください。
