アメーバブログでフォントを変更する方法は、以前の(1)(2)で解説したけれど、背景色が真っ白のブログになってしまった。

※ 前の記事は

アメーバブログでフォントを変更する方法(1)

アメーバブログでフォントを変更する方法(2)

 

 背景色を設定するだけで、見た感じ「普通」になる。

 今回と次回の2つの記事で、背景の変更方法を解説。

 

記事(1):背景色を変更する方法

記事(2):ブログタイトル背景に画像を表示する方法

 

※ 画像の設定は、難しそうだったら、背景蜀の設定だけでも十分と思われる。

 

【1】全体の背景色

 

 フォント名の場合と同じで、スタイル設定の記述をコピペするだけ。または色を書き換えするだけ。

 

 色をRGB形式で書くわけだが、RGBの説明が必要という人は、しっかり解説しているサイトで、ちょっとだけ理解を深めてきてもらえれば・・・と思う。

 R=赤、G=緑、B=青、この3つをそれぞれ、0~255の数字で混ぜ合わせる。絵の具の混ぜる量を数値化した感じだ。

 (特徴)

 数字が少ないほど、混ぜる量が少ない。

 全て0=黒、全て255=白

 16進数(0,1,…、9,A、B、C、D、E)で表示。

 0~255なので、00~FFとなる。

 この辺が難しい人は、0~F(F=15)で、考えてくれればいい。

 他のサイトで、実際の色と16進数の対応表があるから、それを参考に。

 まず

「ブログ管理」→「デザインの設定」→「CSSの編集」

でスタイル記述欄を表示させる。

※ 詳しくは前回の記事(2)

  「 【3】CSS編集でフォント名を変更 」

 

  

を参照してください。

 

 

 コピペする内容(または書き換え)。

 

/* 変更 */
background-color: #bbffdd;

 

 赤=bb、緑=ff、青=dd として、緑が一番多い。

 

場所は、下の写真の位置。

目次

→ 「 (1)基本のスタイル 」

→ 「 (1-2)基本背景 」

→ 「 /* コンテンツ背景、ヘッダー以下の背景色 */ 」

の、

.skin-blogBody, .skin-blogBodyInner {

}

の中。

{ ~ } の中なので、間違えないように。

 

現在、背景色を

background-color: #ffffff;

と、白=#ffffff にしている。

 

これを消してもいいし、書き換えてもいい。

もしくはこの真下に追加してもいい(前ではダメ)。

 

貼り付けてみる。

/* 変更 */
background-color: #bbffdd;

を貼り付けると、写真の赤い四角のようになる。
 
これで、保存する。
以上。
#以下の16進数を変更すれば、好きな色に変えることができる。
 
【2】ブログタイトルの背景色
 
 【1】と、やり方は全く同じ。貼り付ける場所(または書き換え)が違っているだけ。
 
 今度は、うすい青(=#aaccff )にしてみる。
 
/* 変更 */
background-color: #aaccff;
 
貼り付ける場所は、下の写真の位置。

目次

→ 「 (2)ヘッダーエリアのスタイル 」

→ 「 (2-1)ヘッダー背景 」

→ 「 /* ヘッダー背景 */ 」

の、

.skin-bgHeader {

}

の中。

しつこく繰り返すけれど、

{ ~ } の中なので、間違えないように。


 

現在、背景色を

background-color: #ffffff;

と、白=#ffffff にしている。

 

繰り返すが・・・

これを消してもいいし、書き換えてもいい。

もしくはこの真下に追加してもいい(前ではダメ)。

 

 

貼り付けてみる。

/* 変更 */
background-color: #aaccff;

を貼り付けると、写真の赤い四角のようになる。
 
保存ボタンを押せば完了。
 
 
次回の記事では、ブログタイトルに画像を入れてみる。
 
次へ
 
--------------------------------------------------------------------------------------
ブログ
--------------------------------------------------------------------------------------
C++で制作したフリーソフトの制作日記と、子どもの様子を、綴っていきます。
*************************************************************
Windows用フリーソフト(無料)総合サイト
http://yoyontek-develop.minim.ne.jp/
-------------------------------------------------------------
(1) 【 背景透過&境界線お掃除 】
http://yoyontek-develop.minim.ne.jp/clean-pic-fringe/
画像ファイルの背景を透過させ、境界線の汚れを除去(PNG対応)
-------------------------------------------------------------
(2) 【 休憩タイムアラート for KIDS 】
http://yoyontek-develop.minim.ne.jp/alert-kids/
子供のゲーム中に休憩時間をお知らせ
*************************************************************