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




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


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

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

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


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

2009年04月27日

行間・行送りについて

■ 4-12 行の高さの定義


●HTML・CSSで用いる「行」の考え方。

行の設定には
行送り」「行間
の考え方があります。

HTML・CSSでは「高さ」と表現し
プロパティ「line-height」で定義します。

【画像1】
test005.jpg

参照画像のように

行送りとは
前の行の文字の中心から、
次の行の文字の中心までの距離(サイズ)をいいます。

    注
   行の中心からの考え方は、写真植字(写植)の概念です。
   行の上辺から、次の行の上辺までと表現しても同じ意味です。

行間は
その行の下辺から、次の行の上辺までのサイズを言います。
行と行の間の空きサイズのことです。

行間と行送りの関係は
●「行と行」の間の空きを「行間」
●「行間」に「文字の大きさ」を足したのが「行送り」になります。

行送り・行間とも、グラフィックデザインや印刷の世界では
常に意識している文字入力の基本です。

行に「送り」や「空き」があるように

入力する個々の文字にも
 ●文字送り =(字送り)
 ●文字間 =(字間)
同じような仕組みがあります。

「文字と文字の間を広げる・詰める」などとよく耳にしますね。

文字の送り・間の考え方は、行の仕組みと同じです。
プロパティの 「letter-spacing:」 を用いて定義しますが一般的ではありません。

前述したように
HTML・CSSでは行間の考え方はなく
行送りを「行の高さ」として、プロパティline-height
で定義するのが一般的です。


ときどきHTMLやCSSを解説をしている「ブログ」の中にも
「行の高さ」を「行間」として表現している例も見られます。

●行の高さ(行送り) と
●行間 は

参照画像や例で確認したとおり、明確に異なりますね。

このブログでは「行送り」を
行の高さ
として表現を統一しておきます。


行の高さは

●絶対サイズ
●相対サイズ

での定義の方法があります。

【絶対サイズ】

in
cm
mm
pt
pc
px


【相対サイズ】
em
ex
%



インチ( 1inchi = 25.4 mm )
センチメートル
ミリメートル
ポイント( 1pt = 1/72 inchi)
パイカ( 1pc = 12pt )
ピクセル



指定文字のサイズに対する比率
指定文字の文字 x の高さ
指定文字のサイズに対する%



日本語のフォントは
文字の上下(縦)」と左右(横)のサイズが同じになっています。

行の高さは
そのブログで定義されている文字の大きさを基準として考えますので

行の高さを使用文字の大きさと、同じサイズで定義すると、
行と行の間には隙間がなく、くっついて表示されます。

参照 
●タグで指定するWebで使用できる書体
●「Web上の書体」について
http://tosiji-dreamafi.seesaa.net/article/137856488.html


定義は
絶対、相対サイズのどの方法でも構いません。

ブログやホームページのレイアウトは
個人的な好みが反映され、使用している文字の種類や大きさも
その人なりの感覚で定義しているのが一般的です。

文字の種類や大きさ、行の高さなどは
ブログの特質、全体的なレイアウトの見やすさなどを考えて
定義するのが基本ですね。


●このサンプルぶろぐ(利爺のゆったり…)の

「CSS」で定義している記事セレクタ
「.text」を確認してみます。

【CSS】

.text{
font-size: 12px;
line-height:18px;
padding:0px 15px 5px 10px;
margin-top:0px;
}


文字の大きさ =  12px
行の高さ   =  18px

「絶対サイズ」での定義です。

「line-height:18px;」は
●文字の大きさを12px、行間は6pxにして次の行を作りなさい。
と言うのと同じことですね。


サンプルCSSのように
「px」単位のような絶対サイズでの定義は、文字の大きさを定義(修正)したとき、同時に行の高さも定義し直さないと
最初に定義した値での表示になりますね。


記事を書き込んでいるとき
段落あるいは文章の一部や文字を大きくして、強調したい時があります。

    注
   ●絶対・相対指定はCSSの定義でも頻繁に使用します。

   ●記事の文章や文字の一部を大きく、または小さく表示する時には

   ●CSSを書き換えるのではなく
    入力時に「HTMLタグ」で、その変更したい文章や文字の範囲だけの
    定義にします。


   ●CSSはブログ全体のバランスを考えた基本的な設計図です。
    CSSの定義はブログ全体へ反映されますので、
    記事の一部の変更は「HTML」タグでの指定が基本です。

   ●CSSより「HTML」タグの方が優先されます。


【例1 このブログのCSS定義】
定義どおりの表示

【CSS】

font-size: 12px;
line-height:18px;
  ↓
【表示】(青色文字) 
利爺です。
よろしくお願いします。


CSSの定義どおり
文字の大きさは「12px」(このブログの基本文字サイズです)
行は「18px」の高さで表示されています。


CSSの定義で

@文字と行の高さを同じサイズにすると

font-size: 12px;
line-height:12px;
  ↓
【表示】(青色文字)

利爺です。
よろしくお願いします。


行と行の間には「空き」がないですね。

A line-height:24px;

として行の高さを文字の2倍サイズの「24px」に変更。
  ↓
【表示】(青色文字)

利爺です。
よろしくお願いします。


行と行の間が広がりますね。

行間の考え方でしたら、
line-height:24px;は
「文字12px + 行間12px = 行の高さ24px」ですね。

●line-height は
ブログの文字のサイズ(12px)より大きく指定するのが基本になります。

出版物の「あたりまえの定理」です。



【例2 絶対サイズでの定義】
文字を26pxの大きさに変更。行の高さ変更なし。

【CSS】

font-size: 26px;
line-height:18px; ← 定義は変更していません

【HTML】
「入力タグの形式」
<span style="font-size:26px;line-height:18px;">文章</span>


  ↓

【表示】

利爺です。
よろしくお願いします。


文字を大きくした結果、行と行が重なって表示されています。

セレクタ「.text」の
プロパティ「line-height:18px;」の絶対サイズでの指定が反映されている結果ですね。

文字の大きさは「26px」もあるのに、行の高さは「18px」のままなので、高さのサイズより
文字の方が大きく、行と行が重なって表示されるということです。

この形で表示されているブログ記事をよく見うけます。


文字の大きさに準じて、行の高さを調整(再定義)

【CSS】
font-size: 26px;  ← 文字サイズを変更
line-height:32px;  ← 行の高さも変更

【HTML】
「入力タグの形式」
<span style="font-size:26px;line-height:32px;">文章</span>


  ↓

【表示】
利爺です。
よろしくお願いします。


