でも大丈夫
ちゃんと CSS のバックアップは取ってあります！
では続き
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*■■■■■■■■■■ スキン基本設定 ■■■■■■■■■■*/
です。
CSS のファイルは しばらく 目次が続きますので 飛ばしてください。
/*■■■基本設定 - スキン基本設定*/
/*■タグ初期化 - 基本設定 - スキン基本設定*/
html {
font-size:12px !important;
*font-size:75% !important;/*forIE6IE7*/
}
ここは基本文字サイズです。
試しに 36px にしてみます。
もともとの大きさは ハマーンで確認してください！
サイドバーの文字もおっきくなるので注意です。
body{
margin:0;
padding:0;
text-align:center;
font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica;
}
body タグは全体にかかってきます。
margin は 外側の余白
padding は 内側の余白
text-align は文字の位置
です。
単位はピクセルなので わかりやすいように
まず margin:50px; を入れてみます！
★ 0px
★ 50px
さらに padding:50px; を追加
タイトル部分とか フロート設定のためか
paddingは効果なしでした。
でも 一番下は ちゃんと余白ができてました
フォントは変えないほうが身のためです。
img{
border:0;
}
これは 画像の外枠です。
通常 このままのほうがいいと思います。
blockquote{
margin:12px 0;
padding:10px;
border:2px dotted #D4D4D4;
}
引用の場合の設定
ブログネタとかの点線枠に使っているみたい。
外枠に 太さ2px 灰色の 点線を 使用し
外枠の外側余白を 上下12px 左右0px
内側余白を 10px ですね。
pre{
margin:0;
padding:0;
}
input,
textarea{
}
p{
margin:0;
padding:0;
}
ここまでは それぞれ のコマンドに対する設定ですね
普通はあまり使わないでしょう！
.menu_frame ul,
.menu_frame li,
.menu_frame dl,
.menu_frame dt,
.menu_frame dd,
#comment_module ul,
#comment_module li,
#trackback ul,
#trackback li,
#reader_list ul,
#reader_list li,
#favorite_list ul,
#favorite_list li,
#bookmark_list ul,
#bookmark_list li{
margin:0;
padding:0;
list-style-type:none;
}
これは リストの余白と
先頭に表示するマーカー文字の種類を指定してます。
試しに
list-style-type:square;
としてみました
でも
どこが違うかわからない！
何に使っているのだろう？
さて 次からは 重要ですよ！
/*■フレーム - 基本設定 - スキン基本設定*/
#frame{
width:800px;
margin:0 auto;
text-align:left;
}
これは 一番外側の枠（枠線は見えないけど）の横幅が800pxです。
ここだけを小さくすると
body{
margin:0;
padding:0;
text-align:center;
font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica;
}
の設定のため 中央寄せになります。
ちなみに 300px にすると
#wrap{
width:800px;
}
これは
サイドバーと本文の部分の横幅です。
#sub_main{
width:100%;
overflow:hidden;
}
本文の幅指定です。
別に設定するサイズの割合で指示してますが
px単位でも可能です。
#main{
overflow:hidden;
word-break:break-all;
}
#sub_a{
overflow:hidden;
word-break:break-all;
}
#sub_b{
overflow:hidden;
word-break:break-all;
}
以上は
サイドバー 本文とも
はみ出した部分を表示しない設定と
改行を表示に合わせる設定です。
/*--フレームフロート解除--*/
#frame:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
#wrap:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
#frame{
display:inline-block;
min-height:1%;
}
#wrap{
display:inline-block;
min-height:1%;
}
/* Hides from IE-mac \*/
* html #frame{
height:1%;
}
* html #wrap{
height:1%;
}
#frame{
display:block;
}
#wrap{
display:block;
}
/* End hide from IE-mac */
ここら辺は正直わかりません
とりあえずそのままで
/*■■■デザインカスタマイズ - スキン基本設定*/
/*■リンク*/
a{
text-decoration:none;
color:#0066CC;
}
/*■リンク：訪問済み*/
a:visited{
text-decoration:none;
color:#996699;
}
/*■リンク：マウスオーバー時*/
a:hover{
text-decoration:underline;
color:#FF3366;
}
ここまではリンクの設定
上で説明したとおりに
色を設定しましょう！
text-decoration:none;
は リンクのアンダーラインをつけない設定です。
/*■コンテンツ全体*/
#frame{
background-color:#FFFFFF;
}
フレーム の 背景色
赤くしてみる
/*■メインカラム*/
#main{
}
/*■サイドカラムA*/
#sub_a{
color:#666666;
background-color:#FFFFFF;
}
/*■サイドカラムB*/
#sub_b{
color:#666666;
background-color:#FFFFFF;
}
メインを 青
サイドＡ（左）を 水色
サイドB（右）を ピンク
にしてみた。
カオス！
今回分の現状設定！
html {
font-size:12px !important;
*font-size:75% !important;/*forIE6IE7*/
}
body{
margin:0px;
padding:0px;
text-align:center;
font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica;
}
img{
border:0;
}
blockquote{
margin:12px 0;
padding:10px;
border:2px dotted #D4D4D4;
}
pre{
margin:0;
padding:0;
}
input,
textarea{
}
p{
margin:0;
padding:0;
}
.menu_frame ul,
.menu_frame li,
.menu_frame dl,
.menu_frame dt,
.menu_frame dd,
#comment_module ul,
#comment_module li,
#trackback ul,
#trackback li,
#reader_list ul,
#reader_list li,
#favorite_list ul,
#favorite_list li,
#bookmark_list ul,
#bookmark_list li{
margin:0;
padding:0;
list-style-type:none;
}
#frame{
width:800px;
margin:0 auto;
text-align:left;
}
#wrap{
width:800px;
}
#sub_main{
width:100%;
overflow:hidden;
}
#main{
overflow:hidden;
word-break:break-all;
}
#sub_a{
overflow:hidden;
word-break:break-all;
}
#sub_b{
overflow:hidden;
word-break:break-all;
}
#frame:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
#wrap:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
#frame{
display:inline-block;
min-height:1%;
}
#wrap{
display:inline-block;
min-height:1%;
}
/* Hides from IE-mac \*/
* html #frame{
height:1%;
}
* html #wrap{
height:1%;
}
#frame{
display:block;
}
#wrap{
display:block;
}
/* End hide from IE-mac */
a{
text-decoration:none;
color:#0066CC;
}
a:visited{
text-decoration:none;
color:#996699;
}
a:hover{
text-decoration:underline;
color:#FF3366;
}
#frame{
background-color:red;
}
#main{
color:yellow;
background-color:blue;
}
#sub_a{
color:black;
background-color:aqua;
}
#sub_b{
color:white;
background-color:fuchsia;
}
なんかおかしいけど
とりあえず今日をこれで！
また明日続きします！
Chiao!
C1423 PC用オリジナルスキン作成講座 第１回
C1425 PC用オリジナルスキン作成講座 第2回