そんな問題を解決するためにソーシャルボタンを自作してテキストやイメージ画像に変える方法をここでは紹介してます。

設置するソーシャルボタンは、『Facebookシェア』、『Tweet』、『Google+』、『Lineに送る』、『はてなブックマーク（はてブ）』、『Pocket』、『feedly』、『その他のフィード』の8つです。

必要に応じて追加したり減らしたりして下さい。

それでは、早速、説明に入らせて頂きたい所ですが、まずはじめにテキストのみでボタンを表現する場合は、ボタンの色と個々のSNSのサイトカラーがマッチする必要があるので、参考になるサイトはないかと色々と調べた所、『ドキドメ！』さんの『ソーシャルボタンを自作してWordPressの高速化』という記事でSNSのイメージカラーにマッチした配色のCSSを公開して下さっていたので、CSSについては、ほぼそのまま使わせて頂きました。ありがとうございます。

以下そのCSSです。CSSの一番下にコピーして貼り付けて下さい。

テキストの場合のデザインについてはこれを参考に個々にアレンジしてみて下さい。

続いて、ボタンを設置したい場所に記述するHTMLタグです。

当サイトはMovableTypeを使用している為、MovableTypeでのHTMLタグを例に挙げておりますが、その他のブログやホームページでも修正すれば利用可能です。

MovableType以外のブログやホームページにボタンを設置する場合の修正箇所については、後ほど説明させて頂きます。

上記HTMLの修正個所としては、tweetの○○○という部分を下記のように自分のブログ情報に書き換える必要があります。

また、これらが不要な場合は、削除することも可能です。

viaを消す場合は、

の部分を丸ごと削除して下さい。

hashtagsを消す場合は、

の部分を丸ごと削除して下さい。

MovableTypeタグが古いですが、MovableTypeを利用している場合は、○○○の箇所を修正し、上記HTMLを表示したい場所に貼り付ければそのまま使用できます。（Movable Type Pro version 6.1.2で確認）

MovableTypeを利用していない方が使用する場合は、○○○部分に加え、上記HTMLの以下の点を修正して使用して下さい。

以上の点を修正すれば、MovableType以外を使用している方でも使用できます。

また、テキストではなく画像で表示したい場合は、</a>の手前のSNS名が記述してある部分を削除して画像表示のタグに差し替えて下さい。

上記例の○○○の部分をPocketの画像タグに差し替えて下さい。

このようにFacebookシェア、Tweetなどその他のSNSのテキストも画像のタグに差し替えて下さい。

最後に画像表示の場合、CSSはそのまま使えませんので、背景色を消したり横幅の調整を行うなどして各自調整してみて下さい。

以上でソーシャルボタンをオリジナルのテキストや画像に変更することができますのでぜひ試してみて下さい。

アメブロのサイドメニューは、『.skinMenu』『.skinMenuHeader』『.skinMenuBody』というクラスセレクタによりデザインの変更が可能となります。

『.skinMenu』はサイドメニューの下地、『.skinMenuHeader』はサイドメニューのタイトル部分、『.skinMenuBody』はサイドメニューのボックス部分に対応しています。

以下、アメブロのサイドメニューのCSS例文となりますので、CSS編集の一番下にコピーして貼り付け、色、幅、高さ、文字の大きさなどをお好みに調整して下さい。

上記CSSをCSS編集の一番下に貼り付ければ、カスタマイズし易いと思います。

補足説明として、サイドメニューのタイトル部分にアイコン（背景）画像を使用する場合は、以下の部分を変更して下さい。

○○○の部分は、以下のようにアイコンまたは背景画像のURLに変更してして下さい。

万が一、サイドメニューのタイトル部分に画像を使用しないという場合は、上記の部分は不要ですので全て削除して下さい。

また、以下の部分で画像の分だけ文字の配置をズラしています。

左のpaddingを26pxにすることによって、文字を少し右にズラしているので、アイコンや背景画像に合わせてこちらの数値も大きくしたり小さくしたりして調整して下さい。

画像を使用しない場合は、5pxくらいにすると丁度良い位置になるかもしれませんが、こちらもお好みによって調整してみて下さい。

その他、文字の大きさや色、枠線の太さや色など、自由に変更できますので、CSSの記述方法について調べながら変更してみて下さい。

アメブロの記事タイトルは、『.skinArticleHeader』というクラスセレクタによりデザインの変更が可能となります。