記事入力の時、HTMLタグで
文字の大きさと、行送りの指定を同時にしました。

行の高さを文字のサイズより大きく「32px」に変更したので
行と行が離れて表示されていますね。



この例のように
「px」や「in」で文字の大きさ、行の高さなどを指定する方法を
「絶対サイズ」
での定義といいますね。


【例3 相対サイズでの定義】
「相対サイズ」は
文字サイズを「●px」で使用したとき、高さ(行送り)は、使用フォントサイズに対して相対的に判断される表示の方法です。

プロパティは

line-height:1.2em; (1emは等倍)
line-height:120%; (100%は等倍)


のどれを使っても同じ意味になります。

【CSS】
@ フォントサイズを26pxの例
font-size: 26px;
line-height:1.2em; (pxで考えると26pxの1.2倍=32px)

【HTML】
「入力タグの形式」
<span style="font-size:26px;line-height:1.2em;">文章</span>


  ↓

【表示】
利爺です。
よろしくお願いします。


文字の大きさに対して、自動的(相対的)に行の高さが計算されます。

pxで考えると26px の 1.2em(倍)= 32px の行の高さで表示されています。



A フォントサイズを30px の例

【CSS】
font-size: 30px;
line-height:120%; (30pxの120%=36px)

【HTML】
「入力タグの形式」
<Span style="font-size:30px;line-height:120%;">文章</span>


  ↓

【表示】
利爺です。
よろしくお願いします。


文字を大きくしても

「1.2em」や「120%

と「行の高さ」が相対的に定義されていますので、
文字サイズに相対(em・%)して
広がって表示されていますね。



使用文字サイズが大きくなれば
それに伴って「行」も相対的に変更される定義方法が
「相対サイズ」ですね。

この「絶対」「相対」は
文字の大きさや、行の高さだけに使用する考え方ではなく、画像表示のurlの絶対番地、相対番地、あるいはtableでの絶対・相対幅など、頻繁に使われている定義の方法です。

CSSやHTMLへの定義は、基本的には「相対」の方が管理は楽で理想的です。


……

出版界では、文字を大きくしても

ページ内に窮屈にならない程度の行送りを実現する「平体」。
一行に入力する文字数を増やす「長体」。

など、変則的な「入力の方法」があります。

    注
   平体や長体の仕組みは、文字詰めとは異なります。

   文字詰めは書体には関係なく送りを調整して表示しますが、
   平や長体は、書体そのもの「高さや幅」を調整します。

   先のように、日本語書体は高さ(上下)と幅(左右)が同じサイズに
   なっています。
   
   書体の
   ● 「上下(縦)サイズを小さくして、左右(幅)はそのままの形を平体」
   ● 逆に「上下はそのままで、左右を小さくするのが長体」

    【例】 20px の書体に
     1) 10%(2px)の「平」をかけると、縦の高さは「18px」
        左右幅はそのままの「20px」

     2)「長 」10% は、縦の高さはそのまま「20px」
        左右幅が「18px」になります。

     3)掛け率の「%」は任意の比率で使用します。

    ※書体そのものの形を変えて
     ページや段落の行の数や一行に入る文字数を調整する方法です。

    ※同じように書体を右または左に傾ける斜体もあります。

Webでは使用する書体の概念が違いますので、一般的でないですね。


変則文字を使用している代表的な例が、毎日見ている

「新聞書体」です。

新聞の縦組みと、webでの横組みの違いはありますが
比較して、どこが異なるか確認して見ましょう。


定義の方法の絶対・相対のメリット、デメリットも
使用しているうちに理解できてきます。




▲カスタマイズの関連記事 【別窓での表示です】
   holder01.gif ブログのカスタマイズ-目次ー
    http://tosiji-dreamafi.seesaa.net/article/115424617.html

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

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



2009年04月26日

タイトル文字の変更(3)

■ 4-11 ブログ説明文の修正

説明文の書き換えや修正はCSSのセレクタ【.description 】でしたね。

CSS【.description 】
.description {
color:#666666;
font-size:12px;

font-family:Verdana;
font-weight:bold;
line-height:140%;
padding:0px 10px 0px 0px;
}

⇒ 説明文の文字色
⇒ 説明文の文字の大きさ



⇒ 説明文の行の高さ
⇒ 説明文の表示位置



しかし、セレクタ【.description 】のプロパティには

文字(書体)、文字の大きさ、文字の太さ、行の高さ

のほかに、文章を書き換えるプロパティや定義は見当たりません。

複数のブロガーがブログサービスが提供している同じテンプレートを利用しています。

「同じテンプレート」を使用していることは
テンプレートのCSSが同じということですから、初期設定で画像の位置やタイトル文字、記事の文字の大きさなどが決まっています。

同じテンプレートを利用していても、各々のブログの
●ブログ名
●ブログの説明
は異なっています。それは当たり前のことですね。

ブログの設定の段階で入力した「ブログ名」や「説明文」がそのままの形で表示されます。
文章の句読点や改行、行数もそのままの形です。

「ブログ説明文」の修正の
一番の近道は、ブログの設定における説明文を修正するということですね。


●「グログのタイトル」と「説明文」の修正

説明文の表示を
2、3行程度の横長の形にしたいなら
設定の段階で2、3行の長さにまとめて、文章を書き込み入力します。

エンタトリー記事の入力と同じ方法です。

ブログの「タイトル」と「説明文」の間に空白を置きたければHTMLの改行タグ<br>を必要な数だけ記入すればいいことですね。

見た目には「タイトル」と「説明文」の間に空きができます。

この方法が手っ取り早い修正の方法ですが

検索エンジンがブログの説明文を確認するときに、文章の頭から<strong>のような強調でもなく、<cr>改行を読み取っていく形になりますので、

結果的には
SEO対策、CSSの構文にはまずい方法ですね。

CSS(上記を参照)のセレクタ<.description >のプロパティ<padding>の定義の中に

余白を取る<padding>プロパティがあります。

padding:0px 10px 0px 0px;

右から「10px]の余白を取るほかには
上、下、左からは「0px」と定義され、余白を取っていませんので
ブログのタイトルの直ぐ下から、説明文が表記されるようになっています。

ブログのタイトルと説明文の間に一行の余白が必要でしたら
このブログの行の高さは「18px」の定義ですので、

padding:0px 10px 0px 0px;
   ↓
padding:18px 10px 0px 0px;

の形で定義し、説明文から上へ一行分の余白を取るようにします。

<padding>の使い方は分かりますね。

<padding:上px 右px 下px 左px;>の形で、余白を取るプロパティですね。




