スキン「CSS-トラディショナル」

ぱっと見た目「ワイド」のままだけど実はtableを使わずCSSだけでなんとかしたスキン。これなら携帯からみたときに普通に見られるんじゃないかと。
あと文字が小さすぎるのキライなので90%。smallってIEだと100%と変わらなかったりする(ひどい!)ので…



右サイドバー、本文=450, ロゴ=150,メニュー150

--------------------- 全体 ---------------------------
<div class="tc_pageall">
<div class="tc_head">
<div class="tc_head_inner">
<h1><$header$></h1>
<div class="url">
<$blogurl$>
</div>
</div>
</div>
<div class="tc_body">
<div class="tc_content">
<$post$>
<div class="tc_navi">
<$prepage type=1$>
<span style="width:50px"> </span>
<$nextpage type=1$>
</div>
</div>

<div class="tc_sidebar">
<div class="tc_usermenu">
<$adminmenu type=1$>
</div>
<div class="tc_menutop"></div>
<div class="tc_menu">
<div class="tc_menuitem">
<$logoimage type=1$>
<$description$>
<$nick$>
</div>

<$calendar type=1$>
<$menuright$>
<$banner type=1$>
<$xml$>
</div>
<div class="tc_menubottom"></div>
</div>

</div>
</div>

---------------- 本文 -------------------------------
<div class="tc_post">
<div class="tc_post_head">
<h2><$postsubject$></h2>
<div class="tc_post_admin">
<$postadmin type=1$>
</div>
</div>
<div class="tc_post_body">
<$postcont$>
</div>
<div class="tc_post_tail">
<$posttail$>
</div>
<$cmtjs$>
</div>

----------------- メニュー ----------------------------
<div class="tc_menuitem">
<div class="tc_menuitem_title"><$mntitle$></div>
<$mnbody$>
</div>


----------------- CSS -------------------------------
/* --------------- overall styles ------------------- */
body {
font-size:90%;
background : #e7e3d6;
margin : 0;
padding : 0;
}
h1 {
margin:0;
padding:0;
font-size:140%;
}
h2 {
font-size:120%;
}
a:link {
color: #7d3b1a;
text-decoration: none;
}
a:visited {
color: #6b5145;
text-decoration: none;
}
a:active {
color: #0000ff;
text-decoration: none;
}
a:hover {
color: #a63d0a;
text-decoration: underline;
}
div {
margin-left:0;
margin-right;0;
margin-top:0;
margin-bottom:0;
padding-left:0;
padding-right:0;
padding-top:0;
padding-bottom:0;
}



