So-net無料ブログ作成

①/*-----Common-----*/ [テンプレート基本]

今回からは前回で申し上げた様に
部分ごとの説明をさせていただきたく存じます。

※説明の際には、私が使用している
テンプレート「ウォーター」を例にしますので
多少異なることもあると存じますが
ご了承くださいませ。

それでは見て行きましょう
/*-----Common-----*/ <ブログ共通部分>
a:link{ text-decoration: none; color:#c87a10; }        
 未訪問リンクの文字装飾なし・色#c87a10
a:visited{ text-decoration: none; color:#c87a10; }
 訪問済みリンクの文字装飾なし・色#c87a10
a:active{ text-decoration: none; color:#c87a10; }
 その部分を選択しているときのリンク・文字装飾なし・色#c87a10
a:hover{ text-decoration: underline; color:#c87a10; }
 マウスが乗っている時の文字装飾が下線・色#c87a10
body {
background:#fafafc;
 背景色#fafafc
color:#333333;
 文字色:#333333
}
body=htmlタグ、Webページの中身の大元。
この場合はwebページに指定がない場合は
背景色#fafafc、文字色#333333となる。
blockquote {
margin:12px;
padding:6px;
border:1px solid #cccccc;
}
blockquote=htmlタグ、引用。記事作成の引用を使うと出来る。
この場合はmarginを上下左右で12px、paddingを上下左右で6px
枠線がsolid(シンプルな線)太さ1px、色はccccccとなる。
padding.png
【ブログバナー部分】
#container {
width :770px;
margin:0 auto;
line-height:1.4;
text-align:left;
background: url("/_common/skins/509/images/banner-bg2.jpg") no-repeat center top;
border-left: #1e1717 solid 1px;
border-right: #1e1717 solid 1px;
border-bottom: #1e1717 solid 1px;
}

幅770px
margin上下0 左右オート
行間1.4
テキスト配置左側
背景画像に/_common/skins/509/images/banner-bg2.jpgを指定。
繰り返しなしで配置は真ん中上。
左側・右側・下の枠線が色1e1717 単線 太さ1px
【ブログタイトル部分】
#banner {
height: 197px;
padding-top:25px;
clear:both;
}

たかさ197px
上部padding25px
回り込み解除
【ブログタイトル自体】
#banner h1{
margin:0;
font-family: Helvetica,Arial,sans-serif;
font-size: 22px;
padding-left: 18px;
padding-top: 58px;
}

余白なし
フォントの種類Helvetica,Arial,sans-serif;(左から最優先)
フォントの大きさ22px
padding左18px・上58px
【ブログタイトルのリンク】
#banner h1 a{
color:#ffffff;
line-height: 200%;
}
色はffffff(白)
行間文字の大きさと同じ
【サブタイトル部分】
#lead{
margin:0;
padding:75px 0 0 10px;
color: #ffffff;
}

余白なし
padding上75 右・下0 左10PX
以上駆け足の説明です。


しかし、あとは今までの応用です。
直接記述である<span style=>の部分がなくなるだけですので
取り敢えずやってみて、プレビューで確認してみて下さい。
分からないことがあれば、出来る限りの助言はしたいと思います。


時よ止まれ(2)  コメント(0)  トラックバック(0) 

時よ止まれ 2

コメント 0

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 0

トラックバックの受付は締め切りました
URYYYYYY

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。