So-net無料ブログ作成

②/*-----Content-----*/ [テンプレート基本]

前回に引き続き今回は②/*-----Content-----*/の
部分のを解説したいと思います。

/*-----Content-----*/(バナー以外の部分) #content { background:url(/_common/skins/509/images/content_bg.gif) repeat-y; } 背景画像に/_common/skins/509/images/content_bg.gifを指定。 画像はこちらです。content_bg.gif 縦方向の繰り返し。
/* Links */(リンクに関する部分)
【記事ページ(またはトップページ)の 記事タイトル上のブロック位置】 .archive-title{ margin-top:7px; margin-bottom: 6px; } margin上7px・下6px
【トラックバック送信ボタン下の部分】 .archive-bottom{ padding-top:3px; padding-bottom:6px; border-top: 1px solid #1e1717; } padding(詳細は前記事参照下さい)上3px・下6px 枠線上部に1pxの単線、色は1e1717
.archive-name{ float:left; } 記事タイトル上の部分と、トラックバック送信ボタンの 下の部分の回り込みが左側へ
【1つ前の記事のリンク】 .previousLink{ padding-left:12px; background:url(/_common/skins/509/images/arrowL_small.gif) no-repeat left center; } padding左側12px 背景画像/_common/skins/509/images/arrowL_small.gif(左側三角形二つの画像です) 繰り返しなし・左側に配置
【1つ次の記事のリンク】 .nextLink{ padding-right:12px; background:url(/_common/skins/509/images/arrowR_small.gif) no-repeat right center; } padding右12px 背景画像/_common/skins/509/images/arrowR_small.gif(右側三角形二つの画像です) 繰り返しなし・右側に配置
【記事タイトルの上のブログトップ文字と トラックバック送信ボタン下の ブログトップ文字の部分】 .archive-links{ float:right; padding-left:12px; background:url(/_common/skins/509/images/arrowT_small.gif) no-repeat left center; font-size:x-small; white-space:nowrap; } 。 回り込みが右側 padding左12px 背景画像/_common/skins/509/images/arrowT_small.gif(上側三角形二つの画像です) 繰り返しなし・左側に配置。 字の大きさ、やや小さめ(新規作成内の文字小) white-spaceプロパティは、 ソース中の半角スペース・タブ・改行の 表示の仕方を指定する際に使用します。 この場合 ソース中の連続する半角スペース・タブ・改行を、 1つの半角スペースとして表示します。 ボックスの大きさが指定されている場合にも、 自動的に改行されません。 ※white-spaceその他の値 normal ソース中の連続する半角スペース・タブ・改行を、 1つの半角スペースとして表示します。 ボックスの大きさが指定されている場合には、 その大きさに応じて自動的に改行されます。 pre ソース中の連続する半角スペース・タブ・改行を、 そのまま表示します。
/* Articles */(記事)
【記事タイトル上の部分と、 トラックバック送信ボタンの下まで 含む記事エリア部分】 #main { width:540px; padding-right: 12px; } 広さ540px padding右側12px
【記事本体部分】 .articles { width:539px; margin-top:10px; overflow:hidden; } 広さ539px margin上10px スクロールバーは常に非常時
【記事タイトル部分】 .articles-title { margin:0; margin-bottom:15px; padding: 3px 0px 3px 12px; background-color: #2a1402; font-size: small; color: #ffffff; } marginなし margin下15px padding上3px 右0 下3px 左12px 背景色2a1402 文字の大きさ small 文字の色 ffffff(白)
.articles-title a:link{ text-decoration: none; color:#ffffff; }  記事タイトルの未訪問リンク時、文字装飾なし、色ffffff白 .articles-title a:visited{ text-decoration: none; color:#ffffff; }  記事タイトル訪問時、文字装飾なし、色ffffff白 .articles-title a:active{ text-decoration: none; color:#ffffff; }  その部分を選択しているときのリンク・文字装飾なし・色ffffff白 .articles-title a:hover{ text-decoration: underline; color:#ffffff;}  記事タイトルにマウスが乗っている時、文字装飾下線、色ffffff白
【記事本体】.articles-body { line-height:1.6; margin:0 0 20px 0; } 行間1.6 margin上0 右0 下20px 左0
【トラックバック送信ボタンの下の 1つ前の記事|1つ次の記事 ブログトップ エリア】 .articles-bottom { margin-bottom:20px; } margin下20px
【記事内容エリアにある画像の設定】 .articles-body img { margin-right: 6px; margin-bottom: 6px; } margin右6px・下6px
【投稿時間、Nice!、コメント、 トラックバックの表示されている部分】 .posted{ padding:3px 0 30px 0; border-top: #531f4f dotted 1px; font-size:x-small; } padding 上3px 右0 下30px 左0 枠線 上側のみ 色531f4f ドット、太さ1px 文字の大きさ x-small
. どのCSSがどこに対応しているか分かれば 自分のお好みの調整が出来ると思います。

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

時よ止まれ 2

コメント 0

コメントを書く

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

トラックバック 0

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

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

×

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