以下、『.skinArticleHeader』の例文となりますので、CSS編集の一番下にコピーして貼り付け、色、幅、高さ、文字の大きさなどをお好みに調整して下さい。

上記CSSをCSS編集の一番下に貼り付ければ、カスタマイズし易いと思います。

少しだけ補足説明させて頂くと、アメブロのデフォルトの記事タイトルには、左側にグレーの5px程のラインが入っています。

そのラインは、

という部分で消しました。

必要な場合は、この部分を丸ごと削除すれば、元々あったラインが表示されます。

その他、（太文字）、（左寄せ）、（なし）、（下線）など、この例文で勝手に指定しているだけですので、CSSの記述方法については自分で調べて変更してみて下さい。

実はこの隙間、下の画像のようにCSSの編集で簡単に消すことが出来ます。

上のようにアメブロのヘッダー余白を消す方法は、下記のCSSをCSS編集の一番下に貼り付けるだけで実現できます。

CSSの編集のやり方については、『CSSテンプレートでアメブロをカスタマイズする方法』で説明しています。

または、

どちらともヘッダーにある22pxの余白を消す役目を果たしますので、どちらか一方のみCSS編集の一番下に貼り付ければ、ヘッダー部分の余白を消すことが出来ます。

気になっていた方は、ぜひ試してみて下さい。

アメブロにヘッダーメニューを取り付ける場合、カスタマイズする部分は、『CSS編集』と『フリースペース』の2ヶ所となります。

まずは、フリースペース編集の部分ですが、フリースペースの編集部分に下記のHTMLコードを貼り付けて下さい。

フリースペースの編集は、アメブロの管理画面左メニューの『設定・管理』⇒『フリースペース編集』の順にクリックすると編集ページが開けます。

アメブロでヘッダーメニューを表示する方法については、多くの方が紹介していますが、他と同じでは芸がないので、当サイトではメニュー部分を6個にしたり、HTMLをテーブルで構成してみました。

メニューへのリンクは、各自自分のリンクしたいページへのリンクに変更して使って下さい。

また、メニューの数を増やしたり、減らしたりする場合は、

という部分の行を増やしたり減らしたりしてから、後で紹介するCSSの『一つ一つのメニュー幅』という部分を自分で調整してみて下さい。

一応、余談として、このソースの続きに別のフリースペースのHTMLを追加すると、サイドメニューにその続きを表示することが可能です。（ヘッダーメニューでフリースペースを使ってしまったからフリースペースが使えないわけではありません。）

続いて、CSS部分の編集についてですが、CSS編集の一番下に下記のCSSをコピーして貼り付けて下さい。

CSSの編集のやり方については、『CSSテンプレートでアメブロをカスタマイズする方法』で説明しています。

これについては、少しCSSが長いので、必要な部分だけ補足説明を付けておきましたので、変更したい部分がある場合は、説明で該当箇所を探し、各自調整してみて下さい。

以上の方法で、当サイトのアメブロにヘッダーメニューを表示することが実現できています。

興味のある方は、ぜひ実践してみて下さい。

また、タイトルと説明文を消すことが出来たとしてもタイトルがなくなったことにより、ブログのトップページに戻るリンクまで消えてしまい不都合に感じる事もあるかもしれません。

そこで、ここではその両方に対処する方法について説明しています。

アメブロにヘッダー画像を表示する方法については、『アメブロにオリジナルヘッダー画像を表示する方法』で別途説明していますので、このページはそれと合わせて設定が必要となるカスタマイズです。

それでは、アメブロのタイトルと説明を消してヘッダー画像にリンクする方法について説明させて頂きます。

とりあえず、下記のCSSをCSS編集の一番下に貼り付けることで、上記現象を解消することが出来ます。

CSSの編集のやり方については、『CSSテンプレートでアメブロをカスタマイズする方法』で説明しています。

上記CSSについて簡単に説明させて頂くと、『skinTitleArea』に『text-indent:-9999px;』のスタイルを指定することにより、通常見えている領域から見えない領域までタイトルを飛ばすという感じになります。

また、『skinTitle』に『height:300px;』のスタイルを指定することにより、こちらも通常見えている領域から見えない領域まで説明文を飛ばすという感じになっています。（こちらについては、ブログにヘッダー画像を表示した際に指定した、ヘッダー画像の高さと同じに指定する必要があります。）