/* --------------- page layout ------------------------ */
div.tc_pageall {
width:100%;
}
div.tc_head {
background-image:url(http://md.exblog.jp/skn/img/a/01/01/8/top_5.gif);
width:100%;
height:76px;
overflow:hidden;
background-color:#e7e3d6;
border-top:1px solid #685440;
}
div.tc_head_inner {
height:76px;
overflow:hidden;
background-image:url(http://md.exblog.jp/skn/img/a/01/01/8/top_left_5.gif);
background-repeat:no-repeat;
padding-top:15px;
padding-left:140px;
}
div.tc_body {
width:680px;
margin-left:auto;
margin-right:auto;
}
div.tc_content {
padding-top:2em;
width:500px;
overflow:hidden;
float:left;
}
div.tc_sidebar {
width:180px;
overflow:hidden;
float:right;
}

/* ----------------- header styles -------------------*/
h1 a {
color:black !important;
}
div.url {
font-size:8pt;
}
div.url a {
color:black !important;
}

/* ------------------ content styles --------------------- */
div.tc_post {
margin-bottom : 35px;
padding-bottom: 15px;
margin-left:5px;
width:470px;
overflow:hidden;
border-bottom:1px dashed #bbbbbb;
}
div.tc_post_head {
font-size:12pt;
font-weight:bold;
margin-bottom : 15px;
padding-bottom : 3px;
}
div.tc_post_admin {
text-align : right;
font-size:9pt;
height:1em;
}
div.tc_post_body {
line-height : 170%;
margin-left:10px;
margin-right:10px;
width:450px;
overflow:hidden;
margin-bottom : 2.5em;
}
div.tc_post_body img {
max-width:450px !important;
}
div.tc_post_tail {
margin-top : 10px;
text-align : right;
}
div.tc_post_tail a {
font-size : 8pt !important;
}
img.image_top {
}
img.image_left {
flow:left;
}
img.image_right {
flow:right;
}
img.image_mid {
clear:both;
margin-right:auto;
margin-left:auto;
}


/* -------------- menu styles -------------------------*/
div.tc_menutop {
background-image : url(http://md.exblog.jp/skn/img/a/01/01/8/mn_top_5.gif);
background-repeat : no-repeat;
width : 180px;
height : 32px;
font-size : 1pt;
}

div.tc_menu {
background-image : url(http://md.exblog.jp/skn/img/a/01/01/8/mn_body_5.gif);
width : 180px;
background-color:#b7d1e1;
}
div.tc_menubottom {
background-image : url(http://md.exblog.jp/skn/img/a/01/01/8/mn_bottom_5.gif);
background-repeat : no-repeat;
width : 180px;
height : 16px;
font-size : 1pt;
}

div.tc_menuitem {
font-size:9pt;
margin-left:10px;
margin-bottom:1.5em;
width:150px;
overflow:hidden;
line-height: 150%;
}
div.tc_menuitem_title {
font-weight:bold;
border-bottom : 1px #aaa solid;
}


/* ------------ usermenu ----------------------------- */
div.tc_usermenu {
margin-top: 5px;
padding-top: 3px;
margin-bottom: 3px;
padding-bottom:5px;
margin-left:10px;
width:150px;
border-top : 1px solid gray;
border-bottom : 1px solid gray;
font-size:9pt;
text-align:center;
}


/* ------------ menu item styles --------------------- */
/* profile */
img.LOGO {
}

/* banner */
div.BANNER {
margin:10px;
}

/* search */
.TXTFLD {
font-size:8pt;
color:#000;
border:1px solid #666678;
background-color:#fff;
}



/* calendar */
div.CAL_TOP {
}
div.CAL {
margin : 20px 0px 20px 10px;
width : 150px;
text-align : center;
}
div.CAL_HEAD {
font : 8pt/150% verdana;
margin-bottom: 5px;
}
div.CAL_BODY {
width : 150px;
}
div.CAL_BOTTOM {
}
td.CAL_TR {
}
tr.CAL_TR td {
border-right:1px solid gray;
border-bottom:1px solid gray;
font : 7pt/170% verdana;
text-align : center;
}
td.CAL {
}
td.CAL_DAY {
}
td.CAL_SUN {
color : #d36654;
}
td.CAL_SAT {
color : #3572a1;
}
td.CAL_TODAY {
background : #e3e3e3;
color : #3d5586;
}

/* xml */
div.XML {
font-face : verdana;
text-align : center;
}

/* memo */
div.MEMOBODY {
width : 150px;
overflow : hidden;
}


/* ------------------- comment styles -------------------*/
div.COMMENT {
border : 1px #d3d3d3 solid;
background : #f7f7f7; padding : 15px; margin : 20px 0px;
}
div.COMMENT_BODY {
margin-bottom : 20px;
line-height : 150%;
}
div.COMMENT_TAIL {
margin : 8px 0px 5px;
font : 8pt/150% tahoma;
color : #777;
}
div.COMMENT_INPUT {
margin-top : 20px;
border-top : 1px #aaa dotted;
padding-top : 20px;
}
div.COMMENT_LINE {
border-top : 1px #aaa dotted;
margin : 10px 0px 15px;
}

/* ------------------ misc styles -------------------*/
div.TRACK_TOP {
line-height : 150%;
}

div.ARCHIVE_HEAD {
font-weight : bold;
margin-bottom : 10px;
}
div.ARCHIVE_BODY {
margin : 20px 0px;
line-height : 160%;
padding-bottom : 100px;
}

img.BOOKMK {
margin : 10px;
border : 0px;
}
img.USERMENU {

}

.SMALL {
font-size:9pt;
}
.DATE {
font-size:9pt;
}
.TIME {
font-size:9pt;
}
.AUTHOR {
font-weight:bold;
font-size:9pt;
}
[PR]
by tockri | 2005-01-30 14:44 | ├ コンピュータ
移転しました。
by tockri
S M T W T F S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30
最新のトラックバック
[media][gove..
from bewaad institu..
甘やかされた男たち
from とっくりばー
~が下手
from たのしい検索・ゆかいな検索
例えバトン
from ひまわりてんびんへの道
例えバトン
from 明日は明日のホラを吹く-To..
リンク
ライセンス

クリエイティブ・コモンズ・ライセンス

このブログのテキストおよび画像は、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。




検索
ファン
ブログジャンル
画像一覧