文字の余白

文字色も決まったので、文字の余白を調整します。

他の部分との余白は、marginとpaddingで調整するのですが、領域の外に余白を作るのか内に作るのかの違いが有ります。

margin: １0px;と書くと領域外で余白を作ります。




padding: 10px;と書くと領域内で余白を作るので、線で囲う時に綺麗に見えます。




10pxを5pxにすれば狭くなりますし、20pxにすると広くなりますのでお好みで。＾＾ｂ

リンク文字色補足

リンク先が有る場所の文字色ですが、ブログの一部分にだけ設定する事も出来ます♪

通常は、
a:link {color:#　　　　　　;}
a:visited{color:#　　　　　　;}
a:hover {color:#　　　　　　;}
a:active {color:#　　　　　　;}
と書いて、全体に設定するのですが、


記事の本文の設定
.EntryText {}

まだ閲覧していないリンクの文字色設定
.EntryText a:link {color:#　　　　　　;}

過去に見たことがあるリンクの文字色設定
.EntryText a:visited{color:#　　　　　　;}

カーソルが合っている状態のリンクの文字色設定
.EntryText a:hover {color:#　　　　　　;}

アクティブ状態のリンクの文字色設定
.EntryText a:active {color:#　　　　　　;}

とCSSファイルに書けば、記事の部分にだけ違う色を設定する事が出来ます。
 

文字色を調節

フォントも決まったので、文字色を調節してみます。

最初、記事部分を＃FFFFFFにして、それ以外の部分を＃FF0000にしたんですが、何だか読み辛い・・・
何でかなぁ？と思ってたんですが、或る日気が付きました。
背景が黒なので、文字の輝度が高過ぎてにじんでたんですね・・・orz

白バックだと普通に読めても、黒バックだと文字が太く見えて読み辛かったので、少し輝度を下げて今の色にしました。
あとは、リンクの有る場所の文字色を調整して一応のデザイン修正が終りです。(*￣ー￣)ｖ♪

フォント再考

前回でフォント指定が済んだ筈ですが、新しい情報が見付かりました！

英文フォントのVerdanaを第一候補に指定すると英数字のフォントのみに適用されて、和文には個々のPCのブラウザに設定されているフォントが適用されるとの事です。
　　⇒http://www009.upp.so-net.ne.jp/custom/fontsample.html
Verdanaで和文部分が綺麗に表示されてると思ったら、ブラウザ指定のMSPゴシックで表示されてたんですね・・・(〃_ 〃)ゞ ポリポリ

Verdanaは、Windows版とMac OS版両方のInternet Explorerにも同梱されているとか、Windowsパソコンの95.7%、Mac OSパソコンの92.8%で使用可能とかの情報もあ有り、かなり多くの環境で意図した表示になりそうな気配です。

元々、半角英文字を使った顔文字の表示が綺麗に出ない事を解消しようと思って、フォント指定した訳ですし、何より「和文部分を閲覧者の設定に任せる」と言ういい加減さ自由度の高さが素敵設定です。(*￣ー￣)ｖ♪

フォントファミリ指定

前回のフォントファミリ指定にＶｉｓｔａの標準フォントのメイリオを加えてませんでした・・・orz

フォントファミリに複数のフォントを指定する意味は、一つのフォント指定しかしてないと、そのフォントがインストールされていない環境のPCで、PCに指定されているフォントで表示されるので、こちらの意図と違うニュアンスで閲覧される事を防ぐ事だと思います。

フォントファミリ指定に複数のフォントを指定すると、左のフォントから優先的にインストールされているフォントを選びますので

font-family:"メイリオ","ＭＳ ゴシック",Osaka-等幅,Osaka-Mono,monospace;
と指定した場合、Vistaだとメイリオで表示され、XP以前のWindowsだとMSゴシックで表示されます。

Windowｓフォントのインストールされて居ないMacだとOsaka-等幅で表示され、Ｍａｃ標準ブラウザのSafari では フォント名に日本語が含まれるものは無効になってしまうので、Osaka-Monoで表示される筈です。

monospaceは、総称ファミリ名で、特定のフォント名では無く複数のフォントの総称ですから、最後にこれを指定しておけば全文が「□」で表示される事態は、防げると思います。
ただ、個々のPCにインストールされているフォントによって選ばれるフォントが違いますから、とんでもないフォントが選ばれて表示が滅茶苦茶になったり、一部の日本語が「□」で表示される可能性があるんです。＞＜

ちなみに、総称ファミリ名の種類は、
serif
　　明朝体のように裾が太く又は細くなっていたり、文字の上下にヒゲ飾りが付いていたりするフォント
sans-serif
　　ゴシック体や"Arial"のように裾の広がりやヒゲ飾りの付いてないフォント
monospace
　　全ての等幅フォント
fantasy
　　装飾系のフォント
cursive
　　手書き風（筆写体・筆記体）のフォント
の５つです。