アメブロカスタマイズ

アメブロ 背景の設定方法(色指定)

更新日:

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

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

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

アメブロ 背景の設定方法

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

ヘッダー下の背景色

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

/* コンテンツ背景、ヘッダー以下の背景色 */
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;は背景色です。

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

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

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








おすすめ記事

1

SNS集客からWeb集客へ時代が変化しつつある中、ホームページサービスにあたらめて注目が集まっています。 WordPress、Jimdo、Ameba Ownd、Wixなどなど色々ホームページ制作のサー ...

2

WordPressを使用する際に、迷うのはデザインテーマ。 それもそのはず。 WordPressのデザインテーマは、日本のみならず世界中で作られています。 本当にたくさんテーマがあるので、どれが良いの ...

3

世界で一つだけ、自分だけのオリジナルのものを作るハンドメイドは、最近人気の起業です。 書籍もたくさん出ていますし、作品をminneやクリーマなどに出展したり自分でショップカートを持って販売しているハン ...

4

レースや枠、ライン画像など無料で使えるWeb素材のリンク集を作ってみました。 自作でチラシやデザイン制作、アメブロカスタマイズを行う際にご利用下さい。 無料・商用利用可能、改変可能、リンク不要のモノを ...

5

ホームページやブログカスタマイズをするとき、デザインパーツ全てを自分で作るのは正直大変です。 そこで登場するのが、市販の素材集。 ヘビロテする本当に使える素材集をご紹介します。 本当に使える可愛いもの ...

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

Copyright© Bloomin! , 2018 All Rights Reserved.