上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 こちらが、「フェイス・スタンダード」のCSS編集の手引きです。
 デザイン部分を編集する場合にこちらをカスタマイズします。



 青字の部分が各部品の位置、赤字の部分が修正するサンプルです。赤字の部分を書き加えたり、数値を変えることで、色を変えたり、背景画像を設定できます。


/* 全体設定
------------------------------------------------------------ */

*{
margin:0;
padding:0;
word-break:break-all;
zoom:100%;
color:#555;
}
ul,li,ol{
margin:0;
padding:0;
}
ol li{
display:list-item;
vertical-align:top;
}
input,textarea{
color:#555;
}

/* 画像
------------------------------------------------------------ */
img{
border:0;
}
.emoji{
vertical-align:middle;
}
.text_body img{
margin:0 5px 0 0;
border:1px solid #ccc;
padding:3px;
}
.eng{
font-family:arial;
}

/* デフォルトのリンク設定
------------------------------------------------------------ */
a{
text-decoration:none;
}
a:link{
color:#788bfa;(全体のリンク色)
}
a:visited{
color:#787baa;(訪問済みリンク色)
}
a:hover{
color:#69f;(ホバー時のリンク色)
}
a:active{
color:#f55;(クリック時のリンク色)
}

/* 強調文字・引用
------------------------------------------------------------ */
.text_body strong{
}
.text_body blockquote{
background:#eee;
border:1px solid #ccc;
margin:10px 10px 10px 60px;
padding:10px 20px;
font-size:90%;
}
.text_body table{
font-size:90%;
width:90%;
margin:10px auto;
border:1px solid #ccc;
border-collapse:collapse;
}
.text_body th{
background:#eee;
padding:2px 10px;
text-align:left;
}
.text_body td{
text-align:left;
border:1px solid #ccc;
padding:2px 10px;
}
.text_body ul,
.text_body ol{
padding-left:20px;
}
.text_body li{
margin-left:10px;
list-style-position:outside;
}

/* レイアウト
------------------------------------------------------------ */
body{
text-align:center;
background:#fff;(全体の背景色)
}
#conteinar{
text-align:left;
width:900px;
margin:0 auto;
background:#;
}
#header{
text-align:left;
height:120px;(ヘッダの縦幅)
margin:0 auto;
(直下の「http://~」が、ヘッダー画像を付け足す場所です)
(サイズは、横900px、縦120px以上)
background:#555 url("http://~~~~.jpg") no-repeat center bottom;
}
#navigation{
text-align:left;
width:900px;
margin:0 auto 1px;
background:#555;(カテゴリバーのカラー
}
#main{
width:580px;
float:left;
overflow:hidden;
}
#side{
width:300px;
float:right;
overflow:hidden;
font-size:14px;
margin-top:16px;
border-left:1px dotted #555;
padding-left:9px;
}
#footer{
width:900px;
margin:0 auto;
text-align:left;
}

/* ヘッダー
------------------------------------------------------------ */
#header h1{
font-size:16px;
margin: 0 0 0;
padding:10px 20px;
}
#header h1 a{
color:#fff;(ヘッダータイトルのリンク色)
border:none;
}
#header h1 a:hover{
color:#ccf;(ヘッダータイトルのマウスオーバー時のリンク色)
}
.intro{
font-size:12px;
width:500px;
padding:10px;
color:#fff;(ブログ概要部分のフォントカラー)
margin:10px 20px;
}

/* パンくずナビ & サーチ
------------------------------------------------------------ */
.pan_bar{
text-align:left;
font-size:12px;
width:900px;
margin:1px auto;
border-top:1px solid #555;
border-bottom:1px solid #555;
}
.pan_bar_tb{
width:100%;
border-collapse:separete;
border-spacing:3px;
}
.pan_bar_left{
text-align:left;
padding-left:10px;
}
.pan_bar_left a{
color:#;
font-size:12px;
font-weight:bold;
}
.pan_bar_img{
padding-right:7px;
}
.pan_bar_img img{
vertical-align:middle;
padding:1px;
}
.pan_bar_right{
text-align:right;
height:24px;
}
.pan_bar_right input{
background:#f3f3f3;
border-width:1px;
}
.top_input_box input{
width:250px;
height:18px;
font-size:16px;
font-family:"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",HiraKakuPro-W3,"Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro","メイリオ";
}
.top_input_btn input{
padding:0 0 0 5px;
background:#fff;
}

/* ナビ
------------------------------------------------------------ */

.cate_bar{
border-collapse:collapse;
}
.cate_bar_float{
font-size:11px;
text-align:center;
}
.cate_bar_float a{
display:block;
padding:5px 15px;
border-right:1px solid #ccc;
color:#fff;

}
.cate_bar_float a:hover{
background:#ccc;
color:#555;
}

