前回は
背景画像やヘッダー画像のスタイルシートの変更方法を説明しましたので、今回はテーブル等の変更のサンプルです。
面倒なので変更前との比較は行いません。
詳細編集の方法は
前回のものを参照してください。
またCSSの書き方は
「ちょっと休憩 スタイルシートについて考える」を参照してください。(新しくなってから制限が多いため使えないものが多いと思いますが)
/*/---------------
ブログのコメントテーブル-横幅580×任意---------------/*/
/*/--
※コメントへの返答がある場合、テーブル背景の画像のスタート位置が変わる---/*/
table#userCommentList{
margin:0;
padding:0;
width:580px;
}
/*/--
記事へのコメントのテーブル--/*/
table#userCommentList td{
vertical-align:top;
border-top:1px solid #ffffff;
border-right:1px solid #ffffff;
border-left:1px solid #575757;
border-bottom:1px solid #575757;
background:url(アップした画像のアドレス);
width:100%;
}
/*/--
コメントエリア(返信も含む)--/*/
table#userCommentList td div.commentArea{
background:url(アップした画像のアドレス);
padding:5px;
font-size:12px;
line-height:1.5;
}
/*/--
日付--/*/
table#userCommentList td div.commentDate{
background:url(アップした画像のアドレス);
text-align:left;
padding-left:10px;
font-size:10px;
line-height:0.5;
}
/*/--
タイトル--/*/
table#userCommentList td div.commentTitle{
color:#000;
padding-left:10px;
font-weight:bold;
font-size:12px;
}
/*/--
コメントするLINKの文字--/*/
div#MoveCommentForm{
text-align:right;
margin:5px 20px;
}
/*/---------------
プロフィールページ----------------/*/
/*/--
プロフィールページ左上のHandleName--/*/
div#HandleName{
margin:5px 10px 10px 10px;
clear:both;
font-weight:bold;
font-size:14px;
color:#222;
}
/*/--
プロフィールページのお友達,ファン,グループ,最新 ブログの文字--/*/
div.profileCategoryTitle{
margin:10px;
font-weight:bold;
color:#333;
}
/*/-----------------
プロフィール右基本設定-------------/*/
div#BodyBlockProfileMain{
margin-bottom:10px;
padding-bottom:10px;
float:right;
width:610px;
display:block;
overflow:hidden;
}
/*/--
プロフィール左背景等基本設定--/*/
div#BodyBlockProfileSide{
margin-bottom:10px;
padding-bottom:10px;
float:left;
width:300px;
display:block;
overflow:hidden;
background:url(アップした画像のアドレス);
}
/*/--
お友達募集メッセージ--/*/
div#SelfIntroduction{
margin:0 20px;
font-size:12px;
line-height:1.3;
}
/*/--
○ 人のお友達がいますの文字--/*/
div.memberCount{
margin:10px;
padding:10px 0 10px 20px;
font-weight:bold;
color:#333;
background:url(アップした画像のアドレス) top left no-repeat;
}
/*/--
友達のプロフィール写真、名前の設定--/*/
table.thumbnail div.thumbTitle{
width:90px;
text-align:left;
margin:5px auto 15px auto;
font-size:12px;
line-height:1.4;
}
/*/--
お友達一覧の文字--/*/
div#SideFriendListAll{
text-align:right;
margin:10px 8px 0 0;
font-size:12px;
}
/*/--
参加グループ一覧--/*/
div#SideGroupListAll{
text-align:right;
margin:10px 8px 0 0;
font-size:12px;
}
div#SideRecommendedList{
text-align:right;
margin:10px 8px 0 0;
font-size:12px;
}
/*/-------------------
最新 ブログ 基本設定 ----
borderが使えない-----/*/
table.newDocument{
width:100%;
}
/*/--
最新 ブログTD設定--/*/
table.newDocument td{
background:url(アップした画像のアドレス);
color:#222;
font-size:12px;
padding-left:10px;
}
/*/--
最新 ブログ日付テーブル--/*/
table.newDocument td.entryDate{
width:150px;
background:url(アップした画像のアドレス);
text-align:center;
color:#fff;
padding:0px;
}
/*/--
ブログ一覧の文字--/*/
div.newDocumentAll{
text-align:right;
margin:5px 10px 0 0;
font-size:12px;
}
/*/----------------
プロフィールのテーブル---
borderが使えない--------------/*/
table#UserProfile{
width:99%;
margin-left:1px;
}
/*/--
プロフィールのテーブルTH(タイトル部分)--/*/
table#UserProfile th{
width:150px;
vertical-align:middle;
font-weight:normal;
color:#fff;
font-size:12px;
background:url(アップした画像のアドレス);
}
/*/--
プロフィールのテーブル(詳細内容)--/*/
table#UserProfile td{
background:url(アップした画像のアドレス);
vertical-align:top;
padding-left:10px;
font-size:12px;
color:#222;
}
/*/------
登録日------/*/
div#MinkaraEntryDate{
text-align:right;
font-size:12px;
margin-right:3px;
}
/*/------------------------
サイドメニューのテーブル-----------------------/*/
/*/------
サイドメニュー基本設定------/*/
div.sideMenu{
width:298px;
margin-bottom:10px;
background:url(アップした画像のアドレス);
}
/*/------
サイドメニューテーブル内設定------/*/
div.sideMenuContent{
margin:10px;
font-size:12px;
}
/*/------
サイドメニュー内タイトル------/*/
div.sideMenuTitle{
height:25px;
margin:0px;
background:#202020;
color:#fcfcfc;
text-align:center;
}
/*/------
サイドメニュー内リンク設定------/*/
div#BodyBlockSide div.sideMenuTitle a{
color:#fff;
}
div#BodyBlockSide div.sideMenuTitle a:visited{
color:#fff;
}
div#BodyBlockSide div.sideMenuTitle a:hover{
color:#fff;
}
div#BodyBlockSide div.sideMenuTitle a:active{
color:#fff;
}
table#Calendar{
width:100%;
text-align:center;
}
/*/-----------------------
カレンダーテーブル-------------------------/*/
table#Calendar td.today{
/*/--------今日の日付--43×19-------/*/
border-top:1px solid #202020;
border-right:1px solid #202020;
border-left:1px solid #FEEBE2;
border-bottom:1px solid #FEEBE2;
background:url(アップした画像のアドレス);
color:#000;
}
/*/--------
日記を書いた日-43×19--------/*/
table#Calendar td.writingDate{
border-top:1px solid #575757;
border-right:1px solid #575757;
border-left:1px solid #EBEBEB;
border-bottom:1px solid #EBEBEB;
background:url(アップした画像のアドレス);
}
/*/---------------------
何シテル?---------------------/*/
/*/---
何シテル?中-横幅250----/*/
div#Nanisiteru{
width:250px;
margin:0 auto;
padding:5px;
background:url(アップした画像のアドレス) repeat-y;
font-size:12px;
color:#fff;
}
/*/---
何シテル?ヘッダー-横幅260×高さ16---/*/
div#NanisiteruHeader{
width:260px;
margin:0 auto;
height:16px;
background:url(アップした画像のアドレス) no-repeat center bottom;
}
/*/---
何シテル?フッター--横幅260×高さ18---/*/
div#NanisiteruFooter{
width:260px;
margin:0 auto;
height:18px;
background:url(アップした画像のアドレス) no-repeat center top;
}
div#Nanisiteru div{
text-align:right;
font-size:10px;
color:#fff;
margin:0px;
}
ul.userMakeList{
margin:5px 0 5px 25px;
padding:0px;
}
div.userMakeListTitle{
font-weight:bold;
}