このCSSを指定することにより当サイトのアメブロは、タイトルと説明文を見えなくして、ヘッダー画像の領域にトップページへのリンクを貼ることが実現できています。

興味のある方は、ぜひ実践してみて下さい。

アメブロにヘッダー画像を表示する場合は、下記『ヘッダー画像を表示する』のCSSをCSS編集の一番下に貼り付けることで可能となります。

アメブロのCSS編集方法については、『CSSテンプレートでアメブロをカスタマイズする方法』というページで説明していますので、参考にしてみて下さい。

上記CSSをCSS編集の一番下に貼り付けたら、次は、以下の画像の手順で、画像をアメブロにアップロードします。

ここまでが上の画像の手順です。

続いて次の画像です。

2枚目の画像の手順です。

以上の手順でアメブロにヘッダー画像を表示することが出来ます。

ヘッダーが代わるとオリジナル感が増しますので、是非、試してみて下さい。

CSSの編集のやり方については、『CSSテンプレートでアメブロをカスタマイズする方法』で説明しています。

そのCSS編集を実際にご覧頂けると以下のような見出しがあると思います。

この見出し下のCSSがその部分に連動しているCSSとなっていますので、見出しに沿って変更していきます。

例えば、『/* 通常文字 */』を例に挙げて説明すると、

というような記述になっていると思いますが、CSSをカスタマイズする場合は、必ず、{}の中を変更して下さい。

という部分はHTMLとのつながりを表し、ここを変更してしまうとそもそもCSSが機能しなくなってしまうので、その辺りは注意してカスタマイズしてみて下さい。

あくまでもCSSは基本が大事ですので、CSSの記述方法がまったくわからないという方は、『CSS（スタイルシート）の書き方』というページで少しだけCSSの記述方法を説明していますので、参考にしてみて下さい。

とまぁ、CSSの記述がある程度、おわかり頂いているという前提でフォントに関するCSSの記述を『/* 通常文字 */』を例に少し挙げておきます。

その他にも太字にしたり、左・中・右寄せにしたり、文字に関するCSSはたくさんあります。

また『font-family』も他にも色々と指定できたり、『line-height』も別の記述方法があったりとここで説明できることも限られていますので、各自ネットで調べて色々と試してみて下さい。

基本となるブログの『通常文字』が決まったら、後はその下も順を追って変更していきます。

例えば、『通常文字』の見出しの他には、『弱い文字 （日付など）』や『強い文字 （NEW! 更新!など）』といった見出しも存在します。

そういった見出し一つ一つに先ほどの『通常文字』と同じ様な規則性のある記述があると思いますので、その部分の{}内も同じように好きな文字に変更していけば、全体の文字も変更できますし、部分的な文字も変更することができますので、実際にどのように表示されるか色々と試しながらカスタマイズしてみて下さい。

ここまでできるようになると『(1-1) 全体の文字』だけではなく、次の見出しの『(1-2) ブログタイトル文字』や『(1-3) 記事／メッセージボード内の文字のスタイル』、『 (1-4) サイドバー内の文字のスタイル』も親切にも見出しに説明が書かれていますので、自分でどの場所か把握できるようであれば、同じように変更できますので、試してみて下さい。

横幅を広げる際は良いかもしれませんが、狭くする場合は、有料で広告を消さないと狭くできる範囲は限られてしまいます。

デフォルトのアメブロテンプレートの横幅は、980pxで指定されていますが、実際にCSSを調整してみた所、当サイトと同じ940pxの幅に狭くすることはできました。

しかし、実際には、3カラムテンプレートでは広告が切れたり、大きすぎてデザインがズレたりするなど、実現はできませんでした。

当サイトの場合、こちらのブログサイトと同じデザインにしたかったので、本来は3カラムのテンプレートの使用を考えていましたが、実現できなかったので、仕方なしに2カラムテンプレートで横幅を940pxまで狭くしました。

そんな経緯もあり個人的な感想として、無料でアメブロを使っている場合、横幅を狭める事はあまり実用的ではないかなと思いました。

とまぁ個人的な感想はこれくらいにして、まずは、横幅の理解を深めて頂く為にアメブロの枠部分の構造を書き出してみましたので、興味のある方は参考にしてみて下さい。

大体、こんな感じの構造になっています。