変更後のブログを見てみましょう。

テンプレートの「初期設定」どおりの表示になっています。

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

タイトルの位置を少し上にもっていき、もう少し左側に寄せて表示したいですね。

  参照 ⇒ 見出し(タイトル)の表示修正A

 ★セレクタ「h1」で上からの表示位置を修正
  padding-top:50px; → 20px(任意の数字)

 ★セレクタ「#banner」で左からの表示位置を修正
  padding-left:100px; → 20px(任意の数字)
  
 ★ブログのタイトルと説明文を表示する上下幅
  height:230px; → 180px(任意の数字)
    ※注意 幅を小さくしすぎますと、
     タイトルとエントリ記事などが重なって表示されます。
     プレビューで確認しながら設定しましょう。


「画像3」が修正後です。

【画像3】
siage001.JPG
 ↑ 画像をクリック・元画像が開きます。

サンプルブログより、タイトルと説明文が
上方向に詰められ、さらに左側に寄って表示されていますね。

説明文もブログの設定で修正したとおりの3行になっています。


今まで見てきたとおり
CSSはブログの構造を作り上げるHTMLと連携して、ブログの見栄えを担当しています。

HTMLは構文的に難しいものですが、CSSは比較的に理解しやすい形で記入されています。

書き換えの方法を理解することは、自分のブログを

「個性と独自性の溢れるブログ」

に作り変えることが、

「自分の力で出来る」

ということです。
覚えていて「損」はありませんね。

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


2009年04月21日

タイトル文字の変更(2)

■ 4-10 タイトル文字の修正(2)

画像を使用しない「シンプルなレイアウト」を見ていきます。

定義を書き換えるCSSのセレクタは
【書き換えるセレクタ】

#container
h1
#banner
.description


⇒ 画像
⇒ タイトル
⇒ タイトル・説明文の表示上下幅
⇒ ブログの説明文

セレクタ単位で確認しましょう。

CSSを書き換える前にコピーして、保存しておきましょう。

@【#container】の書き換え


#container{
margin:0px auto 0px auto;
width:800px;
background-image:url
(Http・・・・);
background-repeat:no-repeat;

color:#666666;
}




⇒ 赤字のプロパティを削除



⇒ ブログ全体の文字色



赤字のプロパティは完全に削除します。

color:#666666;
このプロパティはブログ全体(サイド・記事本文)の文字の色です。

  参照 ⇒ カラーコード表

サンプルでは、
薄い黒色を指定していますが、はっきりとした「黒色」に変更してみましょう。

● color:#666666; → color:#000000;

書き換えは大丈夫ですね?

CSSを書き換えたあと、ブログ表示がどう変わっているか「確認」をする時には

「プレビュー」でチェックします。

【画像1】
css-view001.JPG
 ↑ 画像をクリック・元画像が開きます。

「保存」をしますと、CSSが完全に「書き換えられた状態」になります。
元に戻すには、先ほどコピーしたCSSを上書きでペーストして元のCSSに戻す必要があります。

ここでは、仮の書き換えですので「保存」しないように注意しましょう。

「プレビュー」を確認します。
ブログタイトルと説明文以外は、文字が「黒色」に変わっていますね。

以下、同じように各セレクタを書き換えます。

A【h1・h1 a】の書き換え


h1 {
margin:0px;
padding-top:50px;
font-weight:bolder;
font-size:26px;
}
h1 a{
color:#00707D;
font-family:Verdana;
text-decoration: none;
font-weight:bolder;
}



⇒ タイトル文字開始位置(上から

⇒ タイトル文字の大きさ


⇒ タイトル文字の色






セレクタ「h1」では

padding-top:50px;

のプロパティがタイトルを表示する位置です。
TOP(上)から50pxの位置に表示するの指示ですね。

サンプルの表示位置は少し下がり過ぎていますので、少し上の方に表示するために「paddingの数字」を変更します。

● padding-top:50px;  ⇒  padding-top:20px;

 【注意】左の方からの表示位置のプロパティは、
     後述のセレクタ「#banner」に置かれています。

文字の大きさを少し大きく
● font-size:26px;  ⇒   font-size:30px;

これらのプロパティが「h1」での書き換え部分です。


セレクタ「h1 a」での
「color:#0000FF;」は、タイトル文字色のプロパティです。
確認し易いように、思い切って赤色にしてみましょう。

● color:#00707D; ⇒  color:#FF0000;


B【#banner】の書き換え


#banner{
font-family:Verdana;
margin:0px;
text-align:left;
background-image:url
(Http・・・・);
background-repeat:no-repeat;

padding-left:100px;
height:230px;
}





⇒ 赤字のプロパティを削除



⇒ タイトルの表示開始位置(左)
⇒ ブログ本編開始位置
 (タイトルなどの表示幅)



セレクタ「#banner」には、【#container】で削除した同じ画像を読み込むプロパティがありますので、同じように削除します。

「padding-left」

タイトルを左から、どの位置に表示するか指示されています。

現在は100px左に空きますので「20px」の空きに変更してみます。

● padding-left:100px; ⇒  padding-left:20px;


height:230px;
このプロパティは、ブログタイトルとブログ説明文を表示する範囲。

ブログ本体(サイドバー、記事)の開始位置を指示するプロパティです。

現在は、高さ230pxの枠内(仮想枠)にタイトル、説明文を記入するようにしています。

● height:230px; → height:180px;
に書き換え、タイトルと説明文の表示範囲を小さく狭めてみます。


C【.description 】の書き換え


.description {
color:#666666;
font-size:12px;

font-family:Verdana;
font-weight:bold;
line-height:140%;
padding:0px 10px 0px 0px;
}


⇒ 説明文の文字色
⇒ 説明文の文字の大きさ



⇒ 説明文の行の高さ





セレクタ「.description}はブログ説明文の詳細です。
文字の色  ⇒   color:#666666;。
文字の大きさ  ⇒   font-size:12px;  
行の高さ(行送り) ⇒   line-height:140%;

と記入されています。

● color:#333333;
● font-size:14px;
● line-height:140%; ← 行の高さはそのまま

に書き換えます。
  


【画像2】
css-view002.JPG
 ↑ 画像をクリック・元画像が開きます。

CSSを書き換え、表示したのが「画像2」です。

文字の組み合わせや全体のバランスなどを確認して、思い通りのレイアウトになっていれば
この段階で「保存」をします。

……

テンプレートは、CSSを書き換えることによって、好みの形になりますが
あくまでも訪問した方にデザイン的にも「優しい」ブログを目的としています。

