これでは、自由なはずのスタイルシート（CSS）で、表現が限定されてしまうという不都合が生じることがあります。

このことについては、「スタイルシート（CSS）の設定方法」で説明しました。

そこで、今回は、この回避策を取り上げます。

例えば、ある段落の文字（テキスト）の色は青、それ以外の段落の文字（テキスト）の色は黒、といった指定をしたいときには、「idセレクタ」と「classセレクタ」を利用するのが有効です。

スタイルシート（CSS）のセレクタに、「id（アイディー）」と「class（クラス）」で識別指定すれば、個別の条件で、スタイルシート（CSS）を設定できます。

このように個別の条件を指定したスタイルシート（CSS）の記述の仕方は、個別の条件を指定したい「id」や「class」の名前の後に、スペースを空けて、タグを記述します。

「id」と「class」については、「スタイルシート（CSS)の2つの名前」を参考にしてください。

ここで、ひとつ例を挙げます。

この例は、コメントで質問をいただいた内容への回答です。

「記事のタイトルから個別記事ページへのリンクを張る」で説明した方法で、記事のタイトルから個別記事ページへのリンクを張ると、タイトルの文字の色が本文などで指定されているリンクと同じ色になってしまいます。これを回避するにはどうすればいいか？

まず、「記事のタイトルから個別記事ページへのリンクを張る」方法は、HTMLファイルに下記のように記述しました。

<h3 class="title"><a href="<$ArticlePermalink$>">
<$ArticleTitle ESCAPE$></a><IfArticleRating>
<$ArticleRatingIcon$></IfArticleRating></h3>

<$ArticlePermalink$>は、記事のURLを表しています。それをリンクを設定する<a>～</a>タグで、記事のタイトルを表す<$ArticleTitle ESCAPE$>と囲み、個別記事ページにジャンプするようにしています。

このままでは、記事のタイトルの文字の色は、他のリンクと同じ色になります。

なぜかというと、一度設定したスタイルシート（CSS）のタグは、設定したセレクタすべてに適用されてしまうからです。

<a>～</a>タグを指定しているスタイルシート（CSS）でどのように記述されているでしょうか？

補足ですが、<a>タグのことは「アンカー」タグといい、<a>～</a>挟まれた文字列をアンカーテキストと呼びます。

ライブドアブログのテンプレート「シーズン空02」を例にすると、スタイルシート（CSS）には、下記のような記述がされています。

