今回は、CSS（スタイルシート）の記述方法について説明します。
スタイルシートに記述されている「.content p」や「#banner h2」、「.content p.posted」などの意味がよく分らないという方には必須の講義です＾＾


■ タグ名に対するスタイルの指定
タグ名に対してスタイルを指定する場合は、下記のように記述します。

< スタイルシートの書式 >

タグ名 { プロパティ ： 値 ； }

　　　　※プロパティと値が１つの場合は、最後の「；」は省略可

例えば、h1タグで指定した文字にスタイルを適用する場合は、下記のように記述します。

< スタイルシートの記述例 >

h1 { 　color : red; }

■ 複数スタイルの指定方法
複数のスタイルを適用する場合は、「；（セミコロン）」で区切って記述します。

< スタイルシートの記述例 >

body { 　color : red; 　text-align: center; }

■ 複数タグに対する指定方法
また、異なるタグに同じスタイルを適用する場合は、「，（カンマ）」でタグを区切って記述します。

< スタイルシートの記述例 >

h1,h2,h3 { 　color : red; }

■ タグを入れ子にした指定方法
タグを入れ子にして指定することで、特定のタグに囲まれたタグだけにスタイルを適用させることができます。

< スタイルシートの書式 >

タグ名 タグ名 { プロパティ ： 値 ； }

例えば、下記のように、divタグとpタグを入れ子で指定した場合は、divタグ内のpタグに対してはスタイルが適用されますが、divタグに囲まれていないpタグには適用されません。

< スタイルシートの記述例 >

div p { 　color : red; }

■ クラス名によるスタイルの指定方法
同じタグを使うにしても、場合に応じて別のスタイルを指定したいこともあります。そのような場合には、クラス名を利用します。

< スタイルシートの書式 >

．クラス名 { プロパティ ： 値 ； }

< テンプレート（HTML）の書式 >

<タグ class="クラス名">～</タグ>

例えば、下記のように、color1とcolor2というクラス名でそれぞれスタイルを指定した場合、テンプレート内でそのクラスを利用することで、そのスタイルが適用されます。

< スタイルシートの記述例 >

.color1 {　color : red; } .color2 {　color : blue; }

< テンプレート内の記述例 >

<p class="color1">赤色</p> <p class="color2">青色</p>

■ クラス名にタグを指定する方法
特定のタグだけに有効なクラス名を指定することもできます。

< スタイルシートの書式 >

タグ名．クラス名 { プロパティ ： 値 ； }

< テンプレート（HTML）の書式 >

<タグ class="クラス名">～</タグ>

例えば、下記のように記述した場合、pタグの中にだけcolorというクラス名を指定することができ、他のタグで指定しても無効となります。また、同じpタグでもクラス名を記述しない場合は、スタイルが適用されません。

< スタイルシートの記述例 >

p.color {　color : red; }

< テンプレート内の記述例 >

<p class="color">赤色</p>

■ クラス名による入れ子指定
クラス名を指定したタグの中にある特定のタグにのみスタイルを適用させることもできます。

< スタイルシートの書式 >

．クラス名 タグ名 { プロパティ ： 値 ； }

< テンプレート（HTML）の書式 >

<タグ class="クラス名">～</タグ>

例えば、下記のように、contentというクラス名とh2タグを並べて記述した場合、テンプレート内でcontentを指定したdivタグに囲まれたh2タグに対してのみスタイルが適用されます。

< スタイルシートの記述例 >

.content h2 {　color : red; }

< テンプレート内の記述例 >

<div class="content"> <h2>赤色</h2> </div>

■ IDによるスタイルの指定方法
上記のクラス名による指定方法に似ていますが、ID名でスタイルを指定することができます。

クラス名とID名による指定方法の違いは、クラス名による指定の場合は、複数のタグで同じスタイルを何度も利用することができるのに対して、ID名による指定の場合は、ページ内で一回のみ利用する場合に使用します。

< スタイルシートの書式 >

＃ID名 { プロパティ ： 値 ； }

< テンプレート（HTML）の書式 >

<タグ id="ＩＤ名">～</タグ>

例えば、下記のように、color1というＩＤ名でスタイルを指定した場合、テンプレート内でそのIDを利用することで、そのスタイルが適用されます。