テンプレートの書き換えは自由に出来ますが、
ブログの本来の目的は「有益な情報」「内容の素晴らしい記事」の発信です。

その基本的な考えから、横道にそれないようにしましょう。
それに勝るものはないのです。

次回は補足として、ブログ説明文を別の角度から修正してみましょう。




▲カスタマイズの関連記事 【別窓での表示です】
   holder01.gif ブログのカスタマイズ-目次ー
    http://tosiji-dreamafi.seesaa.net/article/115424617.html

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

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



2009年04月20日

タイトル文字の変更(1)

■ 4-9 タイトル文字の修正(1)

ブログ背景に画像を用いるとき
色合いの強い画像を、そのまま使用したらタイトルや説明文が読みにくいことがあります。

薄い色合いの画像を選択して
ブログ全体のレイアウトからは視認性を考え、文字を大きく、色付けをした方が印象としてはいい場合があります。

文字の大きさや色の使い方は
全体的なデザイン・レイアウトとのバランスが重要であり、
大きければいい、目立つ色を使うからいいという、単純な判断にはなりません。

今回は
■タイトル
●文字を大きくする。
●文字の色を変える。
●表示位置を調整する。

■ブログ説明文
●文字を大きくする。
●文字の色を変える。
●表示位置を調整する。

の各セクションを確認します。

CSSで
●ブログの見出し(タイトル)用のセレクタは< h1 >ですね。
●ブログ説明文は、セレクタの<.description>に記入されています。

【CSS】

h1 {
margin:0px;
padding-top:50px;
font-size:26px;
color:#0000ff;
font-weight:bolder;
}

.description {
font-family:Verdana;
font-size:12px;
color:#000000;
font-weight:bold;
line-height:140%;
padding:0px 10px 0px 0px;
}



⇒ セレクタ(タイトル)
⇒ 文字表示位置
⇒ 文字表示位置
⇒ 文字の太さ
⇒ 文字の大きさ
⇒ 文字の色
⇒ セレクタ閉め

⇒ セレクタ(ブログ説明文)
⇒ 文字の種類
⇒ 文字の大きさ
⇒ 文字の色
⇒ 文字の太さ
⇒ 行の高さ
⇒ 表示位置
⇒ セレクタ閉め




サンプルで使用した画像は花の色やバックが強すぎるため、ブログ名やブログ説明文が読みにくい結果になっています。

画像を修正することは
ある程度のデザイン・レイアウトの知識や、専用ソフトを使った経験を必要としますので、ここでは画像の修正方法の確認は省略します。

CSSを基にタイトルで使う文字、その大きさや色を修正を確認します。

ブログタイトル関係のセレクタは <h1>ですね。

<h1>で定義しているプロパティは
h1 {

margin:0px;
padding-top:50px;
font-size:26px;
color:#0000ff;
font-weight:bolder;
}
⇒ h1セレクタを開く

=表示域の左ヘリに沿り
=上のヘリから50pxの余白を取って
=26pxの大きさの文字を
=青の文字色にして
=太い書体を使って 
⇒ セレクタを閉める

プロパティのとおり表示しなさい。

の意味になりますね。

この<h1>要素の中で、文字の種類<font-family:>の定義はないですね。

ブログの共通の文字として
<body>セレクタの中に<font-family:>プロパティが定義されています。

<body>要素はブログの形状を司るセレクタですので

<h1>セレクタや他のセレクタで「プロパティ」として定義がないときは、そのまま<body>で定義した要素が引き継がれます。

<h1>の中で再定義しても構いませんが
継承されるプロパティは、省略した方がCSSが軽くなっていいでしょう。

このブログでは「デフォルト」として
明朝やゴシック系の書体を持っていませんので、www上で使用可能なMS系の書体を定義して使用します。

定義のプロパティの記入形式が少し異なりますので、下記の参照を確認しましょう。




●CSSのセレクタ<h1>の定義を修正して
画像に上書きする、タイトル文字の表示位置と文字の大きさ、色を確認します。

【CSS】

h1 {
margin-right:24px;
padding-top:50px;
font-size:36px;
color:#FFFFFF;
font-weight:bolder;
}


⇒ セレクタ
⇒ 左端から24pxの位置
⇒ 上から50pxの余白
⇒ 文字サイズ36px
⇒ 文字色を白色に
⇒ 文字は太く
⇒ セレクタ閉め


のようにしておきます。

書体の<font-family>は<body>要素のプロパティを継承して表示しています。

このブログの書体はセレクタ「.description 」でも確認できるように
font-family:Verdana;
ですね。

見出し文字の「Verdana」書体を明朝系に変更するには

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

のプロパティと値を、上記のCSSに追加します。
挿入箇所はどこでもいいですが、<font-size>の前くらいが適当でしょう。