a{color:#666666;text-decoration:underline;}
a:link{}
a:visited{}
a:active{}
a:hover{text-decoration:none;}

<a>タグの文字の色は、「color:#666666;」というように、「666666」という色が指定されています。

また、「シーズン空02」のスタイルシート（CSS）には、他にも下記のような記述もあります。

#banner a{color:#fff;text-decoration:none;}
#banner a:link{text-decoration:none;}
#banner a:visited{text-decoration:none;}
#banner a:hover{color:#fff;text-decoration:underline;}

これは、「banner」というid名の範囲の<a>タグの文字の色は、「color:#fff;」というように、「ffffff」という色が適応されるように指定しています。

これと同じようにすれば、記事のタイトルのリンクの色は変更できます。

記事のタイトルを表す<$ArticleTitle ESCAPE$>と記事のURLを表す<$ArticlePermalink$>の範囲は、<h3 class="title">というように、「title」というclass名が指定されていますので、下記のような記述を付け加えます。

.title a{color:#666666;text-decoration:underline;}
.title a:link{}
.title a:visited{}
.title a:active{}
.title a:hover{text-decoration:none;}

しかし、このままでは、記事のタイトルの文字の色は、他のリンクと同じ色のままなので、<a>タグの文字の色を指定している部分、「color:#666666;」の、「666666」という部分を指定したい色のコードに変更します。

文字の色の指定方法は、「ブログタイトルの文字の色を変更する」を参考にしてください。

また、下記の部分、

.title a:link{}
.title a:visited{}
.title a:active{}

ここの部分（疑似クラス）には、中身がないので、付け加えは必要ありませんが、わかり易いように記述しておきました。

また、「text-decoration:underline;」は、アンダーライン（下線）を表示するという指定なので、必要がない場合には、「text-decoration:none;」に変更してください。

疑似クラスセレクタについては、下記のサイトが参考になります。
TAG<index>
http://www.tagindex.com/stylesheet/link/link_color.html

ライブドアブログのカスタマイズ - livedoor Blog 共通テーマ

この方法のことを「リンキングスタイルシート」とか、スタイルシート（CSS）の「外部リンク方式」などと呼びます。

スタイルシート（CSS）の設定方法には、この他に「インラインスタイルシート」や「ドキュメントスタイルシート」という設定の方法もあります。

しかし、特にブログでスタイルシート（CSS）を設定する場合は、「インラインスタイルシート」や「ドキュメントスタイルシート」は、あまり使用することはないと思いますので、ここでは詳しく取り上げません。

ライブドアブログのファイルは、スタイルシート（CSS）の他、トップページ、個別記事ページ、カテゴリーアーカイブ、月別アーカイブというHTMLファイルが4つあり、合計5つのファイルがあります。

スタイルシート（CSS）ファイルで設定した、ブログの見栄え部分、例えば、文字（テキスト）の大きさや色、ブログの細かいレイアウトや背景色などは、それぞれのHTMLファイルからスタイルシート（CSS）ファイルにリンクさせて表現させています。

ライブドアブログのスタイルシート（CSS）ファイルをHTMLファイルからリンクさせるための記述は、トップページ、個別記事ページ、カテゴリーアーカイブ、月別アーカイブというHTMLファイルそれぞれに、下記のように記述されています。

<link rel="stylesheet" href="<$CSSUrl$>" type="text/css" />

<$CSSUrl$>は、ライブドアブログの独自タグで、スタイルシート（CSS）ファイルのURLを表したものです。

この方法の利点は、ブログの見栄え部分はすべてスタイルシート（CSS）ファイルで行っているので、見栄え部分を変更したいとき、スタイルシート（CSS）ファイルの記述を変更すれば、すべてのHTMLファイルに適用できることです。

ライブドアブログでは、トップページ、個別記事ページ、カテゴリーアーカイブ、月別アーカイブという4つのHTMLファイルすべてが一括で適用されます。

しかし、一度設定したスタイルシート（CSS）のタグは、設定したセレクタすべてに適用されてしまいます。

これでは、自由なはずのスタイルシート（CSS）で、表現が限定されてしまうという不都合が生じることがあります。

そこで便利なのは、任意の範囲にスタイルシート（CSS）を設定する方法です。

次回は、この「任意の範囲にスタイルシート（CSS）を設定する方法」について記事を書いてみたいと思います。

ライブドアブログのカスタマイズ - livedoor Blog 共通テーマ

この画像は、ライブドアブログのテンプレート、シーズンの中の「空02」というテンプレートです。

シーズンの中の「空02」の初期設定のページの背景色は、下の画像にように「白」になっています。

このテンプレートのページの背景色を変更していきます。

ライブドアブログのテンプレートには、ページの背景色に画像が使われているものもあります。

また、背景に対して、ブログの本体がパソコンの画面の中央に表示されるテンプレートが多いと思いますが、カスタマイズすることにより、左側に表示したり、もしくは、本体をパソコンの画面全体に表示したりすることも可能です。

ライブドアブログのページの背景色を表すスタイルシート（CSS）は、「body」の部分に記述されています。
＊ライブドアブログに限らず、他のブログや一般的なホームページでも、ページ全体を表すスタイルシート（CSS）は、「body」の部分に記述します。

＊【スタイルシート（CSS）】ファイルまでのアクセス方法は「カスタマイズ応用編では」を参考にしてください。

body{margin:0;
padding:0;
font-family:arial ,sanzs-serif;
word-break:break-all;
text-align:center;
color:#666666;
background:#fff;}

上記、スタイルシート（CSS）の中に、「background:#fff;」

という箇所が確認できると思います。

実はこの「background」は、スタイルシート（CSS）の簡略版です。

本来この部分は、「background-color:」という形で記述するもので、「background-color:」は、背景の色を指定するプロパティです。

ここでは、詳しくは触れませんが、スタイルシート（CSS）の記述方法は、1つだけというわけではない、ということだけ覚えておいてください。

ですので、「background:#fff;」は、「background-color:#fff;」と同じことを指定しているわけですので、どちらで記述してもO.Kです。

話を戻して、この「background:#fff;」の部分がページの背景色を示しています。
ページの背景色に画像が使われている場合は、ここに、下記のようにURLが記述されています。

background:url(http://parts.blog.livedoor.jp/img/usr/liquid_plant/
bg00.gif) repeat-x 0 30px;

また、背景色と背景画像が一緒に指定されているテンプレートの場合は、下記のように記述されています。

background:#E9E9E9 url(http://parts.blog.livedoor.jp/img/usr/
liquid_plant/bg00.gif) repeat-x 0 30px;

画像を表示させず、背景色に変更するときは、画像を表示させているこのURLの部分を削除するか、もしくは、この部分を「/*」と「*/」で囲んでしまい、画像を表示させなくする方法もあります。
詳しくは、「ヘッダーの背景色を変更する」を参考にしてください。

ページの背景色を変更する場合は、「background」もしくは「background-color」の部分の色の指定を変更します。
＊色の指定方法は、「ブログタイトルの文字の色を変更する」を参考にしてください。

ページの背景色の変更が終わったら、管理画面の下の方にある、【この内容で保存する】をクリックし、その後、ブログを再構築してください。

再構築は、【スタルシート（CSS）】だけでもＯＫです。

再構築が終わったら、あなたのブログを実際に見て、確認してください。

「記事のタイトルに画像を使った見出しをつけているテンプレートの画像を枠線に変更する」とは、ちょっとわかりにくいと思いますが、「記事のタイトルに画像を使った見出しをつけているテンプレート」とは、例えば下の画像のようなものです。

この画像は、ライブドアブログのテンプレート、シーズンの中の「雨模様」というテンプレートです。

上の画像では、記事のタイトル「はじめに」の左に、「カタツムリ」の画像が置かれています。

この「カタツムリ」の画像を枠線に変更してみます。

ライブドアブログのテンプレートには、このように記事のタイトルを装飾するために見出し画像が使われているものがあります。
すべてのテンプレートが記事のタイトルに見出し画像を使っているわけではありませんが、画像を使っていないテンプレートに画像を使いたい場合は、「記事のタイトルに画像を使った見出しをつける」を参考にしてください。

また、ライブドアブログのテンプレートの中には、記事のタイトルではなく、日付に見出し画像を使っているものもありますので、その場合は、日付の画像の部分のスタイルシート（CSS）に置き換えてください。

記事のタイトルのスタイルシート（CSS）は、「.title」の部分に記述されています。
＊テンプレートによっては、記事のタイトルのスタイルシート（CSS）が「.title」ではない場合があるかもしれませんが、多くのライブドアブログのテンプレートで、記事タイトルのスタイルシート（CSS）は、「.title」の部分に記述されていると思われます。

この部分のスタイルシート（CSS）は、下記のようになっています。
＊【スタイルシート（CSS）】ファイルまでのアクセス方法は「カスタマイズ応用編では」を参考にしてください。

.title{
 color:#15A8A8;
 font-size:x-small;
 font-weight:bold;
 background: url(http://image.blog.livedoor.com/img/usr/rain/snail.gif) 
 no-repeat scroll 0 0;
 padding:5px 0 5px 35px;
}

上記、スタイルシート（CSS）の中に、

background: url(http://image.blog.livedoor.com/img/usr/rain/snail.gif) 
no-repeat scroll 0 0;

という箇所が確認できると思います。

ここのurl「http://image.blog.livedoor.com/img/usr/rain/snail.gif」の部分が「カタツムリ」の画像が置かれている場所を示しています。
＊上のURLをクリックすると、「カタツムリ」の画像が表示されます。

「記事のタイトルに画像を使った見出しをつけているテンプレートの画像を枠線に変更する」には、「カタツムリ」の画像を指定しているスタイルシート（CSS）を削除して、かわりに枠線を指定するスタイルシート（CSS）を追記します。

この画像を指定しているスタイルシート（CSS）を削除しても、また元に戻したくなるかもしれないので、この場合、スタイルシート（CSS)のバックアップを必ずとっておくようにしましょう。

また、バックアップは必ずとることをお勧めしますが、今回のようにスタイルシート（CSS)を削除するような場合は、いきなり削除するのではなく、該当箇所をWebブラウザーの表示に一切影響しなくする方法で、ブログデザインの変更を確認することもできます。

この方法は、今回の場合では、

background: url(http://image.blog.livedoor.com/img/usr/rain/snail.gif) 
no-repeat scroll 0 0;

の部分を「/*」と「*/」で囲んでしまう方法です。

こんな感じになります。

/*background: url(http://image.blog.livedoor.com/img/usr/rain/snail.gif) 
no-repeat scroll 0 0;*/

「/*」と「*/」で囲んだ範囲は、スタイルシート（CSS)の表示指定を無効にします。
そのため、あなたのブログを表示するWebブラウザー（インターネットエクスプローラやFirefoxなど）は、「/*」と「*/」で囲んだ範囲は無いものだと理解するので、背景画像が表示されなくなります。

他にも、「/*」と「*/」で囲んだ範囲を、コメントを書き込むために利用することもできます。詳しくは、「ヘッダーの背景色を変更する」を参考にしてください。

枠線を指定するスタイルシート（CSS）の指定方法は、「記事のタイトルの見出しに枠線をつける」と同じになりますので詳しくはそちらを参考にしてください。

今回も記事のタイトルの左側に青色の枠線を表示させてみます。

変更したスタイルシート（CSS）は下記のようになります。

.title{
 color:#15A8A8;
 font-size:x-small;
 font-weight:bold;
 /*background: url(http://image.blog.livedoor.com/img/usr/rain/snail.gif)
 no-repeat scroll 0 0;*/
 padding:5px 0 5px 35px;
 border-left:10px solid #486D94;
}

赤字の部分が追加した部分です。
＊赤字の部分の詳細説明は「記事のタイトルの見出しに枠線をつける」を参考にしてください。

ブログを再構築して確認してみます。

上の画像には、記事のタイトルの左側に青色の枠線が表示されていますが、青色の枠線と記事のタイトルとの間が少し開きすぎていますよね？

これは、スタイルシート（CSS）の「padding:5px 0 5px 35px;」の部分が原因です。

これは、もとにあった記事のタイトルの見出しの「カタツムリ」の画像とタイトルの文字が重なって表示されないように指定している箇所です。「.title」というブロック要素の左上を基点として、Webブラウザで見たときに、上から5px（ピクセル）、右から0px、下から5px、左から20pxにタイトルの文字を詰めて表示するということを指定しています。

「padding」についての詳しい説明は、下記のサイトが参考になると思います。
TAG<index>
http://www.tagindex.com/stylesheet/box/padding.html

左から20pxにタイトルの文字を詰めて表示させているので、青色の枠線と記事のタイトルとの間が開きすぎているのです。

今回のような場合は、上・右・下の詰めは必要ないので、左側のみ指定することにします。
しかし、もとの画像に簡単に戻せるように、「padding」の指定は下記のようにしてみました。

.title{
 color:#15A8A8;
 font-size:x-small;
 font-weight:bold;
 /*background: url(http://image.blog.livedoor.com/img/usr/rain/snail.gif) 
 no-repeat scroll 0 0;
 padding:5px 0 5px 35px;*/
 border-left:10px solid #486D94;
 padding-left:5px;
}

「padding:5px 0 5px 35px;」までを「/*」と「*/」で囲んでしまい、新たに「padding-left:5px;」を追加しました。

「padding-left:」は、左側の詰めを指定するものです。ここでは、5pxと指定しました。

ブログを再構築して確認してみると、

青色の枠線と記事のタイトルとの間がいい感じになったのではないでしょうか？

記事のタイトルの見出しに枠線をつけるとは、例えば下の画像のようなことです。

上の画像の記事のタイトル「はじめに」の前に青の枠線がついているのがわかると思います。

ちなみに、この「ライブドアブログの覚書」でも、記事のタイトルの見出しに枠線をつけて装飾しています。

上の画像は、ライブドアブログテンプレート、シーズンの中の「空02」というテンプレートを使ったものです。

記事のタイトルの見出し枠線をつける前が、下の画像です。

記事のタイトル「はじめに」の前には青い枠線はありません。

ライブドアブログテンプレートには、このテンプレートのように記事のタイトルの前に何もついていないものと、画像が使われているものとがあります。
＊「記事のタイトルに画像を使った見出しをつける」を参考にしてくだい。

記事のタイトルの前にアクセントをつけたいと思っている方は参考にしてください。
画像を使うよりも簡単にアクセントをつけることができます。

それではまず、記事のタイトルを指定するスタイルシート（CSS）を探します。

記事のタイトルを指定するスタイルシート（CSS）は、「.title」の部分に記述されています。
＊テンプレートによっては、記事のタイトルのスタイルシート（CSS）が「.title」ではない場合があるかもしれませんが、多くのライブドアブログのテンプレートで、記事タイトルのスタイルシート（CSS）は、「.title」の部分に記述されていると思われます。

ライブドアブログテンプレート、シーズンの「空02」のスタイルシート（CSS）では、下記のようになっています。
＊【スタイルシート（CSS）】ファイルまでのアクセス方法は「カスタマイズ応用編では」を参考にしてください。

.title{
 margin-left:20px;
 color:#666666;
 font-size:14px;
 font-weight:bold;
}

このスタイルシート（CSS）に、タイトルの左側に見出し枠線をつける記述を追加すると下のようになります。
赤字の部分が追加した部分です。

.title{
 margin-left:20px;
 color:#666666;
 font-size:14px;
 font-weight:bold;
 border-left:10px solid #486D94;
 padding-left:5px;
}

「border」は、枠線の種類や色、太さを指定するスタイルシート（CSS）です。
「border-left」は、枠線を左側につけるという意味です。
その隣の「10px」は、枠線の太さを指定しているので、細くしたければ、数字を小さくすれば細くなります。逆に、太くしたければ数字を大きくすれば、太くなります。
「solid」は、1本の実線を表します。
「#486D94;」は、枠線の色を指定しています。

なお、枠線の相対的な大きさは、「font-size」で指定してある数値になります。
この部分は、記事のタイトルのスタイルシート（CSS）ですので、記事のタイトルの文字が「font-size:14px;」と指定されているので、枠線もその数値に準じたものになっています。
個別に指定したい場合は、「border-left-width」という記述が使えます。

＊「border」についての詳しい説明は、下記のサイトが参考になると思います。
TAG<index>
borderの種類について　http://www.tagindex.com/stylesheet/box/border_style.html
borderの太さについて　http://www.tagindex.com/stylesheet/box/border_width.html

次回は、記事のタイトルに画像を使った見出しをつけているテンプレートの、画像を枠線に変更する 場合について、取り上げたいと思います。

記事のタイトルの見出し画像とは、例えば下の画像のようなことです。

この画像は、ライブドアブログのテンプレート、シーズンの中の「雨模様」というテンプレートです。

上の画像では、記事のタイトル「はじめに」の左に、「カタツムリ」の画像が置かれています。

ライブドアブログのテンプレートには、このように記事のタイトルを装飾するために見出し画像が使われているものがあります。
すべてのテンプレートが記事のタイトルに見出し画像を使っているわけではありませんが、画像を使っていないテンプレートに画像を使いたい場合は、これから説明するスタイルシート（CSS）を追加・変更することで、画像が表示されるようになります。

また、ライブドアブログのテンプレートの中には、記事のタイトルではなく、日付に見出し画像を使っているものもありますので、その場合は、日付の画像の部分のスタイルシート（CSS）を変更すれば、画像を変更することができます。

記事のタイトルのスタイルシート（CSS）は、「.title」の部分に記述されています。
＊テンプレートによっては、記事のタイトルのスタイルシート（CSS）が「.title」ではない場合があるかもしれませんが、多くのライブドアブログのテンプレートで、記事タイトルのスタイルシート（CSS）は、「.title」の部分に記述されていると思われます。

この部分のスタイルシート（CSS）は、下記のようになっています。
＊【スタイルシート（CSS）】ファイルまでのアクセス方法は「カスタマイズ応用編では」を参考にしてください。

.title{
 color:#15A8A8;
 font-size:x-small;
 font-weight:bold;
 background: url(http://image.blog.livedoor.com/img/usr/rain/snail.gif) 
 no-repeat scroll 0 0;
 padding:5px 0 5px 35px;
}

上記、スタイルシート（CSS）の中に、

background: url(http://image.blog.livedoor.com/img/usr/rain/snail.gif) 
no-repeat scroll 0 0;

という箇所が確認できると思います。

ここのurl「http://image.blog.livedoor.com/img/usr/rain/snail.gif」の部分が「カタツムリ」の画像が置かれている場所を示しています。
＊上のURLをクリックすると、「カタツムリ」の画像が表示されます。

このURLが本当に記事のタイトルの装飾画像がどうか調べるには、このURLをWebブラウザーに貼り付ければ確認できます。

やり方は、「ヘッダーの背景画像を変更する」を参考にしてください。

記事のタイトルの画像を変更するには、まずは変更する画像を用意し、その画像をアップロードして、アップロードしたURLを上記のURLと置き換えればO.Kです。

＊画像のアップロード方法は、「画像のアップロード方法」を参考にしてください。

その際、URL以外のスタイルシート（CSS）は変更しないようにしましょう。
ただし、実際に画像を変更後、Webブラウザーで確認してみて、画像とタイトルの表示位置がおかしかったら、「padding」を調整する必要があります。

上記のスタイルシート（CSS）では、

padding:5px 0 5px 35px;

このようになっています。

これは、記事のタイトルの見出し画像とタイトルの文字が重なって表示されないように指定している箇所です。「.title」というブロック要素の左上を基点として、Webブラウザで見たときに、上から5px（ピクセル）、右から0px、下から5px、左から20pxにタイトルの文字を詰めて表示するということを指定しています。

上記のように、上右下左の4つを指定していない場合もありますが、そのときはその記述をもとに、画像表示を確認しながら試してみてください。

「padding」についての詳しい説明は、下記のサイトが参考になると思います。
TAG<index>
http://www.tagindex.com/stylesheet/box/padding.html

画像を自分で作るのは結構面倒なので、そんな場合は、インターネット上で配布されている「アイコン」画像を利用しましょう。

画像を無料で配布しているサイトはたくさんあるので、調べてみるだけでも楽しいですよ。

ここでは、いくつか画像を無料で配布しているサイトを紹介しますが、Webブラウザーの検索窓に「フリー素材」とか「アイコン 無料」などで、検索するとたくさんのサイトがヒットしますので、いろいろ試してください。

無料で画像を配布しているサイト
＊画像を利用する際には、それぞれのサイトの利用規約を守って利用してください。

0円のWEB素材屋さん
http://www.image-seed.com/

素材王国
http://www.sozaioukoku.com/

Little Cherry Stone
http://www.eonet.ne.jp/~lcs/

これを確認・設定変更するのは、ライブドアブログの管理画面の「管理トップページ」から「カスタマイズ管理」→「投稿の設定」で行えます。

ここでは、「シンプルエディタ」で記事を投稿する方法を説明していきます。

現在、記事の投稿形式が、「シンプルエディタ」になっているか、「WYSIWYGエディタ」になっているかが分からない方は、下記のような方法で確認してみてください。

まずは、管理トップページから、赤枠の「カスタマイズ管理」をクリックします。

「カスタマイズ管理」画面で、赤枠の「投稿の設定」をクリックします。

「投稿の設定」画面に切り替わります。

上記画面の赤枠の場所の「投稿フォームの形式」で設定を確認・変更できます。

初期設定では、「シンプルエディタ」にチェックが入っていると思います。「シンプルエディタ」にチェックが入ってない場合は、チェックを入れて、上の画像下部の「設定を保存する」をクリックします。

ここでは、「再構築」は必要ありません。

下の画像は、「シンプルエディタ」の記事投稿画面です。画像の赤枠の部分（投稿フォームのボタン）を操作することで、文章の装飾などの設定が行えますが、「WYSIWYGエディタ」に比べると、投稿フォームのボタンも少なく、シンプルになっています。

「シンプルエディタ」と「WYSIWYGエディタ」、どちらの方が記事を投稿し易いかというと、結論から言ってしまえば、一般的には「WYSIWYGエディタ」で記事を投稿する方がやり易いと思います。

しかし、「WYSIWYGエディタ」では、HTMLタグを直接打ち込むことはできないため、HTMLタグを直接打ち込むときは、「シンプルエディタ」を使う必要があります。

また、「シンプルエディタ」で記事を投稿するときには、設定で注意しなければならないことがあります。

下記の画像の赤枠の箇所を見てください。

「投稿フォームの設定」に、「改行をそのまま反映」と「改行しても反映しない」という箇所があると思います。

「改行をそのまま反映」では、記事を入力して、改行すると<br>タグが、自動で記述されます。

<br>タグは、「改行」させるために使われるHTMLタグです。

投稿画面上では、確認できませんが、実際に記事を投稿してみると、改行されていることが確認できると思います。

「改行しても反映しない」では、記事を改行させて、記事を投稿しても、実際には改行せずに、そのまま文章が続けて表示されてしまいます。

下の画像は、「シンプルエディタ」の記事投稿画面に記事を入力したところです。
「改行をそのまま反映」に設定しています。

下は、投稿した記事を実際に見たところの画像です。

ページのソースをWebブラウザ「Firefox」の「ページのソース」で確認したものが下の画像です。

改行箇所には、<br>タグが記述されているのがわかると思います。

それに対して、「改行しても反映しない」に設定して記事を入力したものが下の画像です。
「改行をそのまま反映」と、記事投稿画面上では違いはありません。

下の画像は、実際に投稿した記事を見た画像です。

投稿画面では、改行したはずなのに、実際の表示では改行されずに表示されています。

Webブラウザ「Firefox」の「ページのソース」で確認したものが下の画像です。

ソース上では、改行されているように見えるかもしれませんが、記事の途中に<br>タグが記述されていないため、実際の表示では改行されずに表示されているのです。

記事を投稿したら、自分の思い通りに記事が投稿されているか、確認することが必要だと思います。

一般的に普及しているワープロソフトや表計算ソフトなどを使う場合にも、文字の形を使い分けることがあると思いますが、ゴシック体、明朝体などの名前を聞いたことがある方も多いでしょう。

代表的なフォントには、「MSゴシック」「MS明朝」などがあります。

フォントは文章の種類によって使い分けることで、文書の表現力を向上させることができます。

また、すべての文字を同じ幅で表示するフォントを「等幅（とうはば）フォント」、文字ごとに最適な幅が設定されたフォントを「プロポーショナルフォント」と呼びます。

しかし、フォントを活用するとき、注意しなければならないことがあります。

あなたのパソコンで特定のフォントを指定して文書を作成した場合、その作成した文書を見る側の人のパソコンにもあなたが指定したフォントがインストールされていなければ、同じフォントで文書は表示されません。

例えば、あなたがブログやホームページを作るときに、特定のフォントを使用したとしましょう。

あなたは、かっこいい書体で文章を表示したいと思い、かなりこだわりをもって、フォントを指定したとして、あなたが指定したそのフォントが、あなたのブログやホームページを見る側の人のパソコンにもインストールされていなければ、あなたがこだわったそのフォントで、文章は表示されません。

この場合、見る側の人のパソコンには、Webブラウザの標準として登録されているフォントで表示されることになります。

しかし、どうしてもフォントにこだわって、相手のパソコンにも同じフォントで表示させたいときは、画像を使う方法があります。

画像加工編集ソフト（グラフィックソフト）で、文字を画像として作成し、それを相手のパソコンに表示させれば、相手のパソコンにないフォントでも表示されます。

ライブドアブログであれば、作成した画像をアップロードして、それをあなたのブログに表示させればO.Kです。

これを確認・設定変更するのは、ライブドアブログの管理画面の「管理トップページ」から「カスタマイズ管理」→「投稿の設定」で行えます。

ここでは、「WYSIWYGエディタ」で記事を投稿する方法を説明していきます。

「WYSIWYGエディタ」とはどのようなものかといいますと、「WYSIWYGエディタ」は、ワープロを使うような感覚で、誰でも簡単に直感的な操作で、文章を編集できるソフトウェアのことです。

「WYSIWYGエディタ」を使うと、記事投稿画面で、記事を作成中に、全体のイメージを視覚的につかみ易いという特長があります。

それではまず、管理トップページから、赤枠の「カスタマイズ管理」をクリックします。

「カスタマイズ管理」画面で、下の画像の赤枠部分「投稿の設定」をクリックします。

「投稿の設定」画面に切り替わります。

「シンプルエディタ」で投稿する形式と、「WYSIWYGエディタ」で投稿する形式への切り替えは、上記画面の赤枠の場所の「投稿フォームの形式」で設定を変更できます。
＊初期設定では、「シンプルエディタ」にチェックが入っていると思います。

「投稿フォームの形式」を変更したら、上の画像下部の「設定を保存する」をクリックします。ここでは、「再構築」は必要ありません。

なお、ライブドアブログの「WYSIWYGエディタ」機能は、Windows版インターネットエクスプローラーとFirefoxにのみ対応しているようです。

記事を入力するだけなら、「WYSIWYGエディタ」でも「シンプルエディタ」でもほとんど同じです。

ですが「WYSIWYGエディタ」では、「シンプルエディタ」に比べ、文章の装飾などが、より簡単に行えます。

上の画像の赤枠の部分（投稿フォームのボタン）を操作することで、文章の装飾などの設定が行えます。ほとんどワープロ感覚で記事が投稿できます。

＊投稿フォームのボタンの上に、マウスを持っていくと、そのボタンで行える機能が表示されるので、必要なボタン操作がわかり易くなっています。

「文字のスタイル」「フォント」「文字サイズ」まで、この画面から指定できます。
これは、「シンプルエディタ」にはありません。

こんな便利な「WYSIWYGエディタ」ですが、注意した方が良い点もあります。

そのひとつに、「WYSIWYGエディタ」で、改行するために「Enter」キーを押すと、&lt;ｐ&gt;タグが挿入され、段落として扱われます。

ただ改行したいだけの場合は、「Shift」キーを押しながら「Enter」キーを押してください。なお、この操作は、Windows版インターネットエクスプローラーのみの対応だそうです。

さらに、「WYSIWYGエディタ」画面には、HTMLタグを直接打ち込むことはできない点です。投稿フォームのボタンにない装飾を施したいときには不便です。

例えば、「引用」を表す「blockquote」を直接打ち込めません。

その場合は、「投稿の設定」を切り替えて「シンプルエディタ」で記事を投稿する必要があります。

ライブドアブログの「WYSIWYGエディタ」画面には、その下部に「HTMLを確認」という機能があるのですが、ここでは直接HTMLやCSSを打ち込むことはできないようです。

livedoor Blogサポート
http://blog.livedoor.jp/blog_cs/archives/50461980.html

「WYSIWYGエディタ」の「HTMLを確認」機能は、あくまでも確認をするためだけの機能のようです。

実は私は、livedoor Blogサポートの説明を知らずに、「WYSIWYGエディタ」の「HTMLを確認」で、HTMLやCSSを直接打ち込んでいました。

その都度思っていたのですが、「HTMLを確認」を何度も繰り返していると、いつのまにか自分で打ち込んだタグではないタグが記述されていました。

そのまま記事を投稿しても、表向きはキチンと表示されているので、あまり気にしていなかったのですが、あるとき、「HTMLを確認」の画面のまま、記事を投稿してしまったことがありました。

結果は、「HTMLを確認」画面そのままの形で、<ｐ>タグやら<br>タグやらがインターネット上に表示されてしまいました。

「WYSIWYGエディタ」は、とても便利ですが、この点は注意してください。

ヘッダーの背景画像をオリジナルのものに変更するだけでも、そのブログの印象はかなり変わりますよね。

では、この背景画像を変更する方法を説明していきます。
＊ここでヘッダーとは、ブログタイトル、ブログ説明文がある部分を指します。

ライブドアブログのヘッダーの背景画像は、ブログタイトルとブログ説明文のデザイン設定を行うスタイルシート（CSS)の部分に指定されています。

それでは、その部分を確認してみましょう。

ブログの管理ページから、【カスタマイズ/管理】→【デザインの設定】→【カスタマイズ】の順番で、スタイルシート（CSS）ファイルを開いてください。

ここまでの手順は、「カスタマイズ応用編では」を参考にしてください。

ライブドアブログのヘッダーの背景画像は、下記のように記述されています。
＊ここでは、ライブドアブログテンプレートから、「シーズン」→「空02」のテンプレートのスタイルシート（CSS）を使って説明します。

「#banner,#subbanner」で、はじまる箇所を探してください。
＊テンプレートによっては、「#banner」のみしか記述がないものもあります。
また、あなたがお使いのテンプレートによっては、ヘッダーの背景画像が、「#banner,#subbanner」に記述されていない場合があるかもしれませんが、多くのライブドアブログのテンプレートで、ヘッダーの背景画像は、「#banner,#subbanner」もしくは、「#banner」の部分に記述されていると思われます。

#banner,#subbanner{
 width:722px;
 height:209px;
 text-align:left;
 background:url(http://image.blog.livedoor.com/img/usr/sky_02/
main.jpg) no-repeat 50% 0;
}

上記のスタイルシート（CSS)を少し読み砕いてみると、

「width:722px;」は、背景画像の幅が「722px」だということを指定しています。
「height:209px;」は、背景画像の高さが「209px」だということを指定しています。

ヘッダーの背景画像を変更する際は、このサイズの画像を用意します。

「text-align:left;」は、ここは画像には直接関係はありません。ブログタイトルとブログ説明文の文字の配置を左寄せに指定しています。
＊ブログタイトルとブログ説明文の実際の配置は、「.blogtitle」「.description」などで指定されています。
参考：「ブログタイトルの文字の大きさを変更する」「ブログ説明文の文字の大きさを変更する」

background:url(http://image.blog.livedoor.com/img/usr/sky_02/
main.jpg) no-repeat 50% 0;

ここが、背景画像を指定している箇所です。

この部分の
「http://image.blog.livedoor.com/img/usr/sky_02/main.jpg」
は、ヘッダーの背景画像が置かれている（保存されている）場所です。

この部分をあなたが変更したい画像と置き換えます。

＊補足ですが、このようにurlで画像へのリンクを設定する方法を、「絶対パス」といいます。
ライブドアブログ有料版（プロ）では、「絶対パス」による画像のリンク設定ではなく、FTP機能を利用して、「相対パス」による方法で画像のリンク設定が行えます。

念のため、このurlがヘッダー画像であるかどうか確認してみましょう。

このurlをコピーして、Webブラウザーで確認します。

Webブラウザーのアドレス欄に、コピーしたurlを貼り付けてあなたのパソコンのキーボードの「Enter」キーを押してください。

＊違う画像が表示された場合は、その箇所はヘッダー画像を表す箇所ではありません。

このように背景画像は、「background」プロパティで、「url」にて指定されています。

ここの「（    ）」にも意味がありますので、削除しないでください。

「no-repeat 50% 0」は、画像を繰り返さないで（1度だけ）表示し、横方向の位置は、「#banner,#subbanner」の中央、縦方向の位置は、「#banner,#subbanner」のトップに表示する、という意味です。

わかりにくい部分ですので、画像を定位置に表示するためのおまじない程度に考えて、記述はそのままにしておきましょう。

なお、この部分はテンプレートによっては、記述内容が違う場合がありますが、その場合も変更しない方が無難です。

変更したい画像は、あらかじめアップロードしておく必要があります。

画像のアップロード方法は、「画像のアップロード方法」を参考にしてください。

なお、ヘッダーの背景画像をアップロードするときは、サムネイルを作成する必要はありませんので、「サムネイル作成」のチェックは、はずしてください。

アップロードした画像のurlの確認方法は、

ここで、上の画像の赤丸部分、画像につけたタイトル部分をクリックすると、Webブラウザー（インターネットエクスプローラー、Firefoxなど）が立ち上がり、その上部のアドレス欄に、アップロードした画像が置かれているURLが表示されます。

このurlをコピーして、テキストエディタに一旦貼り付けます。

このurlで、アンダーラインの部分、「jpg」までが画像のurlです。

その後ろ、「？」から後は必要ないので、削除しておきます。

このurlを下記のスタイルシート（CSS)の
「http://image.blog.livedoor.com/img/usr/sky_02/main.jpg」の部分と置き換えます。