ちなみにもっと簡素化していきますので、ご安心下さい。

続いて、もう少し横幅について理解を深めて頂く為に、横幅を広げたり狭くする際に使用する、アメブロのCSSと実際に個々が使用しているカラムとの連動性について少し説明させて頂こうと思います。

まず、アメブロの幅を変える際に出てくる属性にcolumnというものがあります。これは、実際に使用しているカラムとの連動を表しています。

次の画像をご覧下さい。

アメブロの幅を変える際は、上の画像のように自分が使用しているカラムによって.columnの記載がABCDEと異なりますので、始めにこれを覚えておくとカスタマイズしやすいかと思います。

一応、もう少し説明させて頂くと、

• 2カラム・メニュー左
  .columnA
• 2カラム・メニュー右
  .columnB
• 3カラム・右ワイドメニュー
  .columnC
• 3カラム・左ワイドメニュー
  .columnD
• 3カラム・右メニュー
  .columnE

となっていますので、カスタマイズする場合は、その部分だけ書き換えれば横幅の変更は可能です。

以下、アメブロの横幅を調整するCSSです。コピペしてCSSの一番下に貼り付ければ、横幅の修正が可能です。

CSSの編集のやり方については、『CSSテンプレートでアメブロをカスタマイズする方法』で説明しています。

上記CSSで自分の使用しているカラムの横幅（数字pxの部分）を調整してからCSSの一番下にコピペして貼り付ければ、横幅調整が可能です。

当サイトの場合は、『2カラム・右メニュー』で.columnBに該当するので、その部分だけ以下のように書き換えています。

2カラムの場合、たったこれだけの記述だけでも横幅の調整が実現できます。

ちなみにわかりやすいように

も記述しましたが、これは右サイドメニュー部分の横幅で、当サイトの場合、元のCSSからの変更がないので本来は不要ですが、一応、記述しておきました。

ちなみにカラム間の隙間は『940px（全体）-620px（メイン（記事）カラム）-300px（サイドメニュー）＝20px（カラム間の隙間）』という感じに表示されると思います。（2カラム・メニュー右でしか試していませんが表示されています。）

横幅の調整は広告がらみのカスタマイズで、横幅を狭くすると広告が切れてしまい規約違反の問題も起きてくるかもしれませんので、注意してカスタマイズしてみて下さい。

このページでは、アメブロカスタマイズにあたり、まず始めに行わなくてはならない、CSSの編集ができるテンプレートの選び方について説明しています。

それでは画像を使って簡単に説明させて頂こうと思います。画像はクリックすると大きくなりますので、見づらかったら大きくして見て下さい。

これでCSSの編集ができるテンプレートに切り替わりましたので、CSSを使ってアメブロをカスタマイズできるようになります。

ついでに、どこでCSSをカスタマイズするのかの説明もしておきます。

以上の方法でCSSを使ってアメブロのデザインをカスタマイズすることができるようになります。

そこで、これから自分でCSSを書いていく上で、凄く為になるツールを紹介しておきます。

CSS（スタイルシート）検証サービスでCSSを最終チェックする

• W3C CSS 検証サービス

使い方は、URLに調べたいページのURLを記述するか、直接入力にして直接CSSをコピペするか、アップロードでCSSを読み込むなどしてから「検証する」のボタンを押すだけで、簡単に該当CSSの間違っている部分を指摘してくれます。

検証したら間違っている部分を修正をしていきます。直し方がわからない場合は、そのことについてネット検索をすれば、説明してくれているサイトがみつかるので、そういったサイトも参考にしながらCSSを修正して下さい。そうすることにより、自然とCSSの使い方についての知識が深まっていきます。

また、このサービスを使うことにより、正しいCSSをマスターすることができます。正しいCSSを使うことは、多くの人が（多くのブラウザで）閲覧しやすいホームページ環境を作る手助けとなるので、取り組むことをお奨めします。

このように、ホームページ運営やweb制作をする人にとって、このツールは、CSSを勉強する面においても正しいCSS文法を記述する面においても非常に役立つツールだといえますので、ブログをカスタマイズした後やCSSの記述間違いを探す際には、ぜひ活用させて頂きましょう。

主要ブラウザでデザインが崩れていないか表示確認

• スクリーンショット.jp