< スタイルシートの記述例 >

#color1 {　color : red; }

< テンプレート内の記述例 >

<div id="color1">赤色</p>

■ ID名にタグを指定する方法
特定のタグだけに有効なID名を指定することもできます。

< スタイルシートの書式 >

タグ名＃ID名 { プロパティ ： 値 ； }

< テンプレート（HTML）の書式 >

<タグ id="ID名">～</タグ>

例えば、下記のように記述した場合、pタグの中にだけcolorというIDを指定することができ、他のタグで指定しても無効となります。また、同じpタグでもID名を記述しない場合は、スタイルが適用されません。

< スタイルシートの記述例 >

p#color {　color : red; }

< テンプレート内の記述例 >

<p id="color">赤色</p>

■ ID名による入れ子指定
ID名を指定したタグの中にある特定のタグにのみスタイルを適用させることもできます。

< スタイルシートの書式 >

＃ＩＤ タグ名 { プロパティ ： 値 ； }

< テンプレート（HTML）の書式 >

<タグ id="ID名">～</タグ>

例えば、下記のように、contentというID名とpタグを並べて記述した場合、テンプレート内でcontentというIDで囲まれたh2タグに対してのみスタイルが適用されます。

< スタイルシートの記述例 >

#content p {　color : red; }

< テンプレート内の記述例 >

<div id="content"> <p>赤色</p> </div>

＜タグ名に対するスタイルの指定方法＞

記述方法	記述例
■ タグ名に対する指定方法 タグ名 { 　プロパティ ： 値 ； }	h1 { 　color : red; }
■ 複数スタイルの指定方法 タグ名 { 　プロパティ1 ： 値1 ； 　プロパティ2 ： 値2 ； }	body { 　color : red; 　text-align: center; }
■ 複数タグに対する指定方法 タグ名，タグ名，タグ名 { 　プロパティ ： 値 ； }	h1,h2,h3 { 　color : red; }
■ タグを入れ子にした指定方法 タグ名　タグ名 { 　プロパティ ： 値 ； }	div p { 　color : red; }

＜クラス名によるスタイルの指定方法＞

記述方法	記述例
■ クラス名によるスタイルの指定 ．クラス名 { 　プロパティ ： 値 ； }	.content { 　color : red; }
■ クラス名による入れ子指定 ．クラス名　タグ名 { 　プロパティ ： 値 ； }	.content h2 { 　color : red; }
■ クラス名にタグを指定 タグ名．クラス名 { 　プロパティ ： 値 ； }	p.posted { 　color : red; }
■ クラス名による入れ子指定 　　＋クラス名にタグを指定 ．クラス名　タグ名．クラス名 { 　プロパティ ： 値 ； }	.content p.posted { 　color : red; }

＜ID名によるスタイルの指定方法＞

記述方法	記述例
■ ID名によるスタイルの指定 ＃ID名 { プロパティ ： 値 ； }	#banner { color : red; }
■ ID名による入れ子指定 ＃ID名 タグ名{ プロパティ ： 値 ； }	#banner h2 { color : red; }
■ ID名にタグを指定 タグ名＃ID名 { 　プロパティ ： 値 ； }	p#color { 　color : red; }

以上、CSS（スタイルシート）の記述方法について説明しました。
今回の内容は少し分かりにくかったかもしれませんね。
スタイルシートの記述方法は、実際にカスタマイズしていくと理解できるようになりますので、カスタマイズの際に参考にしてくださいね。

[次の講義へ] → 望ましい文字サイズの指定方法とは

参考になりましたら、1クリックの応援お願いします 　

今回は、「CSS（スタイルシート）」についてです。
では、早速、講義を始めたいと思います。


CSSとは、Cascading Style Sheets（カスケーディング・スタイルシート）の略で、HTML文書の装飾部分を一括管理できる機能です。

もう少し分かりやすく言いますと、HTMLでは、文字の大きさや色、背景色などを個別に指定していましたが、CSSでは、一括で指定することができます。

もしHTMLのみでWEBページを作成していれば、文章構造が細かくなったり、ページ数が増えてくると、それぞれのページを修正することは大変な作業になりますが、CSSを活用することによって簡単に修正することができます。


