TypePadのレイアウト構造

TypePadは、タイトルが表示されるヘッダーや、記事本文が表示される部分など、複数のパーツによってレイアウトされています。これらのパーツ には、IDやクラスと呼ばれる識別子がつけられています。カスタムCSSで、IDあるいはクラスを指定することで、カスタマイズをおこなうことが可能で す。

それでは具体的に、どのようなID、クラスがつけられているのかを見てみましょう。以下の画像のように、TypePadのページは、複数のパーツの入れ子構造になっています。外側にあるものがページ全体の背景で、記事などが一番内側になります。

IDとクラスの指定の仕方

では、それぞれのパーツをカスタムCSSで指定するには、どうしたらよいのでしょうか？対象がIDなのかクラスなのかによって、カスタムCSSの記述方法が異なります。まずは、カスタムCSSの編集画面を開きます。

「ブログ」　>>　「デザイン」　>>　「カスタムCSSを編集」

カスタムCSSでの指定方法は、以下の通りです。

• IDの場合：　「 #ID名 {} 」で指定　
• クラスの場合：　「 .クラス名{} で指定 」

ただ、一番外側の背景だけは body {} という要素で指定します。以下にサンプルCSS では、各パーツの背景色を指定しています。もちろん、このすべてを指定する必要は無く、自分が変えたい部分だけを指定すればOKです。

また、各パーツがどのように画面上でレイアウトされているかは、選択しているテーマによって異なります。いくつかのパーツを違う色で指定しながら、実際にブログがどのようにかわるのか、確認しながらカスタマイズをするとよいでしょう。

body {
  background: #1A2FA6;
}

#container {
  background: #2541BE;
}

#container-inner {
  background: #3754D4;
}

#pagebody {
  background: #4A70EF;
}

#pagebody-inner {
  background: #6488FF;
}

#alpha {
  background: #7297FF;
}

#alpha-inner {
  background: #99AAFF;
}

.entry-header {
  background: #BBCCFF;
}

.entry-content {
  background: #CCDDFF;
}

.entry-body {
  background: #FFFFFF;
}