ホームページは、使っているパソコンのブラウザ環境などによって表示のされ方が違ってきます。例えば、最も多く使われているインターネットエクスプローラー（IE）だけをみてもIE6とIE7で同じホームページを表示した時にIE7ではちゃんと表示されているページがIE6で見てみたら右メニューが下にずれてしまっているなんてことはよくある話だと思います。

こういったデザインの崩れは、スタイルシート（CSS）の記述ミスが原因の場合がほとんどです。

そんなデザインの崩れを確認するには、それぞれのブラウザをインストールしてどのように表示されるか確認しなければならないのですが、こちらのツールを使えば、様々な主要ブラウザのスクリーンショットを取ることができます。

しかしながら、お試し期間中は、無料でいくつかのブラウザのスクリーンショットが撮れたのですが、お試し期間が終わり有料になってしまったのが大変残念です。

無料で主要ブラウザの表示確認をする

無料で主要ブラウザの表示確認をしたいという方の為に最低でもこれらは確認しておいた方が良いというブラウザのダウンロード先をリンクしておきますので、各自インストールして確認してみて下さい。

• Internet Explorer（インターネットエクスプローラ）
  最も利用者が多いブラウザです。
• Firefox
  IEと同じく利用者の多いブラウザです。
• Safari
  アップル社のブラウザです。
• Opera
  たまに使っている人がいます。
• Google Chrome
  GoogleのWebブラウザーです。

複数のブラウザを紹介しましたが、実際のところInternet ExplorerとFirefoxを利用しているユーザーが大半を占めているので、その他のブラウザに関しては、それほど気にする必要はないかも知れません。

要素（タグ） or クラスセレクタ or IDセレクタ{属性:値;}

の属性と値の部分です。ここの記述方法がわからないとCSSを始められません。

ここでは、その属性と値について私の使っている必要最低限のCSS属性と値を属性名、備考、記述例で簡単に紹介させて頂いておりますので、コピペして値を変更して使ってみて下さい。

ここに記載しているスタイルシートの記述は、あくまでも例文ですので、使い方は様々です。

CSS＋属性名で検索すれば、詳しい説明をしてくれている方がいらっしゃると思いますので、使い方を詳しく知りたい方は、各自調べてみて下さい。

必要最低限のCSS（スタイルシート）属性と値辞典

• 属性名　⇒　備考
  { 記述例 }

文字

