文字の装飾について!

ここ数年ブログやCMS(Content Management System:コンテンツマネジメントシステム)といったWEBシステムを利用し、ホームページの表現の方法が進化しています。 しかし、コンテンツやブログのエントリーを編集している時に困ったことはないでしょうか? その壁はたぶん文字の色であったり大きさや太さや写真のレイアウトではないでしょうか? ボクがお客様や友人から相談を受けるのがだいたいこの辺の内容ですね(^_^;) ー『壁』の代表例ー
  • 文字の色
  • 文字の大きさ
  • 文字の太さ
  • 文字の種類(書体/フォント)
  • ホームページへのリンクを作りたい
  • 写真の大きさ
  • 写真の配置
  • 背景の色(これは少ないですが)
などではないでしょうか? お使いのブログシステムやCMSの中には編集画面の中に文字の設定が出来たりするものも多いですが、その設定ボタンの意味を知らなければ意味不明な記号や英数字が編集画面に羅列されて「なんじゃこりゃ???」ってなったりします。 そこで、ココではちょっと知っていれば簡単に解決出来る方法を紹介します。 これらはホームページを表示させるために必要な『HTML』と言う基本的な方法(言語)です。 ■文字の色を変える。指定する。
『これは鉛筆です。』の『鉛筆』の部分を赤い色にしたい場合。
これは<font color="#FF0000">鉛筆</font>です。
と編集画面に表記(入力)します。 そうすると以下の様に表示されます。↓
これは鉛筆です。
【これを挿入すれば大丈夫! 】
<font color="●●●●●●●">▲▲▲</font>
●の部分で色を指定します。(注1) ▲の部分では色を指定したい文字を指定を入力します。 (注1)色の指定は『#』プラス6桁の半角英数字です。16進表記です。詳しい色表記は『色についていろいろ!』を参考にしてください。
■文字の大きさを変える。指定する。
『これは鉛筆です。』の『鉛筆』の部分を大きくにしたい場合。
これは<font size="5">鉛筆</font>です。
と編集画面に表記(入力)します。 そうすると以下の様に表示されます。↓
これは鉛筆です。
【これを挿入すれば大丈夫! 】
<font size="●">▲▲▲</font>
●の部分で大きさを指定します。(注2) ▲の部分では大きさを指定したい文字を指定を入力します。 (注2)フォントサイズはデフォルトが3です。表示出来るのは『1〜7』までの整数です。『+』や『-』での指定もできますが、最小でも1最大でも7の範囲内となります。ブログやCMS等では元々2や4で設定してある場合もありますので、整数で指定して表示が変わらない場合『+』や『-』で指定して下さい。
■文字の色と大きさを一緒に変える。指定する。
『これは鉛筆です。』の『鉛筆』の部分を赤くし大きくにしたい場合。
これは<font size="5" color="#FF0000">鉛筆</font>です。
と編集画面に表記(入力)します。 そうすると以下の様に表示されます。↓
これは鉛筆です。
【これを挿入すれば大丈夫! 】
<font size="●" color="●●●●●●●">▲▲▲</font>
●の部分で大きさや色を指定します。(注1)(注2) ▲の部分では大きさを指定したい文字を指定を入力します。 (注1)色の指定は『#』プラス6桁の半角英数字です。16進表記です。詳しい色表記は『色についていろいろ!』を参考にしてください。 (注2)フォントサイズはデフォルトが3です。表示出来るのは『1〜7』までの整数です。『+』や『-』での指定もできますが、最小でも1最大でも7の範囲内となります。ブログやCMS等では元々2や4で設定してある場合もありますので、整数で指定して表示が変わらない場合『+』や『-』で指定して下さい。
■文字の種類(書体/フォント)を変える。指定する。
基本的にオススメしません! 『書体/フォント』の指定は出来るのですが、大前提として見る側のパソコンにインストールされた『書体/フォント』でなければいけません。また閲覧するためのブラウザーと呼ばれるアプリケーションは何を使用しているかできちんと表示出来るか出来ないかとなります。『書体/フォント』の指定は出来ないと思っていてもいいかもしれません。 <主なブラウザー> ■Win専用 Microsoft社の『Internet Explorer (IE)』 Google社の『Chrome』 ■Win&Mac両用 Apple社の『Safari』 Mozilla の『Firefox』
■ホームページへのリンクを作成する
株ゴーライズ(弊社)にリンクする場合
<a href="http://gorise.jp/" target="_blank">株ゴーライズ</a>
と編集画面に表記(入力)します。 そうすると以下の様に表示されます。↓
株ゴーライズ
【これを挿入すれば大丈夫! 】
<a href="●●●●" target="_blank">▲▲▲</a>
●の部分でURLを入力します(『http://』等からはじまるURLです) ▲の部分名称を入力します。 ※『target="_blank"』では、そのリンク先をどのウィンドウで開くかを指定します。同じウィンドウの場合は『target="_top"』と指定します。


▲TOPへ

ホームページの色について

ホームページで表示される『色』にはある一定の決まりがあります。
例えば文字の『色』や背景の『色』これらは写真等(JPG・GIF・PIG等)でない限りこの一定の決まりを元に指定することが好ましいです。
それはなぜか!?
ホームページを作って誰かに見てもらう時、見る側のパソコンやモニターの性能や設定で見え方が変わってしまうのです。
『色』は特に違います。WindowsとMacintoshの違いだけでも違います。ここでは基本色とされる『WEBセーフカラー』の216色を紹介します。もちろんこれ以外の色を使うことは可能ですがその場合、制作者の意図する色の表現が閲覧者には伝わらない可能性もあります。

■はっきりした使い易い『色』
WEBセーフカラーをご紹介する前に、はっきりした使い易い『色』をご紹介します。
上の段は『白』から『黒』まで6段階の『色』の表現です。下の段は左からシアン・マゼンタ・イエロー・レッド・グリーン・ブルーという6色です。シアン・マゼンタ・イエローは印刷で用いる色(厳密には少し違いますが…)、そしてレッド・グリーン・ブルーは光の三原色です。

#FFFFFF
#CCCCCC
#999999
#666666
#333333
#000000
#00FFFF
#FF00FF
#FFFF00
#FF0000
#00FF00
#0000FF


■WEBセーフカラー216色
はっきりした使い易い『色』だけでは通常足りません。そこで『WEBセーフカラー』を使用します。『WEBセーフカラー』とは光の三原色のRGBの各色をそれぞれ6段階に分けて、それらを組み合わせ216種類の『色』を表現します。
通常256色(8ビットカラー)と表現される『色』の中で、WindowsとMacintoshで違った表示となる40色を差し引いた216色がWEBセーフカラーとなります。

#FFFFFF
#FFFFCC
#FFFF99
#FFFF66
#FFFF33
#FFFF00
#FFCCFF
#FFCCCC
#FFCC99
#FFCC66
#FFCC33
#FFCC00
#FF99FF
#FF99CC
#FF9999
#FF9966
#FF9933
#FF9900
#FF66FF
#FF66CC
#FF6699
#FF6666
#FF6633
#FF6600
#FF33FF
#FF33CC
#FF3399
#FF3366
#FF3333
#FF3300
#FF00FF
#FF00CC
#FF0099
#FF0066
#FF0033
#FF0000
#CCFFFF
#CCFFCC
#CCFF99
#CCFF66
#CCFF33
#CCFF00
#CCCCFF
#CCCCCC
#CCCC99
#CCCC66
#CCCC33
#CCCC00
#CC99FF
#CC99CC
#CC9999
#CC9966
#CC9933
#CC9900
#CC66FF
#CC66CC
#CC6699
#CC6666
#CC6633
#CC6600
#CC33FF
#CC33CC
#CC3399
#CC3366
#CC3333
#CC3300
#CC00FF
#CC00CC
#CC0099
#CC0066
#CC0033
#CC0000
#99FFFF
#99FFCC
#99FF99
#99FF66
#99FF33
#99FF00
#99CCFF
#99CCCC
#99CC99
#99CC66
#99CC33
#99CC00
#9999FF
#9999CC
#999999
#999966
#999933
#999900
#9966FF
#9966CC
#996699
#996666
#996633
#996600
#9933FF
#9933CC
#993399
#993366
#993333
#993300
#9900FF
#9900CC
#990099
#990066
#990033
#990000
#66FFFF
#66FFCC
#66FF99
#66FF66
#66FF33
#66FF00
#66CCFF
#66CCCC
#66CC99
#66CC66
#66CC33
#66CC00
#6699FF
#6699CC
#669999
#669966
#669933
#669900
#6666FF
#6666CC
#666699
#666666
#666633
#666600
#6633FF
#6633CC
#663399
#663366
#663333
#663300
#6600FF
#6600CC
#660099
#660066
#660033
#660000
#33FFFF
#33FFCC
#33FF99
#33FF66
#33FF33
#33FF00
#33CCFF
#33CCCC
#33CC99
#33CC66
#33CC33
#33CC00
#3399FF
#3399CC
#339999
#339966
#339933
#339900
#3366FF
#3366CC
#336699
#336666
#336633
#336600
#3333FF
#3333CC
#333399
#333366
#333333
#333300
#3300FF
#3300CC
#330099
#330066
#330033
#330000
#00FFFF
#00FFCC
#00FF99
#00FF66
#00FF33
#00FF00
#00CCFF
#00CCCC
#00CC99
#00CC66
#00CC33
#00CC00
#0099FF
#0099CC
#009999
#009966
#009933
#009900
#0066FF
#0066CC
#006699
#006666
#006633
#006600
#0033FF
#0033CC
#003399
#003366
#003333
#003300
#0000FF
#0000CC
#000099
#000066
#000033
#000000

これだけあれば様々な表現が可能ではないでしょうか?
また、ここにある『色』以外のモノを使用すると閲覧者側のパソコンのモニターでは正しく表示されない可能性がありますので、色使いにこだわってホームページを制作しても伝わらない悲しい結果にならないように配色は出来れば『WEBセーフカラー』の216色を使う様にしましょう!


▲TOPへ