ブログの背景を変えると、イメージが一気に変わりますよね。
色を変えるだけでも印象は大きく変わりますし、背景に画像を入れるとさらに印象は変わります。
今回はアメブロの背景の設定方法でも、色コードを変えるだけでできる色変更についてお伝えしていきます。
アメブロ 背景の設定方法
背景を設定する前に、カスタマイズができるようにこちらの設定にしておきましょう。
基本設定は、こちらです。
ヘッダー下の背景色
最初は下記のような設定になっています。
[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”#f3f3f3″ bgcolor=”#f3f3f3″ borderwidth=”0″ borderradius=”5″ titleweight=”bold”]
/* コンテンツ背景、ヘッダー以下の背景色 */
skin-blogBodyInner {
background-color: #ffffff;
}
[/st-mybox]
こちらを↓下記↓のように変更します。
[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”#f3f3f3″ bgcolor=”#f3f3f3″ borderwidth=”0″ borderradius=”5″ titleweight=”bold”]
/* (1-2) 基本背景
——————————————–*/
/*ヘッダー以下の背景色 */
.skin-blogBody {
background-color: #ffffff;
}
/*コンテンツ背景 */
skin-blogBodyInner {
background-color: #ffffff;
}
[/st-mybox]
これをさらに設定したい背景色を色見本から選びます。
[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”#f3f3f3″ bgcolor=”#f3f3f3″ borderwidth=”0″ borderradius=”5″ titleweight=”bold”]
/* (1-2) 基本背景
——————————————–*/
/*ヘッダー以下の背景色 */
.skin-blogBody {
background-color: #e6e6fa;
}
/*コンテンツ背景 */
skin-blogBodyInner {
background-color: #e6e6fa;
}
[/st-mybox]
変更したらこんな感じ
ヘッダー下の背景色をlavender(#e6e6fa)にしてみました。ヘッダー下部分が全部紫になりました。
ヘッダー部分の背景色
次に、ヘッダー部分の背景色の変更方法を載せてみます。
[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”#f3f3f3″ bgcolor=”#f3f3f3″ borderwidth=”0″ borderradius=”5″ titleweight=”bold”]
/* (2-1) ヘッダー背景
——————————————–*/
/* ヘッダー背景 */
.skin-bgHeader {
background-color: #ffffff;
}
[/st-mybox]
ヘッダーの背景色の変更は↓下記↓になります。
[st-cmemo fontawesome=”fa-file-text-o” iconcolor=”#919191″ bgcolor=”#fafafa” color=”#000000″ iconsize=””]background-color: #ffffff;[/st-cmemo]
のところの#ffffffに、色見本コードを入れましょう。
[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”#f3f3f3″ bgcolor=”#f3f3f3″ borderwidth=”0″ borderradius=”5″ titleweight=”bold”]
/* (2-1) ヘッダー背景
——————————————–*/
/* ヘッダー背景 */
.skin-bgHeader {
background-color: #f0f8ff;
}
[/st-mybox]
今回はaliceblue(#f0f8ff)を指定してみました。
ヘッダー部分の背景色が変わります。
ブログナビの背景色変更
[st-cmemo fontawesome=”fa-file-text-o” iconcolor=”#919191″ bgcolor=”#fafafa” color=”#000000″ iconsize=””]ブログナビとは、カスタマイズで設置するナビメニューではなく、既存のナビです。[/st-cmemo]
ブログトップ
- 記事一覧
- 画像一覧
- 検索フォーム
上記が付いています。
コードはこちら
[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”#f3f3f3″ bgcolor=”#f3f3f3″ borderwidth=”0″ borderradius=”5″ titleweight=”bold”]
/* (3-3) ブログナビ
——————————————–*/
/* (3-3-a) ブログナビ上部
——————————————–*/
/* 背景、境界線 */
.skin-blogHeaderNav {
border-color: rgba(0, 0, 0, 0.2);
background-color: #ffffff;
}
[/st-mybox]
border-color: rgba(0, 0, 0, 0.2);はblogナビの線の色、background-color: #ffffff;は背景色です。
[st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”#f3f3f3″ bgcolor=”#f3f3f3″ borderwidth=”0″ borderradius=”5″ titleweight=”bold”]
[/st-mybox]
柔らかいピンク系の色に変更してみました。
色指定はカンタンにできるので、挑戦してみよう!
背景色が変わるだけでもブログのイメージが変わります。
色指定で背景の変更はカンタンなので、ぜひ挑戦してみましょう!
[st-card id=20643 label=”” name=”” bgcolor=”” color=”” fontawesome=”” readmore=”on”]