• color　⇒　文字の色
  { color : #000000 ; }
• font-size　⇒　文字のサイズ
  { font-size : 12px ; }
• font-family　⇒　優先表示する書式
  { font-family : "Verdana", "Tahoma", "ＭＳ ゴシック" ; }
• text-align　⇒　文字の左右配置
  { text-align : left ; }
  ※left（左揃え）・center（中揃え）・right（右揃え）
• text-align　⇒　文字の上下配置
  { vertical-align : top ; }
  ※top（上揃え）・middle（中揃え）・bottom（下揃え）

幅・余白・行間・縦横の配置

• width　⇒　幅
  { width : 940px ; }
• margin　⇒　外側の余白
  { margin : 10px 5px 10px 5px ; }　（上・右・下・左 の順番）
  または
  {
  margin-top : 10px ;
  margin-left : 5px ;
  margin-right : 5px ;
  margin-bottom : 10px ;
  }
• padding　⇒　内側の余白
  { padding : 10px 5px 10px 5px ; }　（上・右・下・左 の順番）
  または
  {
  padding-top : 10px;
  padding-left : 5px;
  padding-right : 5px;
  padding-bottom : 10px;
  } 
• line-height　⇒　行間
  { line-height : 120% ; }

ボーダー（枠線）

• border　⇒　ボーダー
  { border : 1px solid #000000 ; }　（4辺を同じに表示）
  または上・右・左・下を別のボーダーにする場合は、それぞれを以下のように指定することもできます。
  {
  border-top : 1px solid #000000 ;
  border-right : 1px double #0000ff ;
  border-left : 1px dotted #ff0000 ;
  border-bottom : 1px dashed #ff00ff ;
  }
  
  ※1pxはボーダーの太さ、solid・double・dotted・dashedはボーダーの種類、#000000等はボーダーの色を指定しています。これらを変更することにより、様々なボーダーが表示できるので、どんなボーダーが表示されるか試してみて下さい。当サイトは、これらでページの枠組みを作っています。

背景

• background-color　⇒　背景の色
  { background-color : #000000 ; }
• background-image　⇒　背景画像
  { background-image : url('http://画像のURL') ; } 

回り込み

• float　⇒　回り込み
  { float : left ; }
  ※left（左回りこみ）・right（右回り込み） 
• float　⇒　回り込み解除
  { clear : both ; }
  ※回り込みの解除を行なわないとデザインが崩れる原因となります。　.space{clear: both;}　というスタイルをCSSに記述し、回り込みを行なった後は必ず、　<br class="space" />　などでスタイルを呼びだし回り込みの解除行なって下さい。 

しかし、CSSといってもHTMLと同じく全てを覚えるとなるとそれなりの勉強が必要となってきますので、当サイトでは、HTMLと同じく私が使っている範囲でCSSの説明をさせて頂きますので、予めご了承下さい。

CSSは、

要素（タグ） or クラスセレクタ or IDセレクタ{属性:値;}

という基本的なルールに従って記述する必要があります。

複数のスタイルを定義する場合は、

要素（タグ） or クラスセレクタ or IDセレクタ{属性:値; 属性:値; 属性:値;}

という感じで増やしていきます。

詳しい例文は、要素（タグ）、クラスセレクタ、IDセレクタの違いの説明と一緒に紹介させて頂きます。

要素（タグ）・クラスセレクタ・IDセレクタの違い

• 要素（タグ）
  
  これはHTMLのタグを定義する場合に使います。私の使うHTMLタグといえば、bodyタグやpタグ、divタグなどがありますが、そういったタグを同じデザインにしたい場合にこれを使います。
  例えばbodyタグで同じ書式にしたい場合などの記述方法は、
  
  
  body{
  color:#000000;
  font-size:12px;
  font-family:"Verdana","Tahoma","ＭＳ ゴシック";
  }
  
  のような感じになります。
  これは文字の色が#000000で文字サイズが12pxで表示されるフォントの種類がVerdana＞Tahoma＞ＭＳ ゴシックで順番に優先的に表示するという命令を出しています。（このようにいくつものフォントを定義することには、多くのPCの環境でデザインを崩さないという意図があります。）
  ここではbodyタグを例に挙げましたが、bodyタグだけではなく、pタグやdivタグなども同じスタイルを用いたい場合には、,（コンマ）で区切って記述すれば指定した全てのタグを同じデザインにすることもできます。例えばこんな感じです。
  
  
  body,p,div{
  color:#000000;
  font-size:12px;
  font-family:"Verdana","Tahoma","ＭＳ ゴシック";
  }
  
  と記述するとbodyタグ、pタグ、divタグのそれぞれのタグで同じスタイルが適用されます。
  このように　{　の前にタグの名前を記述するとHTMLで使っているタグにスタイルを適用することができます。ちなみに私の場合は、要素（タグ）の定義はbody、a、h1、h2、h3、hr、ul、ol、li、imgぐらいしか行なっていません。
  
  
• クラスセレクタ
  
  タグにスタイルシートを定義してしまうとHTMLでそのタグを使った際に、毎回同じ表示になってしまうという不便が生じます。そこでそうならないためにクラスセレクタと使います。使い方は、自分で決めた名前の前に.（ピリオド）を付けるだけです。
  例えばmenuという名前でクラスセレクタを定義する場合は、こんな感じになります。
  
  
  .menu{
  font-size:14px;
  }
  
  そうするとmenuを指定した部分のタグだけ文字サイズを14pxにすることができます。
  一応、クラスセレクタを呼び出すHTMLの記述方法をdivタグを例に挙げておくと、
  
  
  <div class="manu">ここが14pxの文字サイズになる</div>
  
  という感じになります。これはHTMLリファレンスでも度々説明しているので、必ずそちらも合わせてご覧下さい。
  このクラスセレクタが最も自由度が高いので一番使うことが多いと思います。
  
  
• IDセレクタ
  
  IDセレクタは、基本的にクラスセレクタと使い方はほとんど変わりませんが、自分で決めた名前の前は　#　になります。また、クラスセレクタとは違いHTMLで一度しか同じidを使えません。そんな使い勝手からページデザインの外枠を作る際などに用いることが多いです。
  使い方はこんな感じです。
  例えば、headerという名前でIDセレクタを定義する場合には、
  
  
  #header {
  width: 800px;
  }
  
  という感じになります。これはheaderを指定した部分のタグだけ横幅を800pxにするという命令を出しています。
  一応、IDセレクタを呼び出すHTMLの記述方法をdivタグを例にあげて書いておくと、
  
  
  <div id="header">ここの間は800pxの横幅になる</div>
  
  という感じです。これもHTMLリファレンスでも度々説明しているので、必ずそちらも合わせてご覧下さい。
  

スタイルシートについての詳しい書き方となるともっと多くの情報が必要だと思いますが、私の使っているCSSとなると正直このくらいです。しかしながら、HTMLと同様、これだけの知識で問題なくブログカスタマイズを行なえているというのも事実です。スタイルシートについてもっと詳しく知りたい方は、『CSS 書き方』や『スタイルシート 書き方』などで検索して自分で調べてみて下さい。

これについては必要最低限のHTML属性辞典でも説明していますが、もう一度、divタグにid属性を指定してスタイルシートを呼び出す方法を例に挙げて簡単に説明させて頂きます。

<div id="スタイル名">～</div>

というようにHTMLタグのdivの開始タグにid="スタイル名"を記述すると、指定したスタイルを呼び出すことができます。

例えばheaderという名前のスタイルを呼び出す場合はこんな感じです。

<div id="header">～</div>

しかし、このHTMLの記述だけではスタイルが指定されていないので、記述してもしなくても変わりがありません。そこでCSS（スタイルシート）にこのように記述してあげます。

#header {
width: 800px;
text-align: left;
background-color : #ffffff;
}

そうするとdivタグの幅を800pxにして、中に書いた文字を左寄せにし、尚且つ、背景の色を白にするというスタイルシートの命令が呼び出されページを表示する際にそのようなデザインで表示してくれるようになります。

これはHTMLとCSSを関連付けた使い方の例の一部です。

私がスタイルシートを呼び出す際に使うHTML属性は、id属性の他にclass属性がありますが、使い方が少しだけ異なりますので、それについての説明やその他の詳しい情報を知るために必ず、必要最低限のHTML属性辞典というページもこのページと合わせて読んで下さい。また、HTMLの記述については、HTMLリファレンスをご覧下さい。

最近は、スタイルシートを外部ファイル化してそこからスタイルを呼び出すという方法が多く用いられ、ほとんどのブログサービスでもこの方法が使われています。

私もスタイルシートは外部ファイルにしているので、当サイトでの説明も外部ファイル化したスタイルシートの使い方になっています。

基本的にブログサービスに関しましては、既にHTMLのヘッダーにスタイルシートを外部ファイル化する記述がありますので、それについてカスタマイズする必要は特にないのですが、一応、どういった仕組みになっているかということだけ説明させて頂こうと思います。

まずはこちらのHTMLのヘッダーの例文をご覧下さい。

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>ページのタイトル</title>
<link rel="stylesheet" href="外部スタイルシートのURL.css" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="RSSのURL.xml" />

</head>

<body>

ここが実際に視覚的に出力される記述

</body>

</html>

これはMARUTA（マルタ）ブログのHTMLソースを簡素化したものですが、このHTMLの<head>～</head>内に注目して下さい。

すると

<link rel="stylesheet" href="外部スタイルシートのURL.css" type="text/css" />

という記述があるのがわかると思います。

これがスタイルシートを外部ファイル化する記述で、ほとんどのブログサービスのHTMLテンプレートにこの記述があることが確認して頂けると思います。（※全てのブログサービスが外部ファイル化しているテンプレートを使っているとは限りません。）

このタグの『外部スタイルシートのURL.css』という部分に記載されているURLが、実際にスタイルシートが置かれているURLで、ここにあるスタイルシートを書き換えるだけで、簡単にデザインの変更が行なえるという優れた面を持っています。（※無料ブログサービスを利用している場合は、管理画面のテンプレート編集でCSS（スタイルシート）を書き換えるだけで自動的にこちらのスタイルシートが書き換わります。）

ブログサービスを使っていない方の為に一応、外部ファイル化の方法を簡単にまとめておきます。

これで外部にあるスタイルを呼び出すことができます。（※無料ブログをお使いの方は、始めからHTMLのヘッダーにこの記述がありますので特にカスタマイズは不要です。）

後は、HTMLと外部スタイルシートを関連付けるようにHTMLとCSSの記述を書き直せばデザインの変更が行なえるので、続いてはそれについての説明をさせて頂きます。