/* メインカラム
------------------------------------------------------------ */
.main_body{
background:#fff;
}
.main_title_box{
border-top:3px solid #555;
padding-top:1px;
}
.title_date_skin{
width:70px;
float:left;
}
.title_date{
font-family:arial,sans-serif;
font-size:12px;
text-align:center;
padding-bottom:1px;
border-bottom:2px solid #555;
}
.title_year{
background:#d48;
color:#fff;
padding:2px;
margin-bottom:1px;
}
.title_day{
background:#48d;
color:#fff;
padding:2px;
}
.title_category_skin{
width:500px;
float:right;
}
.title_category h2{
font-size:10px;
font-weight:bold;
}
.title_category{
}
.title_category h2 a{
color:#555;
padding:1px 10px;
}
.title_category h2 a:hover{
color:#ccf;
padding:1px 10px;
}
.title_entry{
border-top:2px solid #555;
}
.title_entry h3{
font-size:16px;
padding:3px 20px;
}
.title_entry a{
color:#788bfa;
}
.title_entry a:hover{
color:#ccf;
}

.text_body{
clear:both;
line-height:1.5;
padding:70px 25px 10px;
}
.more_link{
margin:30px 20px 20px 300px;
text-align:right;
border-bottom:2px solid #555;
}
.text_footer{
font-family:arial,sans-serif;
padding:1px 10px 40px;
border-top:3px solid #555;
text-align:right;
font-size:12px;
font-style:italic;
font-weight:bold;
}
.text_footer a{
color:#555;
}
.text_footer a:hpver{
color:#
}

/*--記事下部アイテム--*/
.next_entry_title{
font-family:arial,sans-serif;
font-size:15px;
font-style:italic;
font-weight:bold;
padding:1px 0px 8px 0px;
border-top:3px solid #555;
}
.next_entry_entry{
padding:3px 30px 40px;
font-size:90%;
line-height:1.2;
}
.bookmarks{
padding:30px 0 0;
text-align:right;
}
.bookmarks img{
margin:0;
border:0;
padding:0;
}


/* コメント・トラックバックエリア
------------------------------------------------------------ */
.com_skin{
position:relative;
}
.com_num{
font-style:italic;
font-family:impact,arial black,sans-serif;
font-size:100px;
font-weight:bold;
color:#f5f5f5;
position:absolute;top:-10px;
z-index:0;
}
.com_main{
position:relative;
z-index:1;
}
.cmtb_title{
font-size:14px;
font-weight:bold;
font-style:italic;
font-family:arial,sans-serif;
border-top:2px solid #555;
}
.sub_title{
margin:30px 10px 10px 70px;
border-bottom:1px solid #999;
font-size:14px;
}
.sub_body{
padding:5px 20px 10px 80px;
font-size:14px;
}
#tb .sub_body{
}
.sub_footer{
padding:0px 10px;
text-align:right;
font-size:10px;
margin:10px 10px 20px 40px;
border-bottom:2px solid #555;
}

#cm,#tb,#cm_form,#tb_url{
line-height:1.5;
margin-top:40px;
}
.tb_url_box{
padding:20px;
font-size:12px;
}
.tb_url_box input{
border:none;
border-bottom:1px solid #999;
background:transparent;
width:450px;
font-family:arial,sans-serif;
font-size:14px;
}
.cmfm_tb{
border-collapse:collapse;
margin:20px;
}
.cmfm_left{
font-weight:bold;
font-size:11px;
vertical-align:bottom;
padding-right:10px;
font-family:arial,sans-serif;
border-bottom:1px solid #555;
}
.cmfm_left_tex{
font-weight:bold;
font-size:11px;
vertical-align:top;
padding:20px 10px 0 0;
font-family:arial,sans-serif;
}
.cmfm_right{
vertical-align:bottom;
border-bottom:1px solid #555;
padding-top:1px;
}
.cmfm_right_emoji{
vertical-align:bottom;
padding-top:4px;
opacity:.9;
filter:alpha(style=0, opacity=90);
}
.cmfm_right input{
border:none;
background:transparent;
padding:2px;
width:380px;
font-size:14px;
font-weight:bold;
font-family:arial,sans-serif;
}
.cmfm_right_tex textarea{
color:#aaa;
background:#eee;
border:1px solid #999;
width:380px;
font-family:"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",HiraKakuPro-W3,"Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro","メイリオ";
}
.cmfm_right_radio{
font-size:12px;
padding-top:4px;
}
.cmfm_right_tex{
padding:10px 0;
}
.form_btn input{
background:#999;
color:#fff;
font-family:arial,sans-serif;
border-width:1px;
padding:0 10px;
margin:5px 0;
}

/* 全記事表示
------------------------------------------------------------ */
.all{
padding:20px 20px;
font-size:90%;
}
.all_list{
border-collapse:collapse;
}
.all_list_cate{
vertical-align:bottom;
font-size:12px;
border-bottom:1px solid #666;
padding:2px 0 2px;
}
.all_list_url{
vertical-align:bottom;
font-size:14px;
border-bottom:1px solid #666;
padding:10px 10px 2px;
}
.all_list_day{
vertical-align:bottom;
font-size:12px;
border-bottom:1px solid #666;
padding:2px 0 2px;
font-family:arial,sans-serif;
word-break:keep-all;
}

