自分で★カスタマイズ@《Ameba blog》

▼それでも、やっぱり、画像にあわせたい貴方に
※すでにカスタマイズをしている方は、それまでのCSSをバックアップ保存（ワープロソフト等を使って、自PCに保存）してから、とりかかってください。
~~1.スキンデザインを、「ベーシック３カラム」にする。~~配布は終了しました。
2.画像の各部位の高さや幅を計る。（下記の図を参考に）
3.画像をアメーバにアップロード。URLを調べる。
4.CSS編集画面で、CSSをいったんすべて消し、ご提供するCSSをコピペ。
5.画像指定部分（「url(http～)」）を、作成した画像のURLに入れ替える。
6.画像の各部位の高さや幅を、CSSに入力する（CSS注釈の「●」等の記号と下記の図を参考に）。保存。
7.フリースペースにメニューのリンクタグを入力。
▼CSS
・画像中の「●」等の記号と、CSS注釈の「●」等の記号があわせてあります。
・図中、薄青の四角は、左メニューの位置です。左メニューを空にすれば、そこには中身はないものの、「左メニュー＝sub_aの枠」は存在しています。
・横メニューやアイフレの基準は「0,0」と書いた左上です。
　・横メニュー設定の「left:277px;」は、横メニューの左側、基準点までの距離が277px。
　・横メニュー設定の「top:108px;」は、横メニューの上側、基準点までの距離が108px。

@charset "UTF-8";
/*
配布用“素材屋”レイアウト
http://adan.noor.jp/am_mattou/menu/
★
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
当CSSは「自分でカスタマイズ」する方にだけご提供しています。
「他人のパスワードを聞き出して改造」に使っているのを見つけたら、ブラックリストに載せます。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
★

============ ☆ 我流ｗかんたんCSS ☆ ==============
★マークはぜひアレンジを
*/

/*▼1) ページ背景(敷き詰め画像)*/
body{
background:url(http://adan.noor.jp/am_mattou/img/dia-24px.gif) #eee;/*--背景画像★--*/
}

/*▼2) 「素材屋風レイアウト」メイン画像関連設定と記事窓の位置決め*/
#frame{
padding-top:30px;/*--メイン画像の上余白--*/
height:500px;/*--窓高さ(経験値)。メイン画像高さが500を超える場合は、画像高さにあわせて修正を--*/
}

/*--広告をよけて中央置き--*/
/*--メイン画像幅が＝600px →下記数字は0でも可--*/
/*--メイン画像幅が＝700px →下記数字は100が良バランス--*/
/*--メイン画像幅が＝800px →下記数字は200が良バランス--*/
#subFrame{
padding-right:100px;/*--画面右余白--*/
}

#firstContentsArea{
width:700px;/*--メイン画像幅＝図中●--*/
height:500px;/*--メイン画高さ＝図中▼--*/
background:url(http://adan.noor.jp/am_mattou/menu/gainen.gif) left bottom no-repeat;/*--メイン画像URL★--*/
}

#subFirstContentsArea{
width:647px;/*--メニュー窓幅＋中余白＋記事窓幅＝図中◎--*/
padding-left:37px;/*--メニュー窓左余白＝図中○--*/
}

#main{
margin-top:131px;/*--記事窓上余白＝図中◆--*/
width:400px;/*--記事窓幅＝図中※--*/
height:350px;/*--記事窓高さ＝図中×--*/
}

#sub_main{
width:365px;/*--記事幅＝図中※-20-padding7px(後述)×2 --*/
}

/*▽左メニュー*/
#sub_a{
margin-top:131px;/*--メニュー窓とヘッダの隙間＝図中◇--*/
width:200px;/*--メニュー窓幅＝図中△--*/
height:350px;/*--メニュー窓幅高さ＝図中×--*/
}

/*▼3）文字色,フォント*/
body{
color: #000; /*-- 黒 --*/
font-family:'Trebuchet MS',sans-serif;
}

/*▽リンク色*/
a{
text-decoration:none;
}
a:link,
a:visited {
color:#444;/*-- 濃いグレイ --*/
} 
a:hover,
a:acitive {
text-decoration: underline;/*-- 下線 --*/
}

/*▼4) 罫線色*/
/*▽記事区切り罫線色*/
div{border-color:#eeeeee;
border-style:dotted;
border-width:0;
}

/*▽横メニュー/縦メニュー罫線色*/
/*（横メニューはCSS最後近く「縦/横menu」のところにも設定があります*/
a{border-color:#999999;
border-style:solid;
border-width:0;
}

/*▼5) スクロールバー色（IEのみ）*/
body,html{
scrollbar-face-color:#ffffff; 
scrollbar-highlight-color: #999999; 
scrollbar-shadow-color: #999999; 
scrollbar-3dlight-color: #ffffff; 
scrollbar-arrow-color: #999999; 
scrollbar-track-color: #ffffff; 
scrollbar-darkshadow-color: #ffffff;
}

