アメブロのスキンカスタマイズ２

昨日は、背景画像を貼りこむことに成功しましたね！




↑こんな状態だったのを、↓こんなふうにまでしましたよね～

　


今日は、「文字の色」や「タイトルの位置」なんかを変えることで、
↓こんなふうにもっていきましょう＾＾






まず、ブログのタイトルも文字色、中央の記事の見出し部分の色、左右のメニューの見出し部分の色を変えます～

/*============ ☆ かんたんスキンカスタマイズはこちら ☆ ==============*/

/*:(コロン)と、;(セミコロン)の間に色、画像、サイズなどを指定して下さい*/

/*１）ブログタイトルの文字サイズを変更する*/
#header h1{
font-size: 3.0em; /*-- 25px相当の文字サイズ --*/
}
/*２）ブログタイトルの文字色を変更する*/
#header h1 a{
color:#dddddd; 
}
/*３）ブログ説明の文字サイズを変更する*/
#header h2{
font-size: 1.0em; /*-- 12px相当の文字サイズ --*/
}
/*４）ブログ説明の文字色を変更する*/
#header h2{
color:#cccccc; 
}
/*５）ページ背景に画像を入れる*/
body{
background-image:url( 画像のURL );
}
/*６）ページ全体の文字色を変更する*/
body{
color: #666666; 
}
/*７）記事タイトルの背景色を変更する*/
.entry h3.title{
background-color: #cccccc; 
}
/*８）記事タイトルの文字色を変更する*/
.entry h3.title{
color: #D04A62; 
}
/*９）サイドバーの見出し文字色を変更する*/
h4.menu_title{
color: #cccccc; 
}
/*１０）サイドバーの見出し背景色を変更する*/
h4.menu_title{
background-color: #D04A62; 

このように、コロン：とセミコロン；の間に希望するカラーコードを指定します。

次に、リンクの文字色や訪問済みの文字色なども変えてしまいます。
一般的にリンク文字は青、訪問済みは紫、などというお約束もあるのですが、
ブログのデザインには絶対必要でもないので、同じ色にしてしまいました。

そのかわり、マウスを当てたときは色が変わるようにしてあります。


/*■■■デザインカスタマイズ - スキン基本設定*/

/*■リンク*/
a{
text-decoration:none;
color:#666666;
}
/*■リンク：訪問済み*/
a:visited{
text-decoration:none;
color:#666666;
}
/*■リンク：マウスオーバー時*/
a:hover{
text-decoration:underline;
color:#FF3366; 　←この色はデフォルトのままにしました
}
/*■コンテンツ全体*/
#frame{
background-color:;
}
/*■メインカラム*/
#main{
}
/*■サイドカラムA*/
#sub_a{
color:#666666;
background-color:;
}
/*■サイドカラムB*/
#sub_b{
color:#666666;
background-color:;
}


最後に、ブログタイトルの位置を少しずらしてみます。

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■■■■■■■■■■■ ヘッダー ■■■■■■■■■■■■*/

/*■■■基本設定 - ヘッダー*/
#header{
margin:0;
padding:50px 0px 0px 50px;
この部分の数字を変えると、タイトルの上、右、下、左の余白が変わります。→タイトルの位置が動くことになります。
}
#header h1{
margin:0;
padding:0px 0px 0px 0px;
}
#header h2{
margin:0;
padding:10px 0px 0px 10px;
}

今日はおしまぃー


p.s.　そうそう～～　背景画像をページをスクロールしても動かないようにする方法がありまする＾＾

background-attachment:fixed;

 

この呪文を、

/*５）ページ背景に画像を入れる*/
body{
background-image:url(画像URL);
background-attachment:fixed;
}

という具合に追加するだけでおｋです＾＾
このβ易タンのブログもそうやって背景画像を「固定」してあるのでふ＾＾

これを使うと、もっと面白いこともできちゃうという話はまた今度～～|'-')ノシノシ