TOP ブログの基本 アフィリエイト アクセスアップ カスタマイズ ブログ・HTML ブログ・CSS




ハイサイ(ようこそ)利爺のブログへ


●ブログの基本、アフィリエイト、HTML・CSSまで
初めての方にも分かり易いように下記のシリーズで纏めています。

・・・・・・・・・・・・・・・・ 各章の項目(目次) ・・・・・・・・・・・・・・・
= 現在、シリーズ記事を書いているブロックです。

エントリー順に確認できるように【目次】を作ってありますので
上段のコンテンツバー(menu)または上記の項目から各ブロックに入れます。


●本文中に表示しているアイコンは
= 参照記事  = 頁中の章  = 注釈  = 記事ブロック
を表します。

2010年01月28日

タグで指定するWebで使用できる書体

■ 5-17 Web上の書体について

前回まで
Seesaaブログの記事欄に設置されている
入力用の「アイコン」に含まれるHTMLの要素タグをシリーズとして、確認してきました。

最後のアイコン emoji01.png は「絵文字」になっていますね。

絵文字については、アフィリエイトや情報を提供するブログでは、
あまり必要ではないと思いますので説明は省略します。

記事入力用の各アイコンは
ブログ記事の入力時に、HTMLが分からなくてもアイコンをクリックすることで、必要なタグが使えるように入力を補助するために設置していますね。

基本的にはアイコンを利用せずに
HTMLタグを迷うことなく記入出来れば、今まで確認してきたHTMLの基礎を取得したと言えます。

しかし
便利なツールとして設置してあり、クリックすればタグ入力ができるのですから、大いに使いこなすべきですね。

参照 
記事欄アイコンの使い方
●記事入力枠の上段に表示されているアイコンの
 使い方シリーズ@です
http://tosiji-dreamafi.seesaa.net/article/134496905.html


今回から
ブログでのHTMLを確認するページになります。

「Web上の書体」から確認してみましょう。

ブログやホームページはデザイン的なレイアウトより、公開する情報の信憑性、信頼度が主となっているため書体を気にすることなく記事を書き込んでいます。

書体は
書籍や新聞、チラシなどの広告関係では、その使い方の良し悪しで出版物の形が決まると言うほど重要な要素を占めています。

出版社での編集者は
編集の基本はもとより、書体の使用感覚も最低条件として必要です。

またデザインを本業としているデザイナーは、
書体の「いろは」とその「特質」を知らなければ、職務が成り立たないほどです。

Webの世界と印刷の世界の大きな違いではありますが、

サイトのデザインを考えるとき
ある程度の基本として、書体の使い方を知っておくのも、基礎知識として必要なことです。

Webで使える基本的な書体として
Microsoft Windows日本語版 に標準で搭載されている馴染みの深いMS系の書体

「MS明朝」「MSゴシック」

とその仲間の書体を確認してみます。

MSとは Microsoft の省略で、
その書体は、ワードやエクセルの「日本語」入力の基準となっていて、
プラウザのInternet ExplorerやFirefoxには標準で搭載されていて、wwwに準拠しています。


■ 記事の書体を確認して変更する。

記事の一部の書体の変更、入力時にHTMLタグで指定しますね。


「MS明朝」に書体を変更することにして、その使用方法と表示例を確認してみます。


書体の指定

<div style="font-family:'MS 明朝',serif"></div>


【画像1】
aph01.png
 ↑ 画像をクリック・元画像が開きます。

「画像1」を参照に、
HTMLタグ入力の際の留意点を確認します。


●MS 明朝

@指定するfont-familyの「MS 明朝」
「MS」と「明朝」の間に半角のスペースが入ります。

A使用する書体名を
' 」(シングルコーテーション)または
」(ダブルコーテーション)
で括ります。

B代替フォントの指定。

の3点に注意して、正確に記入する必要があります。
<div style>の style指定形式ですね。

代替フォントとは

「MS明朝」は殆どのプラウザに標準で搭載されていますが、
搭載されていないプラウザも有ります。

搭載されていなければ、指定された書体の表示が出来ません。

搭載されていないプラウザを使用しているユーザーために
表示エラーにならないように、代替のフォントの指定しておきます。

代替の「serif」(セリフ)は明朝体のことです。

「serif」を指定しておけば、該当書体が無いときは
そのプラウザがデフォルトで搭載している明朝系での表示になります。

HTMLタグでの使用文字指定を確認してみます。
【表示例1】

