ブログでは、ページ全体の構成は自動生成なので、サイトのカスタマイズは主にスタイルシートを変更することになります。
デフォルトのCSSでも、見慣れないうちはその長さに面食らいますが 記述内容は余白の指定などがほとんどで難しいものではありません。
修正したり加筆したりして、お好みのブログに仕上げましょう。
ホームページやブログなどで表を表示させるには、TABLEタグやTR、 TDタグなどを使用しますが、そのままでは見づらいのでALIGN属性やPADDINGを 指定して見映えを良くする必要があることもしばしばです。
しかし、セルの一つ一つにこれらの属性やスタイルを記述するのには 手間がかかりますし、変更したいときも大変です。
そんなときは、スタイルシート（CSS）でまとめて設定するのがおすすめです。
例えば、こんなテーブルは文字と枠がくっついてしまって少し見づらく感じます。
| 番号 | 名称 | 主な働き |
|---|---|---|
| 1 | フェニルアラニン | 精神を安定させてストレスを緩和 |
| 2 | スレオニン | 成長の促進、組織の修復など |
| 3 | ヒスチジン | 食欲を抑制し、エネルギーの代謝を活発に |
そこで、スタイルシートを使用して少し体裁を整えてみます。
| 番号 | 名称 | 主な働き |
|---|---|---|
| 1 | フェニルアラニン | 精神を安定させてストレスを緩和 |
| 2 | スレオニン | 成長の促進、組織の修復など |
| 3 | ヒスチジン | 食欲を抑制し、エネルギーの代謝を活発に |
このサンプルのソースは、次のようになっています。
ホームページやブログなどのウェブサイトで、同一のスタイルを 何度も指定したいときに便利な スタイルシート(CSS)ですが、各コンテンツで 文字色や文字の大きさなど、さまざまな設定をしていると、スタイルシートも長く煩雑なものになりがちです。
こんなとき、スタイルを指定する際に、共通する部分は半角カンマで区切ってまとめて記述することができます。
このサンプルでは、共通部分（段落の幅と、文字の色および余白）をまとめて記述しています。このソースを表示させると、次のようになります。
ブログでは、ページ全体の構成は自動生成なので、サイトのカスタマイズは主にスタイルシートを変更することになります。
デフォルトのCSSでも、見慣れないうちはその長さに面食らいますが、さらにさまざまな場面で文字の大きさや色、表示位置などを好みに合わせようとすると、IDやCLASSの指定も思いがけなく増えて、名前も長くなりがちです。
そんなときには、IDやクラスに親子関係を持たせて管理するのが便利です。
親子関係に当たるCLASSのスタイルシートの記述は 次のようになります。
親のクラス（またはID）と子のクラス（またはID）の間には、半角スペースを入れてください。
使用例です。
ホームページやブログなどのウェブサイトで 見出しタグ（H1～H6）で囲まれた文字は、文章中の重要な部分として扱われますから、ページタイトルや記事タイトル、その他重要な語句はレベルの高い見出しタグを使用したいところですが、デフォルトのままでは異様に文字が大きかったり、不必要に上下に余白がとられてしまったりしてページのデザインを崩してしまいがちです。
そんな場合は、見出しタグにスタイルを指定して使いましょう。見出しはH１～H６までありますので、ある程度用途を決めておくとよいかもしれません。見出しタグはブロックタグですので、<p>タグや<div>タグとほとんど同じようにスタイル指定できます。
上記サンプルのソースは、次のようになります。
ホームページやブログなどのウェブサイトで 他のページにジャンプするための リンク文字のスタイルは、一括で指定する場合
という記述になりますが、未リンク、訪問済み、リンク中、マウスが重なったときのリンク文字のスタイルをそれぞれ指定することができます。
| a : link | { スタイル } | 未訪問リンク文字に対して |
| a : visited | { スタイル } | 訪問済みリンク文字に対して |
| a : hover | { スタイル } | リンク文字にマウスが重なったとき |
| a : active | { スタイル } | リンク中文字に対して |
という記述になります。
例えば、
ホームページやブログなどのウェブサイトに、他ページへのジャンプするためのアンカータグを挿入する場合、リンク文字のスタイル指定することができます。一括で指定する場合は、
という記述になります。一般の文字の色や文字修飾を指定していても、リンク文字のスタイル指定がないと リンク文字だけはブラウザ依存のスタイル（多くの場合、太い青文字で下線付き）で表示されてしまうので、ページの雰囲気を統一したい場合は、リンク文字のスタイル指定をしたほうが良いでしょう。
例えば、
タグに直接スタイル指定することができます。
という記述になります。複数の指定をする場合は、；（セミコロン）で区切って記述します。見やすいように改行してもOKです。この方法で指定した場合、id や class の指定をしなくてもページで使用されるそのタグすべてが 指定したスタイルになります。
例えば、
というふうに指定すると、そのページの<p>タグを使用した段落すべてが 文字の大きさ 12ピクセル、文字色が青になり、そのページのすべてのテーブルの枠線が太さ 2ピクセル、グレーの実線となります。
<link>タグを使って、外部からスタイルシートファイルを読み込んで、ページのスタイルを指定することができます。
という形式で、外部ファイルを読み込みます。読み込まれるスタイルシートファイルの拡張子は、『 .css 』になります。メモ帳などのテキストエディタに定義内容を入力し、拡張子を『 .css 』として保存してください。
外部ファイルを読み込む場合、スタイルシートファイルに
<style type="text/css">
<!--
などの宣言は不要です。定義内容だけを列挙してください。
こちらのサンプルページは、 背景画像や色、余白、文字の大きさなどすべて外部のスタイルシートファイルを読み込んで指定しています。
上記ページのスタイルシートファイルはこちらです。（そのままのリンクでは見づらいので、同一の内容をテキストファイルとして保存したものです。
ブログでは、あらかじめ使用するテンプレートにあわせたスタイルシートが用意されており、その外部ファイルを参照しています。
それとは別にスタイルシートを用意して記事欄で読み込むこともできますが、同一の id や class を使用して衝突することにもなりかねませんので、テンプレートが読み込んでいるスタイルシートに追記したほうが良いでしょう。スタイルシートは、ブログの管理画面から編集できます。
ホームページやブログなどのウェブサイトで、ページ内で一回だけスタイルを使用する場合は、スタイルシートで IDを指定する方法があります。
という形式で、スタイルに名前を付けます。複数の指定をする場合は、；（セミコロン）で区切って記述します。見やすいように改行してもOKです。タグの記述は、
というように、どのスタイルを適用するのか id="名前" で指定します。
ホームページやブログなどのウェブサイトで、何度も同一のスタイル（文字の大きさや色など）を指定したい場合は、スタイルに名前をつけて、タグにスタイル指定すると便利です。
という形式になります。複数の指定をする場合は、；（セミコロン）で区切って記述します。見やすいように改行してもOKです。タグの記述は、
というように、どのスタイルを適用するのか class="名前" で指定します。
使用例です。
ホームページやブログなどのウェブサイトで文章などを表示する際に、 一時的にスタイルシートを利用して 文字や段落の色や大きさなどを変えることができます。タグ内に style属性で適用するスタイルを記述します。
複数の指定をしたい場合は、；（セミコロン）で区切ります。
サンプルソースです。
コンピュータとインターネット > データ形式 > HTML > リファレンス