/*----------------------------------
▲ かんたんCSS編集はここまで ▲
----------------------------------*/

/*▽初期化*/
body, div, h1, h2, h3, h4, h5, h6, ul, li, p {
padding:0;margin:0;
word-break: break-all;
}
img{border:none}
font{line-height:1.4em;}

html,body{overflow:auto;}

/*▽文字サイズ等*/
body, h1, h2, h3, h4, h5, h6, td, li{
font-size:12px;
line-height:1.4em;
}

/*記事タイトル*/
.title{
text-align:left;
padding:6px 0 6px 0;
}
/*記事*/
.subContents{
line-height:1.6em;
padding:6px;
}

.subContents img{
max-width:235px;
}
/*メッセージボード*/
#message{
line-height:1.6em;
}

/*コメント*/
.each_comment{
line-height:1.4em;
}

/*▽リスト*/
li{
list-style-type: none;
}
#sub_a ul,#message ul{
margin-left:1.3em;
}

#sub_a li{
list-style-type: disc;
color:#777777;
}

#profile li{
list-style-type: none;
}

/*▽レイアウト*/
body{
min-width:994px;
height:580px;
}

#userNaviArea{
display:none;
}

#frame{
width:100%;
min-width:993px;
position:relative;

}

#subFirstContentsArea{
float:left;
overflow:hidden;
}

#header{
display:none;
}

#firstContentsArea{
position:relative;
margin:0px auto;
overflow:hidden;
}

#main{
float:right;
overflow:auto;
}

#submain{
padding:7px;
overflow:hidden;
}

#sub_a{
z-index: 1;
overflow:auto;
float:left;
}

/*▽グルっぽ、広告、アメーバナビ*/
#sub_b{
position:absolute;
top:0px;
right:0;
z-index: 2;
width:190px;
overflow:auto;
height:100%;
}

/*▽記事カラム*/
.entry{
border-width:5px 0 0 0;
text-align:right;
margin-bottom:12px;
}

.subContents, .comment_body, #recent_entries_list ul{
text-align:left;
margin-left:3%;
width:97%!important;
}

.each_comment{
margin:0px 0 0px 10px;
}

.each_comment p.label{
font-weight:bold;
padding-top:30px;
}

/*■記事下部広告一段にする場合
#footer_ad ul{
width:15em!important;
}
*/

/*■記事一覧*/
.newentrytitle{
width:100%!important;
clear:both!important;
}
.p.cotb{
float:right!important;
}
.updatetime {
clearleft!important;
float: none!important;
}

/*●コメントボタン*/
#comment_show h4,
#comment_show p {
display:none;
}
#comment_show{border:none!important;
text-align:center!important;
background:none!important;}

/*■コメント - デザインカスタマイズ - メインカラム*/
#comment_module{
border-width:3px 0 0 0;
line-height:1.5;
}
/*コメント見出し*/
#comment_module h3.title{
background:none;
}

.eachcomment{
border-width:3px 0 0 0;
padding-bottom:20px;
}

/*コメントフッター*/
#comment_module .comment_footer{
border-width: 0 0 1px 0;
}
/*各コメントタイトル*/
#comment_module .label{
font-weight:bold;
}

.comment_footer{
text-align:right;
}

#calendar table{
width:100%;
}

#calendar td,
#calendar th
{
width:14%;
text-aling:right;
}

.page{text-align:center;}

/*▽userNavi*/
#userNaviArea{
display:none;
}

/*amebaBar*/
ul#amebaBar {
border-bottom: none!important;
background: transparent!important;
background:url(http://adan.noor.jp/am_mattou/img/white-alpha80.png)!important;
}

/*フッター*/

div#footerArea{
clear:both;
margin:0;
padding:3px 0px 8px 3px!important;
border-top:none!important;
text-align:right;
background-color: transparent !important;
border-top: none!important;
height:30px!important;
overflow:hidden!important;
}

div#footerArea #register {top: 9px!important;color:inherit!important;
top:9px!important;
}

/*■縦/横menu*/
#navi00 a{
display:inline-block;
z-index: 100;
width:65px;/* 幅 */
font-size:12px;/* 文字の大きさ */
text-align:center;
background:#fff;
margin:1px;
text-align:center;
font:'Times New Roman',serif;
}
#navi00 a:link{
border-width:1px;/* 枠 */
background:#fff;
color:#777;
}
#navi00 a:visited{
border-width:1px;/* 枠 */
background:#fff;
color:#777;
}
#navi00 a:hover{
border-width:1px;/* 枠 */
background:#999999;
color:#fff;
text-decoration:none;
}

/*▽横メニュー*/
#navi00{
position: absolute;
left:277px;
top:108px;
width:417px;
}

/*▽aifure*/
#aifure{
position:absolute;
left:-40px;
top:20px;
width:200px;
height:104px;
overflow:auto;
}

▼[px]参考

画像のどの部分が何pxあるか測定するには、ペイントが便利です。