●値の「'MS 明朝', serif;」のようにシングルコーテーション( ' )で書体名を括ることと、代替フォントの「serif」を記入する形を間違わないようにしましょう。

●詳しくは上記の参照「タグで指定するWebで使用できる書体」を確認。


●ブログ説明文は、セレクタ<.description >ですね。

<.description >の定義を書き換えてみます。

【CSS】

.description {
font-family:Verdana;
font-size:14px;
color:#FFFFFF;
font-weight:bold;
line-height:150%;
padding:0px 18px 0px 0px;
}



⇒ セレクタ
⇒ 書体は<Verdana>
⇒ 文字サイズは14px
⇒ 文字は白色
⇒ 文字の太さは「中」
⇒ 行の高さ(送り)150%(1.5倍)
⇒ 表示位置はタイトルから18px
  下の位置から
⇒ セレクタ閉め



タイトルと説明文の文字を好みのまま、定義し直して表示したサンプルが
「画像1」です。

下絵が色の濃い画像なので文字を白色にしていますが、白文字でもあまりスッキリしませんね。

サンプルとしては適切な画像ではないですが
表示する書体、大きさ、色使いなど、CSSのプロパティの役割と定義を変更する箇所の
確認として捉えて下さい。

例のサンプルのように
色の濃い画像に乗せる文字には、下絵の画像と文字色が打ち消しあう作用は避けるべきことですね。

【画像1】
mozi002b.jpg

タイトルや説明文は「ブログ」の入口です。
訪問する方は、まず最初に「ブログタイトル」を見ますね。

●ブログのタイトルが読みにくい。
●説明文がゴチャゴチャとしている。

エントリ記事も読みにくいのでは?

訪問した方が、そのように感じたら、その時点で記事を読むことなく引き返します。

検索エンジンから、せっかく訪問した方に「ブログの性格を明確にする」ことからも
全体のレイアウトと同じように、ブログの顔である「タイトルとタイトル画像」のバランスも
「重要な課題」になります。

勿論、SEO対策に基づいた「ブログタイトル」にすることはとても重要です。

同じようなデザイン、同じようなレイアウトが溢れているアフィリエイト・ブログの中で
いかに「独自性」「個性」や「ブログの性格」を出していくかを、考えてみましょう。

商品を販売するブログですから
なおさらしっかりと組み立てられたブログにすることが重要ですね。




▲カスタマイズの関連記事 【別窓での表示です】
   holder01.gif ブログのカスタマイズ-目次ー
    http://tosiji-dreamafi.seesaa.net/article/115424617.html

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

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





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


2009年04月16日

タイトル背景画像の変更(4)

■ 4-8 画像差し替えの手順

前回の「画像解像度」で詳細を確認したように
テンプレートのタイトル背景画像の大きさは「800px×250px」サイズでしたね。

タイトル背景画を、好みの画像に差し替える手順を確認します。

差し替え用の画像のサンプルとして「1000px×500px」の写真を用意しました。

その写真をデザインソフト上で開いて表示します。
(画像ソフトの Adbe Phtoshop を使用しています)

turu001.JPG左サイドの「ツールボックス」から、赤線で囲んである「矩形選択ツール」をダブルクリックすると
「情報ツール」(画像1の下段・赤線で囲んだボックス)が開きます。

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

そのツールの
「選択ツールオプション」 ⇒ 「スタイル固定」

を選択して、切り取りサイズの 幅「800」高さ「250」と入力します。
単位は「px」になっていますね。

再度、左のツールボックスから「矩形選択ツール」(四角の点線枠)をクリックして、カーソルを写真画像の上でクリックすると「800px × 250px」の範囲が点線で囲まれます。

その点線で囲まれた範囲は移動できますので、点線の矩形を動かして切り取りたい箇所を決めます。

箇所を決めたら、デザインソフトの上段のメニューから
「イメージ」を選択して、その中の「切り取り」で差し替えに用いる「800 × 250」の画像が切り抜かれます。

別名で「ファイル保存」します。
上書き(保存)にすると、切り取り前の元画像に上書きされますので注意しましょう。

画像は「Jpeg形式」で保存します。
保存先は利用しやすいように「デスクトップ」がいいでしょう。

切り取った画像が、下の「画像2」です。

【画像2】
hana001.jpg
 ↑ 画像をクリック・元画像が開きます。


■差し替え用画像をCSSに組み込む。

ブログサービス(seesaaブログ)のテンプレート用画像は、ブログサービス専用の管理サーバーに保存されています。

テンプレートの利用者は
ブログサービスの管理サーバーを開いたりすることはできません。

差し替え用の画像は
ブログ記事に使用する、個人用の写真や画像を保存している「画像ファイル」から呼び出して使用します。

ブログのエントリー記事入力枠のすぐ下
「ファイルのアップロード」 ⇒ 「アップロードするファイルを追加」
で、デスクトップに置いてある「差し替え用の画像」をアップロードします。

アップロード後は、一覧にその画像の「サムネイル」が表示されますね。

カーソルを「記事の入力枠内」に置き、アップロードした画像の「サムネイル」をクリックすると、
画像のリンクURLが下記のように表示されます。

<A href="Http://tosiji-dreamafi.up.seesaa.net/image/hana001.jpg" target="_blank"><Img src="Http://tosiji-dreamafi.up.seesaa.net/Image/hana001-thumbnail2.jpg" width="350" height="109" border="0" align="" alt="hana001.jpg" /></a>

    注)
   ●ここで記入しているurlの「 <> A  Http 」などは
    実際の記入では全て英文小文字の「 <> a http 」で
    記入します。

   ●下方の青文字<Img src="・・-thumbnail2.jpg>は
    サムネイル画像のアドレスですので、赤文字のアドレス
    を使用します。


●上記の赤字で示している画像のurlをコピーして、メモ帳に保存しておきます。

■ 画像の差し替え

ブログのCSSを開きます。

ブログ作成ページの左上段のメニュー
「デザイン」 ⇒ 「デザイン設定」 ⇒ 下段「テンプレート名」 ⇒ 「CSS」
に入りますね。

CSSには、数多くのセレクタが書き込まれています。

ブログのタイトル用下絵が定義されているセレクタが、何箇所あるのか、目で追って探し出すのは面倒な作業ですので「検索」機能を使います。

キーボードの
「Ctrl」+「F」キーを押すと、CSSの表示欄の上部に検索窓が表示されますね。

その窓に、画像のファイル名の一部「snow/header.jpg」をキーワードとして検索します。

該当するセレクタは  <#container>  <#banner>  の2箇所ですね。

#container{
margin:0px auto 0px auto;
width:800px;
background-image:url(Http://blog.seesaa.jp/img/bg/snow/header.jpg);
background-repeat:no-repeat;
color:#666666;
}
 ・
#banner{
font-family:Verdana;
margin:0px;
text-align:left;
background-image:url(Http://blog.seesaa.jp/img/bg/snow/header.jpg);
background-repeat:no-repeat;
padding-left:100px;
height:230px;
}


CSSを書き換える前に
もしものための対策として、CSSをコピーして保存しておきます。

CSSを初期値に戻すことはできますが
以前に書き換えていた箇所は、消えてなくなりますので細心の注意が必要です。