MS 明朝:表示例
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された、根強い人気の歴史ドラマである。


明朝書体で表示されていますね。

MS明朝は等幅フォントです。
等幅フォントとは、MS明朝・MSゴシックなどのように、
それぞれの文字の横幅が統一されていて、

原稿用紙の枡目の中に一文字づつ記入したように、
文字幅が綺麗に揃って表示される書体のことです。

日本語漢字は2バイトで表示されますね。
1バイトで表示される漢字は有りませんので、「 」( )などの約物(やくもの)も
等幅の全角が基準になっています。

1バイト系のカタカナ、約物を半角で表示したいときには、入力時に半角の形にする必要があります。
  
    注
   ●約物の半角入力
    キーボードから該当する約物を入力してEnterで確定する前に
    ファンクション「F8」を押して半角に変更。
   

●「MS P明朝」

明朝系には他に「MS P明朝」が有りますね。

    注
   ●「MSP明朝」ではなく「MS P明朝」が正確な表記。
    「MS」と「P明朝」の間に半角のスペースが入ります。

Pはプロポーショナル フォント(proportional font)のことで

   ※proportion = 割合、比率

文字ごとに横幅が調整されています。

英文の組版からの派生で
例えば、アルファベットの「 I 」や「 H 」では
I は H に比べて横幅が小さいですね。

I をHと同時に使用すると
I の横の空きが広すぎて締りのないように見えるので

横幅を調整して小さくしています。

そのような横幅の違いを詰めて表示するのが「Pフォント」で
一般的には表示や見栄えを良くする目的で使用されます。

【表示例2】

MS P明朝:表示例
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された、根強い人気の歴史ドラマである。
⇒ 英文字 abcdefghijk


MS明朝との比較
三国志は歴史を背景とした歴史小説ではあるが今でも圧倒的な人気をほこり最近では「レッドクリフ」の大作映画も公開された根強い人気の歴史ドラマである
⇒ 英文字 abcdefghijk



「表示例2」はMSP明朝とMS明朝を比較するための表示です。

MSP明朝では(※MS明朝の黄ベタ部分を参照)

●文字と文字の間を、その形状に合わして調整。
●括弧などの約物を半角に変更(残った半角を取り去る)
●カタカナの字詰め。
● 。、などの句読点の半角表示。
 
文字の送り(字間)を詰めています。

とくに明確に違いが分かるのは
両書体の下方に表示した英文字ですね。

MS明朝とMSP明朝の表示上の、もうひとつの違いは

MS明朝が、
漢字、約物も等幅での表示が基本のため、文頭と文末がきれいに揃って表示されるに対して
MSP明朝は、
約物類(1バイト系カナを含む)が半角の表示のため、文末が揃わないという表示上の違いがあります。

同じ明朝系でも
MS明朝とMSP明朝には、このように大きな違いが有ります。




●ゴシック系の表示。

ゴシック系にも「MSゴシック」「MS Pゴシック」が有りますね。
使用する時のタグの使用方法は同じです。

表示例を見てみましょう。
【表示例3】

MSゴシック:表示例
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された、根強い人気の歴史ドラマである。



タグの形式は、先の例と同じですが
<div style="font-family:'MS ゴシック',sans-serif">

代替のフォント名が
ゴシック体を表わす「sans-serif(サンセリフ)」になります。

【表示例4】

MSPゴシック:表示例
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された、根強い人気の歴史ドラマである。


「表示例3」のMSゴシックと比較してみて下さい。
文字の詰め具合が比較できます。

●明朝・ゴシック以外の書体

【表示例5】

HG正楷書体-PRO:表示例
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された、根強い人気の歴史ドラマである。



【表示例6】

HGP創英角ポップ体:表示例
三国志は歴史を背景とした「歴史小説」ではあるが、今でも圧倒的な人気をほこり、最近では「レッドクリフ」の大作映画も公開された、根強い人気の歴史ドラマである。



その他に使用できる書体は有りますが省略します。
ワードに搭載されている書体は使えるようですので、試して下さい。


■CSSに定義されている書体を変更する。

CSSの定義を書き換えて、
ブログの使用文字を一括で変更する方法を確認します。

まず利用しているブログサービスでの書体を確認しましょう。

CSSを開きます。

seesaaブログでは
メニューの「デザイン」→下段のテンプレート「タイトル」

から入りますね。


SeesaaブログのCSS

body {
font-family:Verdana;
background-image:url(画像url);
margin:0px;
padding:0px;
text-align:center;
}


