旧CSS：ヘッダー部の背景色や文字色を変える方法

アメブロの旧CSS編集用デザインで、ヘッダー部の背景色や文字色を変えるカスタマイズ方法です。

新CSS編集用デザイン向けはこちら

アメブロの新CSS編集用デザインで、CSSを編集してヘッダー部の背景色や文字色を好みの色に変更するカスタマイズ方法を解説します。

CSSを編集しますので、やり方がわからない場合は、先に手順を確認しておいて下さい。

CSSを編集する手順：カスタマイズで必須の基本操作です！

CSS編集用デザインをベースにアメブロをカスタマイズするためにCSSを編集するときの手順について解説します。アメブロのカスタマイズ時には必須で頻繁に行う作業ですのでマスターしておくことをお勧めします。

色を変更できる場所

当記事で紹介する方法で色を変えることができるのは、

• ブログタイトルの文字
• ブログ説明文の文字
• ヘッダー部の背景（画面幅全体）
• ヘッダー部の背景（コンテンツの幅）

の4箇所です。

記事冒頭の画像を参考にして頂ければと思います。

ヘッダー部の背景色や文字色を変える

それでは、以下、カスタマイズ方法です。

以下のようなコードをCSSの末尾に追加して下さい。

/************************************************
  旧CSS：ヘッダーの背景色・文字色を変更する
************************************************/
.skinHeaderFrame {
  background-color: #111144; /* ヘッダー部の背景（画面幅全体）*/
}
.skinHeaderArea {
  background-color: #333366; /* ヘッダー部の背景（コンテンツの幅）*/
}
.skinTitle, .skinTitle:visited, .skinTitle:hover, .skinTitle:focus {
  color: #f0f0f0; /* ブログタイトルの文字 */
}
.skinDescription {
  color: #cccc99; /* ブログ説明文の文字 */
}

なお、旧CSS編集用デザインでは、色を変えただけだと余白が無く見栄えが悪いことがあるので、気になる場合は、以下のようなコードで調整すると改善するかもしれません。

/************************************************
  旧CSS：ヘッダー内部の余白調整
************************************************/
.skinTitleArea, .skinDescriptionArea {
  padding: 0 20px; /* ブログタイトルや説明文の余白 */
}
.skinContentsArea {
  padding-top: 20px; /* ヘッダー下（コンテンツの最上部）の余白 */
}

色の設定をする

CSSにコードを追加したら、コード内のコメントを参考に、色の変更を行って下さい（仮の色を設定済みです）。

色コードについては、こちらのサイトなどが参考になると思います。

なお、初期状態から色の変更をする必要のない箇所は、設定を削除しても大丈夫です。

色の設定ができたら、編集内容を保存・確認して完了です。

まとめ

以上、アメブロの旧CSS編集用デザインで、ヘッダー部の「背景色」「ブログタイトルの文字色」「ブログ説明文の文字色」を変更するカスタマイズ方法をご紹介しました。

まとめると、

1. 新旧CSSの適切な方のコードをCSSの末尾にコピペ
2. コード内の色設定を変更する
3. 保存して確認する

という手順になります。

よろしければ参考にして下さい。