【アメブロカスタマイズ】のヘッダー部の背景色や文字色を変える方法

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

CSSの編集をしますので、やり方がわからない場合は先にチェックしておいて下さい。

CSSを編集してアメブロをカスタマイズをする手順

アメブロをカスタマイズするための専用のデザイン「CSS編集用デザイン」に用意されている「ブログデザインCSS」を編集してアメブロをカスタマイズする手順について説明します。

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

ヘッダー部の背景色を変えるには、CSSの末尾に以下のようなコードを追加して下さい。

/* ヘッダー部の背景色 */
.skin-bgHeader {
  background-color: 【背景色】;
}

【背景色】には、例えば「#ff0000」のようなカラーコードを設定し、以下のようになります。

/* ヘッダー部の背景色 */
.skin-bgHeader {
  background-color: #ff0000;
}

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

ブログタイトルの文字色を変える

ブログタイトルの文字色を変えるには、CSSの末尾に以下のようなコードを追加して下さい。

/* ブログタイトルの文字色 */
.skin-blogMainTitle {
  color: 【ブログタイトルの文字色】;
}

【ブログタイトルの文字色】の部分には、ヘッダー部の背景と同様、カラーコードを設定します。

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

ブログ説明文の文字色を変えるには、CSSの末尾に以下のようなコードを追加して下さい。

/* ブログ説明文の文字色 */
.skin-blogSubTitle {
  color: 【ブログ説明文の文字色】;
}

【ブログ説明文の文字色】の部分にも、やはり、カラーコードを設定します。

一例を紹介

例えば、記事冒頭の画像のようにしようと思うと以下のような設定になります。

/* ヘッダー部の背景色 */
.skin-bgHeader {
  background-color: #ff9999;
}
/* ブログタイトルの文字色 */
.skin-blogMainTitle {
  color: #ffffff;
}
/* ブログ説明文の文字色 */
.skin-blogSubTitle {
  color: #cc0000;
}

まとめ

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

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