#banner,#subbanner{
 width:722px;
 height:209px;
 text-align:left;
 background:url(http://image.blog.livedoor.com/img/usr/sky_02/
main.jpg) no-repeat 50% 0;
}

「http://image.blog.livedoor.com/img/usr/sky_02/main.jpg」を削除し、テキストエディタに貼り付けてあるurlをコピーして、貼り付けます。

ヘッダーの背景画像の変更が終わったら、管理画面の下の方にある、【この内容で保存する】をクリックし、その後、ブログを再構築してください。

再構築は、【スタルシート（CSS）】だけでもＯＫです。

再構築が終わったら、あなたのブログを実際に見て、確認してください。

今度はライブドアブログではない、違うブログサービスを利用するのも、ひとつの手だと思いますが、せっかく慣れたライブドアブログで、もうひとつブログを作りたくなるかもしれませんよね。

しかし、ライブドアブログは、ひとつのlivedoor IDで、ひとつのブログしか作ることはできません。

ひとりで複数のブログを作成することはできますが、新しいブログを作成するためには、その都度、新しいlivedoor IDを登録する必要があります。

新しいlivedoor IDを登録するときは、前に登録したときとは、違うメールアドレスが必要になります。

そんなときに便利なのが、フリーメールと呼ばれるメールサービスです。

