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




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


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

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

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


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

2010年01月10日

文字サイズの変更

■ 5-14 文字の大小で記事にメリハリを


年末から年始にかけて、新聞にチラシ類が平日の倍以上折り込まれています。

それぞれのチラシは、
ターゲットとするユーザーやコンセプトによって、商品画像のトリミング、アイキャッチャーなどの配置を考えたレイアウトをもとに制作されいます。

フォントも使い分け
商品とターゲット層に、よりアピールできるように「文字の種類」「表示する大きさ」を決め、上手くレイアウトに取り込んでいます。

紙媒体では
使用出来る書体も豊富で、発行する媒体に合致するように揃えていて、覚えきれないくらい有ります。
あまりにも多すぎるので、どの書体を使って表現するかデザイナーの才覚が問われます。

しかし、ブログやホームページのサイトでは、
書体がwwwやプラウザに準拠していなくてはならないという問題が有ります。

ネット上での書体の種類は、紙媒体に比べれば極めて少ないものですが
少ないなりに、その使い方さえしっかり捉えておけば、ひけを取らないくらいの文字の配列が可能になります。

ネットで使える明朝体やゴシック体などの書体の比較、使い方については下記参照で確認下さい。



Seesaaブログで使用している、ゴシック系の「Verdana」を基準にして
文字サイズの変更を確認しましょう。

Seesaaブログでの文字サイズ変更用のアイコンは、左から9と10番目ですね。
ki-ic01.jpg
                        ueya.gif  ueya.gif

言うまでも無いことですが、
ブログでの使用文字の書体や大きさは、CSSのセレクタ定義項目の一つですね。

定義項目の一つであるため、
個別記事の書体もサイズも、全てCSSの定義を書き換えないと使えないのではと思いがちですが、

CSSはブログ全体(body、記事、サイドなど)の設計図であり

記事の一部の文字やサイズの変更など「部分的な調整」は、
HTMLタグを使用して行うことが基本になっています。

■ 文字サイズを記事入力用アイコンで指定する

【例1】

アイコン使用での文字の大きさ

@ 明けましておめでとうございます。(基準)

A 明けまして、おめでとうございます。
B 明けまして、おめでとうございます。



記事のCSS定義を確認します。


【記事のCSS】
.text{
font-family:Verdana;
font-size:12px;
line-height:1.5em;
padding:・・・・;
}

⇒セレクタ
⇒文字種類:Verdana(ゴシック系)
⇒文字の大きさ:12px
⇒行の高さ(行送り):文字の1.5倍
⇒表示位置
⇒セレクタ閉め



利爺のこのブログの仕様を定義しているCSSの、記事関係での基準書体と文字の大きさです。
書体、文字、送りなどのサイズは、この基準に沿って表示されます。

「例1」の@は
CSSに沿った基準書体の表示で
ゴシック系の文字「Verdana」を、12pxの大きさで表示しています。

「例1」のAは入力用アイコン
kaku01.jpg
を使って、表示を大きくしたものです。


タグの形式を確認してみると
<span style="font-size:large;">テキスト</span>
文字サイズは「large」で指定されます。

BもAと同じように、小さい文字入力用のアイコン
syuku01.jpg
で、サイズを変更したものです。


タグ形式は
<span style="font-size:x-small;">テキスト</span>
文字サイズは「x-small」で指定されます。

このように、
記事入力用のアイコンを使っての文字のサイズ変更には

●文字を大きくするのは「large」
●文字を小さくするのに「x-small」


の2種類のHTMLタグが用意されています。

文字のサイズを指定するタグ(属性値)には

【資料】

サイズを指定する属性値(簡易形)

xx-small
x-small
small
medium
large
x-large
xx-large 

⇒ すごく小さい
⇒ 小さい
⇒ やや小さい
⇒ 普通
⇒ やや大きい
⇒ 大きい
⇒ すごく大きい


など、サイズ別のタグが有り、簡便に使えるようになっています。

アイコンには「large」と「x-small」の2種類しか設定されていないので、属性値を直接書き換えて使用する方法が簡便です。

アイコン指定した、これらのタグを使うと

●表示される文字が思ったより大き過ぎる
●表示文字のほんの少しだけ、小さい方が見栄えがいいのでは
●文字の大小でブログのバランスを取りたい。
●思うどおりの文字サイズにしたい。

など、気になることがありますね。

■ 文字の大きさを数値で指定する

【例2】

文字サイズの数値指定

C 明けまして、おめでとうございます。
D 明けまして、おめでとうございます。
E 明けまして、おめでとうございます。


上記「例2」のC〜Eは、全て同じ文字の大きさでの表示ですが、
使用しているHTMLタグは

C<span style="font-size:large;">テキスト</span>
D<span style="font-size:18px;">テキスト</span>
E<span style="font-size:1.5em;">テキスト</span>

の形式です。

