cssカスタマイズ
カスタマイズの方法は、基本的にひとつスキンを選んで、
そのスキンのＣＳＳを編集することでカスタマイズできます。
選ぶスキンによってもＣＳＳ本文が大きく異なります。
オーストラリアのスキンのＣＳＳも見てみましたが、なにやら複雑そうで、
ためしにちょっといじってみたらおかしなことになってしまったので、
違うスキンを選んでカスタマイズするほうがいいかもしれません・・・。
mi917は「ブルー」というスキンを選んでいます （スキン選択→全てのスキン→スタンダード→ブルー）
ブルーというスキンをそのまま使うと、今のブログのような様子になります。
これをカスタマイズして育児レシピにしました。（ので「ブルー」からカスタマイズするなら以下がそのまま参考になるかも）
以下ＣＳＳの本文です。
------------------------
ameblo CSS Skin Settings
FileName: common.css
Version: 2005.04/19
Skin for: all_skin
------------------------
（ここの欄は無視します。）
------------------------
ameblo CSS Skin Settings
FileName: common.css
Version: 2005.04/19
Skin for: blue
------------------------
/* ----------------------- common ----------------------- */
以下でリンクの色を設定します
a {
color: #8095D5; /*全体的なリンク色*/
}
a:link {text-decoration: none; color:#8095D5;} /* 通常のリンクの色 */
a:visited {text-decoration: none; color:#8095D5;} /* 一度行ったことのあるリンクの色 */
a:hover {text-decoration:none; color:gray} /* カーソルがあった時の色 */
（中略）
/* ----------------------- header ----------------------- */
タイトル付近の背景色を変更します
#header{
height:240px;
background-color:#ffffff ;
}
/* ----------------------- font-information ----------------------- */
以下で、「プロフィール」「このブログの読者」などの色変更
.menu_title {
color: #8095D5;
font-size:12px;
font-weight: bold;
}
以下でカレンダーの日付の色を設定します
#calendar table {
color:#aaaaaa; /*カレンダー日付の色*/
font-size:11px;
line-height:1.3;
}
#calendar .sun {
color:#ffaaaa; /*日曜日の色*/
}
#calendar .sat{
color:#7777ff; /*土曜日の色*/
}
#calendar td a {
color:#ff7777; /*更新のある日の色*/
text-decoration: underline;
}
以下で日記のタイトル・テーマ・日付の色やフォントサイズを設定します
.entry span.theme{
color:#8095D5; /* テーマ */
font-size: 10px;
}
.entry .title{
color:#8095D5; /* 日記のタイトル */
font-size:15px;
font-weight:bold;
}
/* ----------------------- background-color-control ----------------------- */
以下で、中心フレーム（本文）、左フレーム（広告とか）、右フレーム（プロフィールとか）の色設定をします
body {
background-color: #ffffff;
}
#frame {
background-color:#FFEAEA; /* 本文あたりの背景色 */
}
#sub_a{
background-color:#FFD5D5; /* 左フレームの背景色 */
}
#sub_b{
background-color:#FFD5D5; /* 右フレームの背景色 */
}
/* ----------------------- MainColumn ----------------------- */
以下日記の日付の部分の色設定（ブルースキンのみ）
.entry .date{
width:99%;
background-color: #8095D5; /* 日付の部分 */
padding: 5px 0px 2px 5px;
border-bottom: 1px solid #607ACA; /* 日付の部分の下影 */
border-right: 1px solid #607ACA; /* 日付の部分の右影 */
display: block;
color: #FFFFFF;
}
-----------------------------------------------------
ameblo CSS Skin Layout Settings
FileName: type_c.css
Version: 2005.03/03
Skin for: blue
-----------------------------------------------------
以下で、一番上にくる写真（めんちゃん写真が張り付いているところ）を設定します
#header {
background-image: url(http://ameblo.jp/user_images/....
); ←画像フォルダに保存した画像を指定します
background-repeat:no-repeat;
background-position: center;
}
以下でタイトルの文字色・サイズを設定します
#header h1 a,
#header h1{
color: #FFD5D5; /*タイトルの文字色*/
font-size: 30px;
margin-left: 20px;
padding-top: 120px;
}
#header h2{
color: #8095D5; /*概要の文字色*/
font-size: 20px;
margin-left: 20px;
padding-top: 120px;
}
以下で壁紙の設定をします
body {
background-image: url(http://blog.ameba.jp/user_images/
....); ←ピンクの水玉の画像を用意して壁紙にしました
}
以上がおおまかなカスタマイズのポイントです。
重要なのは以下２点だと思います。
１．トップ画像と背景画像の貼り付け
自分の必要としている画像のURLを貼り付けるのですが、肝心なＵＲＬをコピーする必要があります。
わかりやすい方法としては、「記事を編集」で目的の写真を選択して、HTMLタグを表示してみると、
<a href="http://stat.ameba.jp/user_images/1a/76/10014875670.gif " target="_blank">←こんな風に書いてあるので
この http://以下を貼り付けてしまえばＯＫだと思います。
２．色のカスタマイズ
ＣＳＳ内にいろんなところにcolor: #FFFFFF; などとでてきますが、
そこらへんを自分の欲しい色に変えればいいと思います。
あまりうまい説明になっていないかもしれませんが、
ちょっといじってみていただいて、
また育児レシピの方に 「わかんない！！」などメッセージを下さい。
それではでは 今後ともmi917をよろしくです。