フリーメールとは、インターネットを通じて無料で提供されるメールアドレスおよびE-mailのサービスのことです。

通常メールアドレスは、インターネットを利用するために加入したインターネットプロバイダから提供されますが、それに対してフリーメールは、インターネットプロバイダを介さず、インターネットを通じて、無料で提供されています。

フリーメールは、Webブラウザ（インターネットエクスプローラーやFirefoxなど）を使って、メールの送受信を行なう「Webメール」型のサービスが一般的ですので、インターネットでいろいろなサービスを受けたいが、インターネットプロバイダのメールアドレスでは、スパムメールが怖いという方にも便利なサービスです。

また、「Webメール」として利用すれば、電子メールソフト（Outlook Expressなど）を使う必要がないため、インターネットに接続されたパソコンがあれば、例えば、インターネットカフェなどでも、メールの受信確認や送信も行えます。

このように、フリーメールは、「Webメール」として利用するのが一般的ですが、インターネットサービスプロバイダなどが提供する通常のメールサービスと同じように、電子メールソフトを使って送受信を行なうことができるサービスもあります。

フリーメールの代表的サービスには、Yahoo!が提供する「Yahoo!メール」やMSNが提供すすの「Hotmail」、また、Googleが提供する「Gmail」、goo(NTTレゾナント）が提供する「gooメール」などが人気があり、利用者も多いようです。

「Gmail」は、以前は、mixiなどのSNSと同じように、先に「Gmail」のサービスを利用しているユーザーからの招待がなければ、ユーザー登録ができず、利用できませんでしたが、現在では、招待がなくてもユーザー登録ができるようになり、「Gmail」を利用できるようになりました。

ライブドアブログを開設している方は、ライブドアからフリーメールが提供されています。

他にも、最近では、ニフティが、@nifty加入者でなくても利用できる、メールサービスの提供を開始しました（ただし、メールアドレスの、@よりも下側は、@nifty加入者のものとは異なります）。

代表的はフリーメールサービス：

Yahoo!メール　http://promo.mail.yahoo.co.jp/
Hotmail　http://promotion.msn.co.jp/hotmail/
Gmail　https://mail.google.com/mail/
gooメール　http://mail.goo.ne.jp/goomail/index.ghtml
@niftyメール　http://nifmail.jp/promo.htm

他にも、たくさんのサービスがありますので、興味のある方は、検索エンジンで、「フリーメール」と入れて検索してみてください。

フリーメールのサービスを受けるには、サービスを提供している会社のWebサイトで、ユーザーIDもしくはユーザー名やパスワードなどを登録する必要があります。

ユーザーID（ユーザー名）は、メールアドレスの@(アットマーク)より前の部分になり、

例えば、Yahoo!メールであれば、メールアドレスは、「ユーザーID@yahoo.co.jp」にります。

しかし、あなたが登録したいユーザーIDを先に使っているユーザーがいた場合、そのユーザーIDは登録できません。

そのときは、他のユーザーIDを考えるか、もしくは、ユーザーIDの途中か後ろに「１」などの数字を入れたり、「 _ 」（アンダーバー)を入れる事で、登録できることがありますので、工夫してユーザーIDを考えましょう。

