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

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

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

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

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

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

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

色を変更できる場所

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

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

の4箇所です。

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

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

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

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

/************************************************
  新CSS：ヘッダーの背景色・文字色を変更する
************************************************/
.skin-bgHeader {
  background-color: #111144; /* ヘッダー部の背景（画面幅全体）*/
}
.skin-bgHeader a {
  background-color: #333366; /* ヘッダー部の背景（コンテンツの幅）*/
}
.skin-blogMainTitle {
  color: #f0f0f0; /* ブログタイトルの文字 */
}
.skin-blogSubTitle {
  color: #cccc99; /* ブログ説明文の文字 */
}

色の設定をする

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

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

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

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

まとめ

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

まとめると、

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

という手順になります。

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