では、ブログの場合、CSSはどのように使用されているのか見てみましょう。

■ ブログテンプレートのファイル構成

ほとんどのブログテンプレートでは、CSSを外部ファイル化していて、HTMLとCSSを別ファイルで管理しています。

HTMLではテンプレートの基本構造（レイアウト）を、CSSでは文字や背景の装飾部分を定義しています。

ブログテンプレートのファイル構成
HTMLファイル	・メインページ（トップページ） ・カテゴリー・アーカイブ ・個別エントリーアーカイブ（個別記事） ・日付アーカイブ（月別アーカイブ）
CSSファイル	・スタイルシート

■ CSSの外部ファイル化

ブログのトップページなどのHTMLソースを見ていただくと、<head> タグの範囲内に、下記のような記述があります。

<< HTMLファイル >>

<head> <link rel="stylesheet" href="styles-site.css" type="text/css" /> </head>

この記述で、 CSSを別のファイルから読み込むことができます。
HTML に CSS を記述することもできますが、CSSを外部ファイル化することで、同一のスタイルを複数のページで共有できます。

この外部ファイル化されたCSSを編集することで、トップページや個別記事などのデザイン部分（文字の色・サイズ、背景色、背景画像など）を、一括で変更することができます。


次に、CSSの記述方法について説明します。
CSSの書式は下記のようになります。

<< CSSの書式 >>

セレクタ { プロパティ ： 値 ； }

セレクタ（selector）とは、スタイルを適用する対象のことで、HTML の要素（element）、例えば、 body や p などが該当します。

プロパティ（property）とは、セレクタにどのような効果を付与するかを指定するものです。プロパティごとに指定できる値が決まっています。

;（セミコロン）は、2つ以上のプロパティを設定するときに「値」の後ろに入れます。ただし、プロパティが1つしかない場合に記述しても、特に表示に支障はありません。

<< CSSの記述例 >>

