BloggerカスタマイズのためのCSSの基礎知識を初心者目線でまとめてみました。

テンプレート編集の方法もよくわからないという方は、先に「こちら」のページを参考にしてみてください。

CSSとは？

CSS（シー エス エス、スタイルシート）とは、ウェブページのスタイルを指定する言語で、HTMLと組み合わせて使用される。Bloggerでは主にブログ全体のスタイルの指定に用いられ「記事ページ」「固定ページ」を個別に装飾することもできる。

HTMLとの違いは「ページ全体」あるいは「サイト全体」のスタイルをまとめて指定できることで、これを使用することでウェブページのスタイルを一度に変更するときなどの手間が格段に減るといったメリットが得られる。

書き方は「セレクタ{プロパティ:値;}」といった形になっており、セレクタは「スタイルを適応する対象」で、プロパティは「適応するスタイルの種類」だと思ってもらえれば良い。

BloggerでCSSを使うことになるシチュエーションは「テンプレート」と「ページ」をカスタマイズするときで、テンプレートの場合は「<b:skin>～</b:skin>」に、ページの場合はHTMLモードで書き込んだ「<style>～</style>」の間に記入して使う。

なお、CSSの主な記入方法には以下のようなものがある


※行数が少なくて済むが、プロパティが複数あると見づらい


※行数が多くなるが、プロパティが複数あっても見やすい（オススメの書き方）

セレクタとは？

セレクタとは「スタイルを適応する対象」のことで、「h1（見出し）」など要素全体を指定するものや、HTMLで指定した「class（クラス）」「id（アイディー）」を対象にすることもある。

テンプレートのカスタマイズでは使用しているテンプレートに予め「class」や「id」が割り振られているので、その部分をセレクタとして指定してやれば良い（対象部分については関連記事の内容を参照）。

また、「class」や「id」を自分で指定して、その部分をセレクタとして対象にすることも可能である。なお、セレクタ自体の種類は多彩なので、詳しく知りたいのであれば下記の参考リンクを参照してほしい。

関連記事：【Blogger】シンプルテンプレートをCSSでカスタマイズする
参考リンク：セレクタの種類（HTMLリファレンス）

Class（クラス）

セレクタにおける「class」とは要素に対してクラス名（属性）を与えることで、任意の名前を設定することができる。

例えば、「サンプル」という文章に「sample1」というクラス名を指定したいときは以下のようなHTMLを指定すればよい。

<div class="sample1">サンプル</div>

このようにしてclassを指定しておくと、後に指定したclassをひとまとめにして装飾することが可能になる。

また、classを指定できるHTMLタグは多数あるが、個人的には「div要素（範囲の指定）」が一番使いやすいと思っている。

なお、classセレクタを対象とするCSSの書き方は「要素.クラス名 {プロパティ}」となる。

参考リンク：classセレクタ（HTMLリファレンス）

ID（アイディー）

セレクタにおける「id」とは要素に対してid名（属性）を与えることで、任意の名前を設定することができる。

使い方についてはclassと似ているが、classが「1ページ中に何度でも使える」のに対し、idは「1ページ中に1度しか使えない」という特性がある。なので、自分でセレクタを指定する場合はclassを指定してやれば良い。

Bloggerにおいてidセレクタを使ってCSSを編集するシチュエーションは、テンプレートに元々id名が指定されている場合くらいである（Vaster2の場合は「header-inner」というidが指定されている）。

なお、idセレクタを対象とするCSSの書き方は「#id名 {プロパティ名:値;}」となる。

参考リンク：スタイルシートのclassとidの違いと使い分け（All About）

プロパティとは？

プロパティとは「適応するスタイルの種類」のことで、文字装飾で言えば「大きさ」「太さ」「フォント」「色」「背景色」などを指定できたりする。

カテゴリに分ければ、「文字色」「背景」「フォント」「テキスト」「幅・高さ」「内外の余白」「線」「配置」「テーブル」「リスト」「引用符」などなど書ききれないほどあり、組み合わせによって実現できる表現も多彩である。

書き方は「プロパティ名:値;」といった形で、フォントサイズで例えるならば「font-size:20px;」といった形になる。この辺は後述する内容を参考にしてほしい。

関連記事：【CSS】Bloggerカスタマイズでよく使うプロパティ集
参考リンク：CSSプロパティ（HTMLリファレンス）

コメントについて

CSSにおけるコメントとはブラウザに無視される「反映されない部分」のことで、「コードの説明」を付ける場合や「一時的に無効にしたいコード」がある場合などに用いられる。

方法は反映したくない部分を「/*」と「*/」で囲めばよく、複数行にわたって指定することも可能である。なお、コメントを付けることで検索が容易になるので、初心者の場合は頻繁に付けておくことをオススメする。

CSSの記入例

例えば、シンプルテンプレートにて記事ページの文章を指定するCSSを設定したい場合は下記のように記入する。