青文字で書かれた
(Http://blog.seesaa.jp/img/bg/snow/header.jpg);
を削除して

変わりに
先ほどメモ帳にコピーしておいた url(下記)を同じ場所に貼り込み(ペースト)ます。

(Http://tosiji-dreamafi.up.seesaa.net/image/hana001.jpg");

カッコ「( )」と「;」は抜けていないかのチェックを忘れないでください。

セレクタの<#banner>にも、同じ画像のurl(青文字)が定義されていますので差し替えます。

ほかのプロパティはそのまま残して、修正したCSSを「保存」して
ブログを確認します。

【画像3】
css-che001.JPG
 ↑ 画像をクリック・元画像が開きます。

画像が差し替えられていますね。

ブログタイトルの下絵として適切かどうか、
明度などを確認して、色合いなどが気に入らなければ、元画を修正する必要があります。

最初の切り取り画像を「画像専用ソフト」で色合いや明度を調整して、再び同じ手順で差し替えます。

●ブログタイトルの文字の位置
●説明文の大きさやレイアウト
●文字色

などを見やすいように変更して差し替えは終了です。

テンプレートに写真画像を用いた例を確認しましたが
画像を使用しないで、バック色だけ、あるいは色無しの文字だけのブログにすることも出来ます。



次回は、タイトル文字の修正、確認です。



▲カスタマイズの関連記事 【別窓での表示です】
   holder01.gif ブログのカスタマイズ-目次ー
    http://tosiji-dreamafi.seesaa.net/article/115424617.html

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

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



2009年04月15日

タイトル背景画像の変更(3)

■ 4-7 画像解像度の確認

「ある人気商材」を使ってアフィリエイトを展開しているブログが多く見られます。

基本となっっているノウハウが同じのため、ほとんどのブログが同じように表示されて、ブログの展開の仕方も同じで、記事や情報の内容も同じようになっています。

商材を否定している訳ではありません。

寄り道することなく、早く利益を追求する、知名度を高めることには「再現性と実績に基づいた商材のステップアップの展開」が早道でしょう。


読んでもらえるブログにするには、記事の内容がもっとも重要ですが、
たどり着いた訪問者を「最初に印象付ける」のは「ブログ構成」だと思っています。

●ブログの構成
●ブログの文章
●ブログ作成の基礎

それらの総合力が「ブログの差別化」だと言えます。


● 画像の解像度を確認します。

ブログ(テンプレート)を変更するとき

@テンプレートのフレームはそのままで、画像だけを変更する
Aフレームサイズも全て変更する。

の、どの作業をするか明確にしておく必要があります。

@では
自作したデザイン画像や好みの写真を、背景画像として差し替えるだけですので
画像解像度を調べ、アップロードする画像をCSSで定義しているサイズと合わすだけの作業です。

Aでは
フレームのサイズを全て変更するので、新しく設定する基本的な設計が必要です。
さらに、その設定に基づいた画像

●ブログの設定幅の下地用画像
●タイトル用画像
●サイドバー用画像
●記事タイトル・日付用画像

などを準備することと、CSSセレクタの各役割の判別が必要になってきます。

このような大掛かりな作業をすることは
初めからホームページを作る概念ですので、テンプレートに固執することは無いですね。

ブログサービスのテンプレートの利点は
その中に組み込まれているHTML、記事HTML、CSSなどの仕組みを全て使えることです。


CSS定義のタイトル背景画像「画像解像度」の確認。




前回は、ブログの画像(テンプレート)の仕組みを確認ました。

●タイトルの下地に使用している画像サイズを調べる。

【CSS】
#container{
margin:0px auto 0px auto;
width:800px;
background-image:url
(Http://blog.seesaa.jp/img/bg/snow/header.jpg);
background-repeat:no-repeat;
color:#666666;
}


ブログ記事に画像を使用するとき、記事内に表示する画像の左右サイズを指定しますね。

元画像が大きければ、記事サイズに合わせて左右サイズを指定し、縮小した大きさで使用します。

テンプレートの表示サイズを確認することのひとつは
表示している画像の状況、縮小表示なのかを判別する作業です。

seesaaブログでの
管理サーバーに保存している画像を確認する方法として

上記のCSSの画像読み出しのURL(赤文字)
(Http://blog.seesaa.jp/img/bg/snow/header.jpg);

を、プラウザのIEやFirefoxのURL入力窓に、コピー・ペーストして画像を開きます。

 【注意】→ Http:// は http:// の小文字に書き換えて使用。
 
呼び出したのが「画像1」です。

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

このブログの、タイトルの背景に使用されている画像ですね。

この画像を一旦、仮のファイルネームでPCに保存します。

保存方法は
画像にマウスを乗せて、右クリックで「名前をつけて画像を保存する」でデスクトップに保存しておきます。

画像デザインソフト(アプリケーション)を立ち上げ、デスクトップに置いた、読み込んだ画像を開きます。
 
この例のデザインソフトは「Adobe Photoshop」を使用しています。

専用ソフトが手元に無い方は
高機能の画像編集を備えたフリーソフトが手に入りますので、vector を確認して取得しましょう。

メニューから、「イメージ」を開き、その中の「画像解像度」をクリックすると、
「画像解像度:ピクセル寸法」のウィンドウが開き、幅(左右)・高さ(縦)のサイズが表示されます。

この「画像解像度」がテンプレートとして保存されている画像のサイズです。

【画像2】
kaizou001.JPG
 ↑ 画像をクリック・元画像が開きます。

「幅=800px 高さ=250px」 と表示されています。単位は「px」になっていますね。

同じように、差し替えに使用する画像の解像度も調べます。

用意した画像が、仮に幅 =1000px、高さ =500px でしたら

差替えて使用する画像の幅のサイズを「800px」にする必要がありますので、
「画像解像度:ピクセル寸法」のウィンドウに表記している「1000」を「800」に書き換えます。

幅のサイズを入力すると、高さのサイズは連結していますので相対的に「px」数が変わります。

用意した画像の幅 =800px、高さ =400px になりますね。

高さ(縦)のサイズはすごく大きなサイズでなければ「なりゆき」でも構いませんが
テンプレートのサイズ通りの「250px」が無難ですので、トリミングでサイズを合わして使用するのが理想的です。

   ⇒ 画像のトリミング(切り抜き)の方法は、次回に確認します。

用意した画像のサイズがテンプレートの表示サイズより小さければ
サイズを大きくする必要があります。

画像を構成している画素(px)は、拡大したら「ぼけ」ますので、出来るだけ別の大きいサイズの画像を使用した方がいいです。


次回は、
画像を差し替える手順を確認します。



▲カスタマイズの関連記事 【別窓での表示です】
   holder01.gif ブログのカスタマイズ-目次ー
    http://tosiji-dreamafi.seesaa.net/article/115424617.html

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

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




2009年04月11日

タイトル背景画像の変更(2)

■ 4-6 背景画像の確認


背景画像の変更に進む前に
ブログがどのような形で画像を使用して表示しているかを確認します。

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

「画像1」は利爺のブログの表示画面です。

提供されているテンプレートには、

 @ブログ全体の下絵として横幅が1024pxの画像。
 Aブログ横幅サイズ「800px」のタイトル表示域の画像(上絵)
 Bサイドバー用の画像
 C記事表示枠の上部、日付用画像
 Dその他

などの設定があり、各画像はデザインソフトの
レイヤーと同じ様な仕組みで組み合わされています。

今回は

@プラウザ表示(1024px)内の下絵に使っている画像の仕組み。
Aブログ表示サイズ内の画像の形態。

を確認します。

    注)
   ●CSSを書き換える前に
    全コピーをメモ帳か専用ソフトで保存しましょう。
   ●CSSが元に戻せなくなった時には必要です。
   ●CSSの書き換えは、あくまでも自己の責任です。

●下画像(プラウザ表示)を取り去って薄い青色に変更してみる。

body {
font-family:Verdana;
background-image:url
(Http://blog.seesaa.jp/img/bg/snow/bg.jpg);

margin:0px;
padding:0px;
text-align:center;


●赤字で記入しているプロパティを
新しく「青字」のように書き換える。

   ↓↓
  
body {
font-family:Verdana;
background-color:#87ceeb;
margin:0px;
padding:0px;
text-align:center;


●ほかのプロパティはそのままにしておきます。



【画像2】
henkou001.JPG
 ↑ 画像をクリック・元画像が開きます。

テンプレートの下絵画像を使用しないで、
表示幅いっぱいに「薄い青色」で塗りつぶしたのが「画像2」です。

body {・・}
はこのブログの表示を司るセレクタです。

IDセレクタの<#container>と共に
ブログの幅や形状、使用する画像の範囲などを定義しています。

ブログのタイトルを表示している画像やサイドバー画像はそのまま残って
いますね。

この<body>要素の定義から見ても

テンプレートは一枚の画像から出来ているではなく

@ ブログ全体にはバック用の画像を敷きつめ
A タイトル表示域には、その領域に用いる画像
B 左右サイドにはバー型の項目用の画像

が用意されていることが分かります。

デザインソフトで用いる
レイヤーの組み合わせと同じ仕組みと見ていいでしょう。

●ブログの下地に用いる画像は、縦スクロールが基準になっています。

縦スクロール幅は、記事の量によって変化しますので、その量に対する上下の大きい画像を用いることには無理があり、変則的になりますので、一定の幅で製作された画像を、繰り返して表示することでスクロールに対応しています。

そのプロパティが下記のセレクタ<#container>で定義している
● background-repeat:no-repeat;
● background-repeat:repeat-repeat;
です。

<background-repeat:>プロパティの値
<no-repeat;>は一度だけの表示を
<repeat-repeat;>は繰り返しの表示を定義しています。

●タイトル画像の確認

タイトルに用いる画像は
セレクタ<#container>のプロパティ<background-image>の値で定義している画像のurlアドレス

background-image:url
(Http://blog.seesaa.jp/img/bg/snow/header.jpg);


がそれに当たります。

実際に当該画像なのかは、プラウザのアドレスバーに、
Http://blog.seesaa.jp/img/bg/snow/header.jpg
画像urlを書き込んで、読み出して確認します。

【タイトル画像】
header001.jpg
 ↑ 画像をクリック・元画像が開きます。

タイトル表示領域に使用されている画像ですね。

薄い青色のバックはそのままにして、
画像urlを削除します。

body { ・・ }

#container{
margin:0px auto 0px auto;
width:800px;

background-image:url
(Http://blog.seesaa.jp/img/bg/snow/header.jpg);

background-repeat:no-repeat;


color:#666666;
}
 ・
#banner{
font-family:Verdana;
margin:0px;
text-align:left;

background-image:url
(Http://blog.seesaa.jp/img/bg/snow/header.jpg);

background-repeat:no-repeat;


padding-left:100px;
height:230px;
}

赤字のプロパティを削除します。



同じ画像が、セレクタの
<#container>と<#banner>
の2カ所で使用されています。

両方の画像用プロパティを削除します。
【画像3】
henkou002.JPG
 ↑ 画像をクリック・元画像が開きます。

画像は表示されなくなりましたね。

そのプロパティが
自分で撮影した写真やイラストなど好みのバックに変更するときに書き換える部分です。

書き換え方法は、画像のアップロードや表示幅など
少し込み入っていますので後述します。

バックの青色も取り去ったらどうなるか確認してみましょう。

body {
font-family:Verdana;
background-color:#87ceeb;
margin:0px;
padding:0px;
text-align:center;


●画像2で修正した青色のプロパティを削除する。 



【画像4】
henkou003.JPG
 ↑ 画像をクリック・元画像が開きます。


サイドバー用画像、記事上段の日付表示用画像は残していますが

完全に「白」背景です。
何も無いのも、スッキリしていいですね。

バックが白になっても
ブログのフレームは、定義された3カラムになっていますね。

ブログに使用する画像とカラムの設定は連結していますので、
シリーズの後半で確認します。

CSSを書き換えることで
ブログ幅を広げたり、自分の好きな写真やイラストを使ったり、文字を大きくしたりなどと、個性溢れるブログが作成できます。

書き換えは、
基本的には「アクセスアップ」を前提として行います。

誤解のないようにしましょう。



▲カスタマイズの関連記事 【別窓での表示です】
   holder01.gif ブログのカスタマイズ-目次ー
    http://tosiji-dreamafi.seesaa.net/article/115424617.html

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

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




2009年04月09日

タイトル背景画像の変更(1)

■ 4-5 ブログタイトルの背景画像の差替え

ブログサービスには、各種のテンプレートが用意されていますね。

テンプレートとは
ブログの表示するデザイン(画像、イラスト)と一緒に、HTMLとCSSをまとめた仕様で、この3点がセットになっています。

ひとつ一つのテンプレートには、
そのテンプレート専用のHTMLとCSSが一緒に組み込まれ、
タイトル部分、メニュー、記事の部分などをどのように表示するを定義しています。

ブログを作成するときに
基本的にはその中から気に入ったテンプレートを選び使用しています。

テンプレートは見た目、デザインを施した単なる画像に見えますが
そのテンプレートを使用したブログの「独自性」、訪問した方に対する「アイキャッチャー」の役目を果たすとともに、「アピールする力」が集約されたものです。

ブログの見栄えをよくして、読みやすくすることは

テンプレートのHTML、CSSを組み替えたり、修正、追加することによる
アクセスをアップさせることを一義的な目的としています。

ブログの「顔」を変更しつつ
HTMLやCSSを定義し直して、SEO対策を施し「アクセスアップをはかる」ことを目的としていると理解しましょう。

提供されているテンプレートは、
同じテンプレートを複数のブロガーが使用していることも理解しておきましょう。

最近は「SEO対策済みのテンプレートをプレゼントします」など
無料メルマガの購読率アップの素材にもよく使われていますね。


 
使用するテンプレートのCSS定義を確認します。

CSSを開きます。

 左上段のメニューから
「デザイン」⇒「デザイン設定」⇒「最下段のテンプレート名」 ⇒「CSS」

ですね。

body {
font-family:Verdana;
background-image:url
(Http://blog.seesaa.jp/img/bg/snow/bg.jpg);

margin:0px;
padding:0px;
text-align:center;
}
#container{
margin:0px auto 0px auto;
width:800px;
background-image:url
(Http://blog.seesaa.jp/img/bg/snow/header.jpg);

background-repeat:no-repeat;
color:#666666;
}
 赤字で書かれたCSSプロパティが、
 画像読み込み定義と、画像の保存場所です。

 青字の部分は「画像ファイル名」です。


この「利爺とゆったり…」のタイトルバックの画像は

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

を使用しています。

独自の画像(テンプレート)素材を使用するためにCSSを書き換えて変更してみました。

それが「画像2」です。

【画像2】
css-che001.JPG
 ↑ 画像をクリック・元画像が開きます。

仮の変更に使用した画像はデジカメで撮った写真です。

トリミングをして使用しています。

写真の色が濃く、ブログタイトルや説明の文が読みにくいので、
文字色も変更してあります。

次回の
「ブログのタイトル背景画像の変更(2)」で、その方法を詳しく確認します。



▲カスタマイズの関連記事 【別窓での表示です】
   holder01.gif ブログのカスタマイズ-目次ー
    http://tosiji-dreamafi.seesaa.net/article/115424617.html

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

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




2009年04月07日

ブログの表示幅の変更

■ 4-3 ブログの表示幅の調整(1)

PCのモニタは光の点が集まって構成されています。

その1つひとつの光のことを「ピクセル」や「ドット」と言っています。
光の集合した領域を800×600PX、1024×768pxと表し、数が多くなることを「解像度が高い」と言っています。

モニタの解像度が高いと画面の表示領域が大きくなり、プラウザのウィンドウサイズを広げられ、ウィンドウサイズが広がることは、一度に文字、画像など、たくさんの情報が表示できます。

表示幅の基準は、使用しているOSに準拠したモニタで決まってきます。


使用しているモニタ(ディスプレイ)の解像度を確認してみましょう。

PCの「マイ コンピュータ」 →「 コントロールパネル」 → 「画面」 →「設定」の順で進みます。

    注)
   ●各個人で使用しているOSの設定を確認して
    解像度の確認しましょう。


【画像】
dis001.jpg
 ↑ 画像をクリック・元画像が開きます。

画像解像度はどうなっていますか。

このサンプルでは、1024×768 と表示されています。
横1024px、縦768pxと言う意味ですね。

カーソルで、左右にボタンを動かしてみてください。
左に動かすと800×600など、右には1280×960などと解像度が変わります。

OSによる最高解像度がありますので、その解像度以上の設定は避けましょう。
PCがフリーズを起こして、起動しなくなるときがあります。


モニタの解像度には、その種類によって

●VGA(640×480px)
●SVGA(800×600px)
●XGA(1024×768px)
●QVGA(1080×960px)
●SXGA(1280×1024px)
⇒ 12〜13インチモニタ
⇒ 14〜15インチモニタ
⇒ 16〜17インチモニタ
⇒ 19〜21インチモニタ
⇒ 19〜21インチモニタ


などと、多種にわたっています。

現在では技術も進み、解像度の高い発色のきれいなモニタが出回っています。

ウェブサイトはデスクトップやラップトップなど、解像度の異なるモニタで見られていますので、
それぞれのPCで設定されている解像度は異なると、考えたほうがいいでしょう。

ブログは
どのPCから見ても、同じように表示できたらいいのですが、現実には

●各種のモニタがあり
●解像度も異なっている

ため、ブログ作成にはある一定の基準が必要になります。

一般的に設定されている解像度は「1024 × 768px」の方が大半を占めているようですので、
ブログの表示サイズは「1024 × 768px」解像度を目安にして決めたほうがいいでしょう。


このブログは、3カラム形式を使っています.

●モニタ解像度は「1024 × 768px」
●ブログ表示領域は左右「800px」
 記事をエントリする中央のフレームサイズは「400PX」
 左のサイドは「196px」
 右のサイドは「186px」

記事と左右サイドの領域を加算してみますと「計782px」
各フレームの間に「9px」の「空き」が作くられていますので、合計サイズが「800px」です。

各個人個人のブログの表示サイズを確認することも、カスタマイズにとって大切なことです。
サイズは「CSS」に定義されています。

top001.jpg
 ↑ 画像をクリック・元画像が開きます。

CSSを確認します。


#container{
margin:0px auto 0px auto;
width:800px; ←ブログの幅
background-image:url(http://…);
background-repeat:no-repeat;
color:#666666;
}
  ・
#content {
margin:0px 0px 0px 5px;
float:left;
width:400px; ←記事入力欄の幅
font-size:12px;
padding-bottom:10px;
}
   ・
#links-left {
font-weight:normal;
width:196px; ←左サイド幅
float:left;
margin: 20px 0px 0px 0px;
text-align:left;
}
#links {
font-weight:normal;
float:left;
width:186px; ←右サイド幅
margin: 20px 0px 0px 5px;
text-align:left;
}


になっていますね。

モニタの設定が1024pxですので、ブログ幅は現在の設定の800PXに
224pxも余裕があるということです。

しかし、

ブログ幅を1024pxにしてしまうと、

ラップトップ、ノートパソコンを使用しているユーザーには、
横スクロールバーが表示されるという結果になったり、サイドが下のほうへ追い出されるような結果になりますね。


★ブログ幅の設定は、初期画面の見え方が重要だといえます。

●スクロールしなくても見える範囲に、情報が全て収まるようになっているか。

とくに横スクロールには常に気をつけておかなければいけないでしょう。

自分の経験からも「横へのスクロール」は、無視することが多いです。
スクロールしなければ見えない記事は、読まなくてもいいと思っている方が多いでしょう。

ブログ幅の設定を変更するには、次のことが重要です。

●全体のレイアウトのバランスはどうなのか。
●読み易さはどうだろうか。
●見た目の美しさは。
●解像度でみて、各要素がキチットした正しいサイズで、正しい位置に表示されているか。
●各要素はきれいに端がそろい、写真のサイズの取り方、トリミングはバランスよく取れているか。

などです。

【注意】
大型のモニタを使用していても、ソフトやハードに準拠した、
グラフィックボードを取り付けていないと、解像度の変更は出来ません。



▲カスタマイズの関連記事 【別窓での表示です】
   holder01.gif ブログのカスタマイズ-目次ー
    http://tosiji-dreamafi.seesaa.net/article/115424617.html

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

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




×

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