CSSは

セレクタ  
プロパティ 
      

= body
= font-family
= Verdana

の構造ですね。

このブログでの使用書体は「Verdana」が使用されています。

VerdanaはWeb上で使用する目的で開発された
ゴシック系の書体で、見やすい書体ですので多くのプラウザで使用されています。

ブログの全ての書体を変更するには
このCSSのプロパティの「値」

font-family:Verdana;
  ↓
font-family:'MS 明朝',serif

の書き換えになります。

値の中のserifは記事上段で確認した代替フォントの定義ですね。

セレクタの body の他に「font-family」を指定しているセレクタが
いくつか有りますので、その全てを変更します。

以上がブログの書体を全て変更するときの、CSSを書き換えです。


Web上で使用する書体は、
ブログサービスで設定しているプラウザ対応のもので十分ですが、

●他のブログと差別化をする。
●文字でもって強調する。
●重要な資料を目に付くようにする。

などの目的で変更することも大切な考え方の一つです。




▲HTMLの関連記事
   holder01.gif ブログで使うHTML-目次ー
    http://tosiji-dreamafi.seesaa.net/article/133635358.html

★ご協力お願いいたします★   
      kame.jpg
    banner_01.gif
……人気ブログランキング……



この記事へのコメント
こんばんは。
普段よく使う書体はMS明朝体/MSゴシック体ですが、Pが付く書体と付かない書体の違いがわかりました。横幅が違ってくるんですね。書体の大事さ参考になりました。
Posted by hebaseijin at 2010年01月28日 20:55
ハイサイ、利爺さん。

いつもお世話になってます、ありすです。ありがとうございます☆

CSSって何でも指定できるんですねー。
勉強になりました(それはいつもですが)!!

そして、遅くなりましたが相互リンクをお願いしております。
よろしくお願いします^^*

応援ぽち☆
Posted by 超初心者ありすの稼ぐアフィリエイト戦略 at 2010年01月29日 06:11
利さん、倭人です。
ちょっとご無沙汰してしまい
すみませんです。

明朝やゴシック
結構、いい加減に使っていましたが
なるほどです^^

Pが入ったものも
これだけ違うということが
明解に分かりました。

では、また。
応援します。
Posted by 倭人 中高年ブログで稼ぐアフィリ大百科 at 2010年01月30日 12:53
ハイサイ、利爺さん。
ありすさんです。
温かいコメントを本当にありがとうございます^^

CSSに詳しい利爺さんに褒められると、
嬉し恥ずかしですね。。。
これを糧に、
まだまだこれからも頑張ります☆

応援ぽちっ^^*
Posted by 超初心者ありすの稼ぐアフィリエイト戦略 at 2010年02月03日 23:23
利 爺さん、初めまして、ゴードン晃一と申します。
私もブログ記事を書いていますが、
利 爺のように詳しくはかけていません。
勉強になりました。
もしよろしければ、私のブログも御覧になって下さい。
Posted by ゴードン晃一 at 2010年02月04日 15:34
利爺さん、コメントありがとうございました。
利爺さんのブログを拝見した感じでは、相当のアフィリの達人と思っていました。このブログは、私にとってネットの教科書ですからこれからもお邪魔します。もちろん応援ポチもいたします。
これからもよろしくお願いします。
Posted by ゴードン晃一 at 2010年02月05日 22:24
利爺さん、はじめまして。
上田真司と申します。

倭人さんのブログの紹介からきました。
ガンプラー対策のよいサイトを教えて頂き、ありがとうございました!

お礼の意味もこめて、応援クリックしていきます。

とても、勉強になるサイトですね!
これからも読ませて頂きます。ありがとうございました!
Posted by 夢や目標を達成へと導く進化の法則@上田 at 2010年02月06日 19:01
こんばんわ☆蒼井といいます☆

例で書かれていて実際の書体の違いが
比べられるのでものすごくわかりあすかったです☆
勉強になりました♪

仲良くして下さい☆ぽち
Posted by 蒼井 ソラ at 2010年02月06日 20:11
はじめまして。
倭人様のブログより(絶賛しておられたので)参りました。
ガンブラー対策の件、情報提供頂き、ありがとうございました。

それにしても物凄い情報量ですね・・・。
改めてゆっくりと伺いたいと思います。
宜しくお願い致します。
取り急ぎ御礼まで。
Posted by いずっち at 2010年02月06日 22:41
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。