アメブロカスタマイズ

アメブロの背景色を設定する方法

ブログの背景を変えると、イメージが一気に変わりますよね。

色を変えるだけでも印象は大きく変わりますし、背景に画像を入れるとさらに印象は変わります。

今回はアメブロの背景の設定方法でも、色コードを変えるだけでできる色変更についてお伝えしていきます。

アメブロ 背景の設定方法

背景を設定する前に、カスタマイズができるようにこちらの設定にしておきましょう。

 

ヘッダー下の背景色

最初は下記のような設定になっています。

/* コンテンツ背景、ヘッダー以下の背景色 */
skin-blogBodyInner {
background-color: #ffffff;
}

こちらを↓下記↓のように変更します。

/* (1-2) 基本背景
--------------------------------------------*/
/*ヘッダー以下の背景色 */
.skin-blogBody {

background-color: #ffffff;
}

/*コンテンツ背景 */
skin-blogBodyInner {
background-color: #ffffff;
}

これをさらに設定したい背景色を色見本から選びます。

/* (1-2) 基本背景
--------------------------------------------*/
/*ヘッダー以下の背景色 */
.skin-blogBody {

background-color: #e6e6fa;
}

/*コンテンツ背景 */
skin-blogBodyInner {
background-color: #e6e6fa;
}

変更したらこんな感じ

ヘッダー下の背景色をlavender(#e6e6fa)にしてみました。ヘッダー下部分が全部紫になりました。

ヘッダー部分の背景色

次に、ヘッダー部分の背景色の変更方法を載せてみます。

/* (2-1) ヘッダー背景
--------------------------------------------*/
/* ヘッダー背景 */
.skin-bgHeader {
background-color: #ffffff;
}

ヘッダーの背景色の変更は↓下記↓になります。

background-color: #ffffff;

のところの#ffffffに、色見本コードを入れましょう。

/* (2-1) ヘッダー背景
--------------------------------------------*/
/* ヘッダー背景 */
.skin-bgHeader {
background-color: #f0f8ff;
}

今回はaliceblue(#f0f8ff)を指定してみました。

 

ヘッダー部分の背景色が変わります。

ブログナビの背景色変更

ブログナビとは、カスタマイズで設置するナビメニューではなく、既存のナビです。

ブログトップ

  • 記事一覧
  • 画像一覧
  • 検索フォーム

上記が付いています。

コードはこちら

/* (3-3) ブログナビ
--------------------------------------------*/
/* (3-3-a) ブログナビ上部
--------------------------------------------*/
/* 背景、境界線 */
.skin-blogHeaderNav {
border-color: rgba(0, 0, 0, 0.2);
background-color: #ffffff;
}

border-color: rgba(0, 0, 0, 0.2);はblogナビの線の色、background-color: #ffffff;は背景色です。

柔らかいピンク系の色に変更してみました。

色指定はカンタンにできるので、挑戦してみよう!

背景色が変わるだけでもブログのイメージが変わります。

色指定で背景の変更はカンタンなので、ぜひ挑戦してみましょう!

  • この記事を書いた人
  • 最新記事
irodori

ヨリメグ

メール対応・資料作成・Webサイト管理・SNS運用・ライティングまでワンストップ対応できるクリエイティブ秘書&ブロガー。 ブログは、フリーランスお仕事系お役立ち記事を載せています。

おすすめ記事

1

確定申告の季節が近づいてきました。 ちなみに確定申告期間は2020年2月17日(月)から3月16日(月)になります。 確定申告をe-Taxで(電子申告)で行うと、青色申告は10万円の控除増加が期待でき ...

ヨリメグのペライチ 2

ペライチという1枚ページサイトに特化したサービスがあるのですが、そちらで秘書サービスに特化したサイトを作ってみました。 それがこちら↓ これこれ 結構上手に作れたのではないかと自画自賛。 内容がきちん ...

3

著作権が厳しい世の中になってきました。 フリー画像でもお仕事に関するものに使用する写真は「商用フリー」写真であることが利用の条件です。 ネットサーフィンをしていて見つけた商用利用可能なフリー写真サイト ...

4

インターネットで写真やイラストを販売することで、収入を得るストックフォト。 最近では、トッププレイヤーは月30万以上の収入を得ている方もゴロゴロいるそうです。 今回は、ストックフォトについてご紹介しま ...

5

お仕事ブログとしてアメブロを使う方にとって、既存デザインではなく、アメブロのヘッダーは自分のサービスのイメージに合ったものにしたいと思いますよね。 お仕事ブログへのカスタマイズの第一歩は、ヘッダーの設 ...

-アメブロカスタマイズ
-,

Copyright© イロドリワークス|オンライン秘書サービス , 2020 All Rights Reserved.