/* サーチエリア
------------------------------------------------------------ */
.search{}
.search_body{
padding:20px 10px;
}
.search_list{
padding:10px 0;
}
.search_dis{
padding:10px;
margin:10px 10px 10px 50px;
border:1px dotted #999;
font-size:75%;
}

.sub_title_category{
font-family:arial;
font-weight:bold;
padding:10px;
}
.sub_title_entry{
padding:5px 20px;
background:#555;
color:#fff;
}

/* ページナビ&ページトップ
------------------------------------------------------------ */
.page_navi{
font-size:12px;
text-align:left;
font-family:arial,sans-serif;
margin:5px 0;
}
.pg_top{
clear:both;
text-align:right;
font-size:12px;
font-family:arial,sans-serif;
margin:20px 0 100px 0;
}
.pg_top a,.page_navi a{
border-top:1px solid #eee;
border-left:1px solid #eee;
border-right:1px solid #666;
border-bottom:1px solid #666;
background:#999;
padding:2px 20px;
color:#fff;
}
.pg_top a:hover,.page_navi a:hover{
color:#bdf;
}
.pg_top a:active,.page_navi a:active{
border-top:1px solid #666;
border-left:1px solid #666;
border-right:1px solid #eee;
border-bottom:1px solid #eee;
background:#999;
padding:3px 19px 1px 21px;
color:#fff;
}
.pg_top a:active{
border:1px solid #f00;
color:#f00;
}

/* サイドバー
------------------------------------------------------------ */
.side_body{
margin:0 0 20px;
padding-top:1px;
border-top:1px solid #555;
}
#side ul{
padding:0 0 0 20px;
margin:0;
}
#side ul li{
list-style-image:url("http://blog-imgs-44.fc2.com/d/e/s/designlabolatory/default-listmark.png");
padding:0;
margin:0;
}
#side a{
color:#384bba;
}
#side a:visited{
color:#484b7a;
}
#side a:hover{
color:#09f;
}
#side li a{
display:block;
padding:5px 0;
}
#side li a:visited{
}
#side li a:hover{
background:#ddd;
}
#side img{
background:#fff;
padding:2px;
margin:2px;
border:1px solid #ccc;
}
.plg_title{
padding:4px 15px;
font-weight:bold;
background:#555;(サイドバータイトルの背景色)
color:#fff;(サイドバータイトルのフォントカラー)
font-size:12px;
border-left:1px solid #ccc
}
.plg_body,.plg3_body{
padding:10px;
line-height:1.2;
}
.plg_header,.plg3_header{
padding:5px 10px 2px;
}
.plg_footer,.plg3_footer{
padding:10px;
}
.plg3_title{
margin-top:5px;
padding:2px 0px;
font-size:13px;
font-weight:bold;
border-bottom:2px solid #555;
}
.plg3_body{
font-size:13px;
padding:10px;
background:#fff;
}

/* フッター
------------------------------------------------------------ */
.adrs{
font-family:arial,sans-serif;
margin-top:40px;
text-align:left;
}
address{
font-style:normal;
font-size:12px;
}
.fc2ad{
margin:0 auto;
text-align:left;
padding:3px 0px 5px;
font-size:11px;
font-family:arial;
}
.fc2ad a{
color:#577;
}
.fc2ad a:hover{
text-decoration:underline;
}
.fc2ad #ad1,.fc2ad #ad2{
}

/* カレンダー
------------------------------------------------------------ */
.calender caption{
border-bottom:1px solid #999;
padding-bottom:5px;
}
.calender{
width:90%;
margin:0 auto;
text-align:center;
font-family:impact,arial,sans-serif;
border-collapse:separate;
}
.calender th{
font-size:10px;
padding:5px;
}
.calender td{
padding:2px 0;
}
.calender td a{
display:block;
}
.calender td a:hover{
background:#ddd;
}
.calender #sun{
color:#f77;
}
.calender #sat{
color:#77f;
}

/*--カレンダー(ブログ下部)--*/
.line_calendar{
font-family:arial,sans-selif;
font-size:12px;
font-style:italic;
font-weight:bold;
text-align:right;
background:#555;
padding:0 10px;
}
.calendar_title{
color:#fff;
font-size:9px;
}
.calendar_num{
color:#fff;
padding:1px 2px;
}

/* Template Designed by Design Laboratory
FAITH STANDARD DEFAULT 2010.6.3 version 1.0
------------------------------------------------------------ */


 以上が比較的簡単に編集できて、デザインをがらっと変えられる部分です。
 解らないことがあったら、問い合わせてみよう。

 あと、HTML部のカスタマイズの手引きはこちらから。
フェイススタンダード・HTMLのカスタマイズ

 カテゴリバーが崩れる方は?
カテゴリバーの編集

 また、以下のCSS講座から自分でも勉強できますよ~
実用的スタイルシート入門
このエントリーをはてなブックマークに追加
Tue.12.28.2010
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。