body{ background-color: #ffffcc; }

この例では、「BODY」がセレクタ、「background-color」がプロパティ、「#FFFFCC」が値となります。

プロパティが多い場合は、上記のように改行を入れて見やすくしましょう。


また、ブログのテンプレートでは、クラスが頻繁に使用されていますので、説明します。

クラスを定義することにより、特定の要素（タグなど）にスタイルを指定することができます。記述方法は、下記のようなパターンがあります。

■ セレクタ名　．クラス名（任意の名前）

セレクタにピリオド（.）とクラス名（任意の名前）をつけて記述します。
一つの要素に複数のスタイルも指定できます。

<< スタイルシート >>

p.menu　　 {　color: red;　} p.submenu {　color: green;　}

<< HTML >>

<p class="menu">メニュー</p> <p class="submenu">サブメニュー</p>

■ ．クラス名（任意の名前）

セレクタ名を指定せず、ピリオド（.）とクラス名だけを記述した場合は、すべての要素でそのスタイルを指定することができます。つまり、そのクラスはタグに依存することなく、複数のタグにスタイルを指定できます。

<< スタイルシート >>

.menu {　color: #666666;　}

<< HTML >>

<p class="menu">メニュー</p> <div class="menu">メニュー</div>

以上、CSS（スタイルシート）について簡単に説明しました。
今回の内容は少し分かりにくかったかもしれませんね。
CSSは、実際にカスタマイズしていくと理解できるようになりますので、今回は軽く流し読みする程度で結構です＾＾

スタイルシートの詳しい記述方法は、下記の記事を参考にしてくださいね。
[関連記事] → スタイルシート記述方法

それでは、次回からいよいよ実践編です。長い間お待たせしました＾＾
ブログ別にカスタマイズ方法を詳しく説明していきます。

[次の講義へ] → 望ましい文字サイズの指定方法とは

1クリックの応援で更新が早くなります＾＾ 　

ブログをカスタマイズするには、HTMLやCSS（スタイルシート）を編集する必要があります。

そこで、今回と次回に分けて、「HTMLタグ」と「CSS（スタイルシート）」について説明します。ブログを思い通りにカスタマイズするためにも、必要な知識ですので、しっかりと学んでいってくださいね。


HTMLとは、Hyper Text Markup Languageの略で、Webページを作成するための言語です。見出しや段落、リンクなどの要素を組み合わせ、Webページの構造を作成するために使用されます。

タグとは、見出しや段落、リンクなどの要素を"<"と" >"で囲んだもので、<h1>、<p>などのように記述したものです。通常は、「<p>～</p>」のように開始タグと終了タグの２つ１組で使用されます。

ブログの場合も、下記のテンプレートなどはHTMLで作成されています。

・メインページ（トップページ）
・カテゴリー・アーカイブ
・個別エントリーアーカイブ（個別記事）
・日付アーカイブ（月別アーカイブ）

タグを理解しておけば、カスタマイズもスムーズにできますので、もう少し詳しくタグについて説明していきます。


タグの記述方法には、下記のようなパターンがあります。

■ <タグ名>～</タグ名>
例えば、段落を示すタグは、

<p>よく使うタグは覚えておこう！</p>

のように記述します。開始タグと終了タグが「対」になっており、終了タグの前には、「/（スラッシュ）」を付けます。
HTMLでは、タグ名は大文字でも小文字でも構いませんが、XHTMLでは、小文字で記述しなければならないので、今のうちから小文字で書くようにしましょう。。

■ <タグ名>のみ
例えば、改行や画像表示タグなどは、

<br /> <img src="sample.gif" alt="サンプル" />

のように記述し、終了タグがないものもあります。

■ <タグ名 属性>～</タグ名>
タグ内に属性を記述することで、より細かな指定を行うことができます。
例えば、

<font size="+1">文字サイズを一段階大きくする</font>

と記述すると、下記のように表示されます。

文字サイズを一段階大きくする

ただし、属性は、タグ名の後に半角スペースをあけて、記述することができますが、上記の例のように、装飾を指定するものは、できるだけスタイルシートで記述するように推奨されています。

■ URL
タグ内にURLを記述する場合、ディレクトリ（フォルダ）は「/」で区切って記述します。

<a href="index.html">リンク</a> <a href="./find.html">リンク</a> <a href="../top.html">リンク</a> <a href="../../menu.html">リンク</a>

同ディレクトリ 現在のディレクトリ 一つ上のディレクトリ 二つ上のディレクトリ

<a href="http://ドメイン名/ディレクトリ名/ファイル名">リンク</a>

インターネット上のページ

ファイル名などは大文字、小文字の区別がありますので、注意してください。


HTMLタグの基本的な記述方法について説明しました。より詳しいHTMLタグの説明は、下記のサイトを利用すると便利ですので、是非、参考にしてください。

お役立ちリンク集（HTMLタグ解説サイト編）
HTMLクリックリファレンス	HTMLタグ・スタイルシート・特殊文字等の早見表。
CYBER@GARDEN	ホームページ作成・Web作成学習/支援サイト。Web作成講座、Webデザイン講座、CSS講座、XHTML講座、HTML辞典、CSS辞典、JavaScript Tipsなど。
みんなのタグ辞典	HTMLタグを解りやすく説明されているHTMLタグリファレンス。HTML小技・雑学など。
とほほのWWW入門	HTML、CGI、JavaScript等のリファレンス、ホームページ作成に関する各種情報。

以上、「HTMLタグ」について説明しました。次回は、「CSS」について説明します。「CSS」も、ブログをカスタマイズする上で必要ですので、頑張って受講してくださいね。

[次回の講義へ] → CSSとは

1クリックの応援で講義内容が濃くなります＾＾ 　

ブログをカスタマイズするには、いくつか注意点がありますので、説明します。


■ CSSやHTMLの編集が可能であること
ブログをカスタマイズするには、CSS（スタイルシート）やHTMLを編集する必要があります。
ですので、思い通りにカスタマイズするには、CSS（スタイルシート）とHTMLの編集が可能なブログサービスの利用する必要があります。

無料ブログ比較表の「カスタマイズ」項目が「○」のブログが、CSS（スタイルシート）とHTMLの編集が可能なブログサービスですので、是非、参考にしてください。

サーバーインストール型のMovableTypeであれば、CSS（スタイルシート）とHTMLの編集が可能なので、自由にカスタマイズできます。
MovableTypeのインストール・設置方法は、MovableType設置方法を参考にしてください。

■ 編集前にバックアップ
編集する前には、バックアップをとっておくことをおすすめします。カスタマイズに失敗したり、気に入らなかった場合など、バックアップをとっておけば、簡単に編集前のブログに戻せます。

■ 免責事項
当ブログに記載された内容に基づいて、いかなる障害が生じても、当ブログの管理人は一切の責任を負いませんので、自己責任でカスタマイズ等を行ってください。

ただし、できる限りの対応は行いますので、掲示板に質問や問題点等を記入してください。


以上、「カスタマイズをする前の注意点」について説明しました。
次回からは、「HTMLタグ」と「CSS（スタイルシート）」について説明します。ブログを思い通りにカスタマイズするためにも、必要な知識ですので、頑張って受講してくださいね。

[次回の講義へ] → HTMLタグとは

1クリックの応援で講義内容が濃くなります＾＾ 　

ブログのデザインをカスタマイズするには、いろいろなブログを見て回って、実際にカスタマイズされているブログを参考にするのが一番の近道です。

そこで、今回は、カスタマイズを駆使されたブログを厳選して紹介します。どのブログも必見で、今後のブログ運営に役立つ要素が満載です。


では、早速、優秀なブログ（カスタマイズ）を見てみましょう！
どのブログもすごく素敵にカスタマイズされていますので、必見です。

厳選！ブログ（カスタマイズ）リンク集
350日の節約生活 【MovableType】	350日間の節約生活と残りの2週間で旅行を楽しむ主婦による節約レシピ、節約術、家計簿の公開等。 ～りっちのコメント～ デザイン、カスタマイズ、内容、いずれをとってもすごく洗練されたブログです。トップページでカテゴリ別に最新記事が一目で分かるのも読者には嬉しいデザインですね。
マイバブルタイプ 【MovableType】	ブログを使ったアフィリエイトを成功に導く情報満載。アフィリエイトニュース、アフィリエイトに役立つブログ全般情報。 ～りっちのコメント～ MovableTypeやブログ、アフィリエイトなどの情報が満載で、すごく参考にさせて頂いてます。カスタマイズも必見です。
アフィリエイト インテリジェンス 【MovableType】	アフィリエイトに関するノウハウ、情報の他、サイト制作・運営やアクセスアップのテクニックなどが満載。 ～りっちのコメント～ MovableTypeを駆使されたカスタマイズは、ブログでのサイト運営に可能性が感じられます。サイト開設までの過程や毎月の運営録は、ブログで運営しようと考えられている方には非常に参考になります。
遠恋/同棲/結婚→LCM節約工房 【MovableType】	遠距離恋愛・同棲・結婚カップル応援ブログサイト。神奈川県と北海道での遠距離恋愛から、同棲生活を経て、結婚に至るまでの軌跡とその節約術などを公開しています。 ～りっちのコメント～ シンプルなデザインなのに、決して既存のブログテンプレートにはないデザイン。お見事！
0円のWEB素材屋さん 【livedoor blog】	プロのWEBデザイナーによって作られた、プロ用の無料WEB素材（無料アイコン/ブログテンプレート/無料イラスト）を、完全無料で提供しています。 ～りっちのコメント～ ホスティング系のブログでここまでカスタマイズできるのか！って思わせてもらえます。また、Webサイトとブログとの組み合わせが見事にカスタマイズされています。当ブログでも無料アイコンを使用させて頂いてます＾＾

[関連記事]

• Movable Type コンテスト 2006　受賞サイト
• Movable Type コンテスト 2005　受賞サイト

上で紹介したブログを拝見すると、どのブログも、うまくカスタマイズを活用されていて、ブログでのサイト運営にますます可能性を感じますね。

しかし、どのようにカスタマイズしたら、このような素敵なブログを作成できるのでしょうか？

それは、次回以降に詳しく説明していきますので、しっかりと受講してくださいね。具体的なカスタマイズ方法は、実践編にて、ブログ別に説明していきますので、お楽しみに！

[次回の講義へ] → ブログをカスタマイズするには

1クリックの応援で講義内容が濃くなります＾＾