シンプルスキンを使用して、変更を行っていこうと思います。
その、一部始終をこちらにUPしていこうと思います。
1.シンプルスキンを選択して、「2コラム-記事右 」「横幅可変」を選択。
2.カスタマイズで、画像を選択
(色なんかもここである程度指定しておくと楽かも...)
3.CSSの編集
/* ----------------------- header ----------------------- */
#header{
height: 211px; <=画像の高さ
background-color: #000000; <=背景色※1
}
#header h1 {
margin-left: 160px; <=ブログ名の開始位置-横
padding-top: 65px; <=ブログ名の開始位置-縦
text-decoration: none;
}
#header h2{
margin-left: 170px; <=ブログ概要の開始位置-横
margin-right: 120px; <=ブログ概要の終了位置-横
}
/* ----------------------- footArea ----------------------- */
/* ----------------------- font-information ----------------------- */
body{
color:#000000;
font-size:12px;
}
.list{
font-size:10px;
}
#header h1 a{
color: #FFFFFF; <=ブログ名の文字色※1
font-size: 40px; <=ブログ名の文字のサイズ
font-weight: bold; <=ブログ名の書体(?ここでは太字の指定)
line-height: 115%; <=ブログ名の行間
}
#header h2{
color:#FFFFFF; <=ブログ概要の文字色※1
font-size:13px; <=ブログ概要の文字のサイズ
font-weight: bold; <=ブログ概要の書体(?ここでは太字の指定)
line-height:150%; <=ブログ概要の行間
}
※1画像が表示されない時のために、文字色と背景色はまったく違う色を指定しておいたほうがいいかもしれません。
2.で画像を選択しておくと、CSSの一番下に↓が追加されます。
これを使うとラクチンなので、ここで画像を変更。
(画像フォルダに入ったもので問題ない場合は修正不要です)
-----------------------------------------------------
ameblo CSS Skin Layout Settings
FileName: type_a_ex.css
Version: 2005.03/03
Skin for: blue
-----------------------------------------------------
*/
・
・
#sub_b{
display: none;
}
#header {
background-image: url(http://画像のアドレス); <=ここで画像のアドレスを指定します
}
#header {
background-repeat:repeat-x; <=ここで画像の繰り返し指定をしています※2
}
※2繰り返したくない場合は、repeat-x → no-repeat に変更してください。