画像のアップロードは、ライブドアブログの無料版では、管理画面からのみアップロードできますが、有料版では、管理画面からのアップロードに加え、FTP機能を利用して、直接サーバーにアップすることもできます。

ここでは、管理画面からの画像のアップロード方法を取り上げます。

あなたのライブドアブログの管理画面から、下記の赤丸部分「ファイルのアップロード」をクリックします。

次に、下記画像の赤丸部分、「ファイルをアップロードする」をクリックします。

画像のアップロード画面に切り替わります。

続いて、あなたのパソコンにあらかじめ保存しておいた画像ファイルを、下記の画像の赤丸部分を、「参照」をクリックして、保存しておいた場所を指定し、アップロードしたい画像ファイルを選択します。

ファイルを選択した状態で、その下に画像のタイトルを記述します。画像タイトルは日本語でOKです。
なるべく画像のイメージに合った、わかり易い名前をつけた方が良いでしょう。
「サムネイル作成」のチェックは、あらかじめ入っていますので、作成しない場合は、チェックをはずしてください。
その後、赤丸部分の一番下、「選択したファイルをアップロードする」をクリックすると、画像がアップロードされます。

画面が切り替わり下記のような画面になりますので、下記画像の赤丸部分「ファイル一覧」をクリックすると、さらに画面が切り替わります。