Cは前述の「例1」で確認した「large」を使い

DEは比較のため
そのlargeと同じ大きさの文字を表示させるように、別の属性値に変えています。
  
【絶対サイズ】での指定



DのHTMLタグは
<span style="font-size:18px;">テキスト</span>

文字サイズは「18px」での指定です。

「px」や「pt(ポイント)」などで指定するのは絶対サイズでの指定ですね。
「px」は 1px単位で文字の指定が可能なので、文字を思うどおりの大きさに指定できる利点があります。

「絶対指定」は文字バランスを取るときには、使い勝手のいいタグですが、

過去から、何ページかにわたる記事を書き上げていて、
●新たにブログ全体の基本文字サイズをCSSに定義し直して変更した時に、

●CSSに新たに定義した文字とのバランスを考え
ページ毎にサイズを変更しなければならないという事態も生じます。

そのような絶対サイズでの指定に対して

【相対サイズ】での指定

Eの<span style="font-size:1.5em;">テキスト</span>

の属性値「em」は相対サイズの指定で、
基準とした文字サイズが変更されると、過去記事も含めて相対サイズで定義されている文字の大きさも自動的に変更されて表示されます。

「em」は = emphasis(エンファスイス)

のことで「強調」という意味があります。

<em>要素で囲まれた文章を強調するときに使用していますが
<span style="font-size:1.5em;">テキスト</span>
のような時には「倍率」を表します。

参照 
強調タグ<em><i>
●<em>要素<i>要素について、実例をもとに確認
http://tosiji-dreamafi.seesaa.net/article/134766203.html


「1em 」が等倍を表します。
例Eでは「1.5em」ですから、基準書体の1.5倍表示になります。

基本文字のサイズを忘れていたり、
CSSを確認するのが煩わしければ、相対サイズ指定のほうが楽です。

相対サイズでの定義は、絶対サイズとは異なり、
CSSの基本文字サイズの定義を途中で変更した時でも、

相対的なサイズが反映されますので
過去記事の文字サイズを変更する必要もない、安心した使い方が出来ます。

例Eのタグ「1.5em」の表示文字のサイズは
このブログの基準サイズが12pxですので、pxの単位で見ると
 
 12px  ×  1.5em = 18px

になりますね。

結果的には、Dの
<span style="font-size:18px;">テキスト</span>
とは同じ文字の大きさになります。

このように「em」での表示は、基準使用フォントの em 倍のサイズで表記されます。

文字の拡大には 1.2em、1.4em のように数字を大きくして
縮小では0.9em、0.8emと数字を小さくする使い方ですね。

同じ使い方の属性値に
<span style="font-size:150%;">テキスト</span>
「%」を使う値も有ります。

使い方は「em」と同じですので、どれを使っても同じ結果になります。

………

文字の大小の使用は、基本形をしっかり取得して、見栄えのいい比率でうまく使うことが
しっかりしたブログの構成に結びつきます。

単に文字を大きくしたり、小さくしたりするだけではなく

●「文中の見出し項目」には1.5倍の大きさ
●「中見出し項目」には1.2倍を
●「参照記事」は少し小さく0.9倍

などと書体・大きさ・種類など、自分なりの基本を決めておき
統一した「割付」を意識して組上げてることが重要です。

ランダムに、適当に、文字のサイズを変更することは、
ブログの見栄えやレイアウトを悪くすることになりますので注意すべきことです。

書籍類や新聞などは、明確にしっかりとその基本が守られています。

同じように、ブログもしっかりと【CSSに定義】していますね。




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

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



この記事へのコメント
hebaseijinです。
自分の場合、適当と言えば
適当で文字の大きさに変化を
付けていますね。
勉強になりました。
応援済みです。
Posted by hebaseijin at 2010年01月10日 10:36
利爺さん。キャプテン★です。
2度もコメントいただいてありがとうございました。

仰るとおり僕の本業はグラフィック関係です。

本日の記事、自分的にもためになりました。

emは相対値だったのですね。
僕は、Photo shopで馴れてしまったのでpx指定が好みです。。。

ではでは。
Posted by 速収講座だよ★キャプテン at 2010年01月10日 23:34
こんばんは、ありすです。
いつも詳しいアドバイスを本当にありがとうございます!!

今回の記事、かなり勉強になりました。
文字サイズが'px''em'でも設定ができるとは驚きでした!!
参考にさせていただきます。
応援ぽちっ☆

そして、私のブログについてです。
サイドバーの設定場所で文字の大きさを設定し直そうと試したのですが、大元のCSSで管理しているみたいで改善が見られませんでした。
…もう少しレベルアップが必要なようです(TдT)

せっかくアドバイスをくださったのに、すぐに解決できなくて本当にすみません。。。
Posted by 超初心者ありすの稼ぐアフィリエイト戦略 at 2010年01月11日 03:48
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

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


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

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

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