Blogger Labo：【Tokyo】ヘッダーのカスタマイズ

このページでは「Tokyo」のヘッダーのカスタマイズ方法を説明する。

このカスタマイズを始める前に「テンプレートのバックアップ」は お約束として必ず実行しよう。

※初心者の方は「カスタマイズ基礎知識」などの「初心者向け記事」を参考にしてみてください


header（ヘッダーの設定）について


CSSの内容


/****************************************
          header　[ヘッダー]
*****************************************/

 ヘッダー全体 

#header{
background-color: $(backgroundcolor);　[ヘッダー背景色]
letter-spacing: 0.05em;　[ヘッダーの文字間隔]
border-bottom: 1px solid $(linecolor);　[ヘッダー下線]
color: $(titlecolor);　[ヘッダー文字色]
}

 ヘッダーの内側 

#header-inner{
padding-top: 3em;　[上部余白]
padding-bottom: 3em;　[下部余白]
background-repeat: no-repeat;　[背景の繰り返し設定]
background-position: center;　[背景位置の設定]
background-size: cover;　[背景のサイズ設定]
}

 ブログタイトル 

#header h3{
font-size: 300%;　[ブログタイトルのフォントサイズ]
line-height: 1.1;　[ブログタイトルの行の高さ]
}
#header h3 a{
color: inherit;　[ブログタイトルの文字色]
}

 ブログの説明 

#header .descriptionwrapper{
margin-top: 0.5em;　[ブログタイトルとブログの説明の間隔]
}

上記が Tokyoのヘッダーを設定するCSSに説明を加えたもの（必要な部分のみ）。

基本的には説明の部分の値を変えていけば自分好みに変更することができる。

ブログタイトルを中央揃えにする


#header h3{
font-size: 300%;
line-height: 1.1;
text-align: center;
}

上記のようにタイトル設定に「text-align: center;」を追記する

ブログの説明の文字サイズを変える


#header .descriptionwrapper{
margin-top: 0.5em;
font-size: 14px;
}

上記のようにブログの説明設定に「font-size: 値;」を追記する

ブログの説明の文字色を変える


#header .descriptionwrapper{
margin-top: 0.5em;
color: blue;
}

上記のようにブログの説明設定に「color: 値;」を追記する

備考


ブログタイトルの画像化について


Blogger Labo：【Tokyo】ヘッダーのカスタマイズ

「Tokyo」の場合、Bloggerの管理画面からヘッダーに画像を設置すると どのような設定でも背景画像になってしまう。

なので、Bloggerの管理画面からブログタイトルを画像にすることは そのままでは不可能。

※レイアウトから画像を設置すると「タイトルと説明の背後」と同じ設定になる

その他の変更について


その他の変更についてはCSSのプロパティに関する記事を参考にしてみてほしい。

・Bloggerカスタマイズでよく使うプロパティ集
・Bloggerカスタマイズのためのプロパティ一覧表