ここで、上の画像の赤丸部分、画像につけたタイトル部分をクリックすると、インターネットエクスプローラーなどのWebブラウザーが立ち上がり、その上部のアドレス欄に、アップロードした画像が置かれているURLが表示されます。必要に応じてメモするなりして保存しておきます。

livedoorブログでは、アップロードできるファイル形式は、gif、jpg、png、bmp、mp4、mov、wmv、3gpであり、画像だけではなく、動画もアップロードできます。1度にアップロードできるファイルサイズは、画像の場合は500KB、動画は2MBが上限になっています。

ここからは、画像のアップロードについて説明していきます。

ファイルの種類は、あなたが用意した画像ファイルが、gif、jpg、png、bmpであれば、そのままアップロードできます。

しかし、あまり大きなサイズの画像を1つの記事にいくつも貼ると、表示に時間がかかってしまい、あなたのブログを見るユーザーの立場を考えると控えた方が良いと思います。また、画像の大きさは、ある程度揃えておいた方が、見栄えも良いと思います。

大きな画像を掲載したいときは、ライブドアブログには、画像をアップロードする際、「サムネイル作成」の機能があります。

画像をアップロードするとき、管理画面で「サムネイル作成」にチェックを入れると、画像の横幅を160ピクセル程度に縮小して保存してくれます。その上、元のサイズの画像も同時に保存してくれます。
＊アップロード方法は、「画像のアップロード方法」を参考にしてください。

しかし、あなたのブログで表示したい画像のサイズがあるのなら、画像をあらかじめリサイズ（サイズ調整）してからアップロードした方が良いでしょう。

これは、画像をアップロードするとき、管理画面で「サムネイル作成」のチェックを外します。
＊アップロード方法は、「画像のアップロード方法」を参考にしてください。

あなたが、画像加工編集ソフト（グラフィックソフト）をお持ちでしたら、そのソフトでリサイズすることができると思います。

画像のサイズは、表示したい場所（ヘッダー、記事欄、サイドバーなど）の横幅よりも大きくすることはできません。

表示したい場所の横幅よりも大きな画像を表示すると、ブログのデザインが崩れてしまいます。

たまに、サイドバーが、記事の下の方に表示されているブログを見ることがありますが、その原因のひとつは、大きすぎる画像を表示していることだと思います。

デジカメに付属しているソフトでも画像のリサイズを行えるものもあるようですが、無料のソフトウェアでもリサイズだけなら十分でしょう。

例えば、Windowsに標準に付属している、「ペイント」でもリサイズできます。

他にも、無料ソフトが、Vectorや窓の杜で探すとたくさん見つかります。

ひとつだけ無料ソフトをご紹介すると、「JTrim(ジェイトリム)」というソフトは、リサイズはもちろんのこと、トリミングなどの加工や、かなり凝った加工もできるフリーソフトで、無料とは思えないほどの機能を備えています。

JTrimのダウンロードサイトは下記からどうぞ。
http://www.woodybells.com/jtrim.html

このJTrimで画像をリサイズした後もExif情報が保存されますので、そのぶん画像の容量が重くなります。少しでも軽くしたい時は、Exifデータを保持しないように設定する必要があります。

＊詳しくは、ダウンロード先で確認してください。

このJTrimでは、画像の横幅と縦幅をピクセル単位でリサイズすることができますので、便利だと思います。

ブログの記事を書くときにテキストエディタを使っていれば、その記事をそのまま保存すればバックアップにもなります。

また、ブログをカスタマイズするとき、HTMLファイルやスタイルシート（CSS)ファイルをバックアップすることは、とても重要なことです。

ところで、日頃からパソコンでデータ保存やバックアップしていても、あまり気にしていない方もいるかもしれませんが、保存するデータを作成するアプリケーションソフト（ワード、エクセル等）によって、作成するファイル名の後ろにつく拡張子は異なります。

拡張子とは、ファイルにつける名前の後ろ側（末尾）につけられたファイルの種類を識別するための文字列で、ファイル名と拡張子は「.（ピリオド）」で区切られています。
拡張子は、そのファイルの種類を示す3～4文字の文字列であり、アルファベットと数字の組み合わせで成り立っています。

ちょっとわかりにくいと思いますので、画像を用意しました。

ちょっと見にくいと思いますが、上の画像には、アイコンとその下に「ファイル名」「 . 」「拡張子」の順番で並んでいるます。
「 . 」が特に見えずらくなっていますが、左上から順番には、「トップ . txt」「index . html」「style . css」という具合になっています。

その下は、「ワード」「エクセル」「パワーポイント」の順です。

＊アイコンは、あなたのパソコンのアプリケーションソフトのインストール状況や環境によって異なる場合があります。

このように、アプリケーションソフトによって、拡張子はそれぞれ異なります。

このファイル拡張子が表示されていない方は、下記の手順で表示されるようになります。

Windows XPの場合のみの説明です。

【スタート】→【コントロールパネル】→【フォルダオプション】を選択します。

【フォルダオプション】のダイヤログボックスで、下の画像上部の赤丸部分【表示】タブをクリックします。
【詳細設定】欄の下の方に【登録されているファイルの拡張子は表示しない】のチェックを外します（下の画像ではチェックを外した状態です）。
設定が済んだら、最後に【OK】ボタンをクリックしてください。

これで、あなたのパソコンにファイルの拡張子が表示されるようになったと思います。

ライブドアブログでヘッダー部の背景色は、ブログタイトルとブログ説明文のデザイン設定を行うスタイルシート（CSS)の部分に、背景色を指定する「background-color」を追加して指定します。

それでは、ブログの管理ページから、【カスタマイズ/管理】→【デザインの設定】→【カスタマイズ】の順番でスタイルシート（CSS）のファイルを開いてください。

ここまでの手順は、「カスタマイズ応用編では」を参考にしてください。

ライブドアブログでヘッダー部の背景色は、ブログタイトルとブログ説明文のデザイン設定を行うスタイルシート（CSS)の部分に、下記のように記述されています。
＊下記のスタイルシート（CSS）は例です。テンプレートによって、内容（数値等）は違いますので、あなたのご利用のテンプレートに適宜置き換えてください。

#banner,#subbanner{
 width:722px;
 height:209px;
 text-align:left;
 background:url( http://image.blog.livedoor.com/img/usr/sky_02/
 main.jpg) no-repeat 50% 0;
}

上記のスタイルシート（CSS)で、

background:url(http://image.blog.livedoor.com/img/usr/sky_02/
main.jpg) no-repeat 50% 0;

の部分が、ヘッダー部の背景画像を指定している箇所です。

この部分を削除して、代わりに「background-color」を追加して、色の指定を行います。
＊色の指定方法は、「ブログタイトルの文字の色を変更する」を参考にしてください。

スタイルシート（CSS)を削除しても、また元に戻したくなるかもしれないので、この場合、スタイルシート（CSS)のバックアップを必ずとっておくようにしましょう。

＊バックアップの仕方はこちらを参考にしてください（すいません準備中です）。

また、バックアップは必ずとることをお勧めしますが、今回のようにスタイルシート（CSS)を削除するような場合は、いきなり削除するのではなく、該当箇所をWebブラウザーの表示に一切影響しなくする方法で、ブログデザインの変更を確認することもできます。

この方法は、今回の場合では、

background:url(http://image.blog.livedoor.com/img/usr/sky_02/
main.jpg) no-repeat 50% 0;

の部分を「/*」と「*/」で囲んでしまう方法です。

こんな感じになります。

/*background:url(http://image.blog.livedoor.com/img/usr/sky_02/
main.jpg) no-repeat 50% 0;*/

「/*」と「*/」で囲んだ範囲は、スタイルシート（CSS)の表示指定を無効にします。
そのため、あなたのブログを表示するWebブラウザー（インターネットエクスプローラやFirefoxなど）は、「/*」と「*/」で囲んだ範囲は無いものだと理解するので、背景画像が表示されなくなります。

その他、「/*」と「*/」で囲んだ範囲を、コメントを書き込むために利用することもできます。
スタイルシート（CSS)を書き換えたり、追記したりしてカスタマイズしていくとき、この部分のスタイルシート（CSS)は、何を指定しているのかなどを書き込むときに使えます。
この場合は、あなたのブログを表示するWebブラウザーは、ここの部分はスタイルシート（CSS)ではなく、コメントとして理解するので、Webブラウザーの表示には影響は出ません。

こんな感じに使います。

/* ヘッダーデザイン設定 */
#banner,#subbanner{
width:722px;
height:209px;
text-align:left;
background:url( http://image.blog.livedoor.com/img/usr/sky_02/
main.jpg) no-repeat 50% 0;
}

話がそれましたが、ヘッダーの背景色には、「background-color」を追加して、色の指定を行います。
＊色の指定方法は、「ブログタイトルの文字の色を変更する」を参考にしてください。

追加したスタイルシート（CSS)は、下記のようになります。
赤字の部分が、ヘッダーの背景色を指定するために追加した箇所です。

#banner,#subbanner{
 width:722px;
 height:209px;
 text-align:left;
 background:url(http://image.blog.livedoor.com/img/usr/sky_02/
 main.jpg) no-repeat 50% 0;
 background-color:#3366ff;
}

ヘッダーの背景色の追加が終わったら、管理画面の下の方にある、【この内容で保存する】をクリックし、その後、ブログを再構築してください。

再構築は、【スタルシート（CSS）】だけでもＯＫです。

再構築が終わったら、あなたのブログを実際に見て、確認してください。

「/*」と「*/」で囲んだ

/*background:url(http://image.blog.livedoor.com/img/usr/sky_02/
main.jpg) no-repeat 50% 0;*/

の部分を削除した場合は、もう一度、ブログを再構築してください。