*サイトのCSSを作ってみる [#i3f818a8] 腕に自信のある人とか、暇つぶしにチャレンジしたい人は、以下の css を改造して、このページに貼り付けてください。~ もちろん、一から作ってもOK。 **オリジナルの CSS [#u17e00a2] コピペして使って。 >@charset "EUC-JP"; >/* this @charset is for mozilla's bug */ >/* >///////////////////////////////////////////////// >// PukiWiki - Yet another WikiWikiWeb clone. >// >// $Id: default.ja.css,v 1.32 2004/07/31 03:09:20 henoheno Exp $ >// >*/ > >pre, dl, ol, p, blockquote >{ > line-height:130%; >} > >blockquote >{ > margin-left:32px; >} > >body,td >{ > color:black; > background-color:white; > margin-left:2%; > margin-right:2%; > font-size:90%; > font-family:verdana, arial, helvetica, Sans-Serif; >} > >a:link >{ > color:#215dc6; > background-color:inherit; > text-decoration:none; >} > >a:active >{ > color:#215dc6; > background-color:#CCDDEE; > text-decoration:none; >} > >a:visited >{ > color:#a63d21; > background-color:inherit; > text-decoration:none; >} > >a:hover >{ > color:#215dc6; > background-color:#CCDDEE; > text-decoration:underline; >} > >h1, h2, h3, h4, h5, h6 >{ > font-family:verdana, arial, helvetica, Sans-Serif; > color:inherit; > background-color:#DDEEFF; > padding:.3em; > border:0px; > margin:0px 0px .5em 0px; >} > >h1.title >{ > font-size: 30px; > font-weight:bold; > background-color:transparent; > padding: 12px 0px 0px 0px; > border: 0px; > margin: 12px 0px 0px 0px; >} > >dt >{ > font-weight:bold; > margin-top:1em; > margin-left:1em; >} > >pre >{ > border-top:#DDDDEE 1px solid; > border-bottom:#888899 1px solid; > border-left:#DDDDEE 1px solid; > border-right:#888899 1px solid; > padding:.5em; > margin-left:1em; > margin-right:2em; > white-space:pre; > color:black; > background-color:#F0F8FF; >} > >img >{ > border:none; > vertical-align:middle; >} > >ul >{ > margin-top:.5em; > margin-bottom:.5em; > line-height:130%; >} > >em >{ > font-style:italic; >} > >strong >{ > font-weight:bold; >} > >thead td.style_td, >tfoot td.style_td >{ > color:inherit; > background-color:#D0D8E0; >} >thead th.style_th, >tfoot th.style_th >{ > color:inherit; > background-color:#E0E8F0; >} >.style_table >{ > padding:0px; > border:0px; > margin:auto; > text-align:left; > color:inherit; > background-color:#ccd5dd; >} >.style_th >{ > padding:5px; > margin:1px; > text-align:center; > color:inherit; > background-color:#EEEEEE; >} >.style_td >{ > padding:5px; > margin:1px; > color:inherit; > background-color:#EEF5FF; >} > >ul.list1 >{ > list-style-type:disc; >} >ul.list2 >{ > list-style-type:circle; >} >ul.list3 >{ > list-style-type:square; >} >ol.list1 >{ > list-style-type:decimal; >} >ol.list2 >{ > list-style-type:lower-roman; >} >ol.list3 >{ > list-style-type:lower-alpha; >} > >div.ie5 >{ > text-align:center; >} > >span.noexists >{ > color:inherit; > background-color:#FFFACC; >} > >.small >{ > font-size:80%; >} > >.super_index >{ > color:#DD3333; > background-color:inherit; > font-weight:bold; > font-size:60%; > vertical-align:super; >} > >a.note_super >{ > color:#DD3333; > background-color:inherit; > font-weight:bold; > font-size:60%; > vertical-align:super; >} > >div.jumpmenu >{ > font-size:60%; > text-align:right; >} > >hr.full_hr >{ > border-style:ridge; > border-color:#333333; > border-width:1px 0px; >} >hr.note_hr >{ > width:90%; > border-style:ridge; > border-color:#333333; > border-width:1px 0px; > text-align:center; > margin:1em auto 0em auto; >} > >span.size1 >{ > font-size:xx-small; > line-height:130%; > text-indent:0px; > display:inline; >} >span.size2 >{ > font-size:x-small; > line-height:130%; > text-indent:0px; > display:inline; >} >span.size3 >{ > font-size:small; > line-height:130%; > text-indent:0px; > display:inline; >} >span.size4 >{ > font-size:medium; > line-height:130%; > text-indent:0px; > display:inline; >} >span.size5 >{ > font-size:large; > line-height:130%; > text-indent:0px; > display:inline; >} >span.size6 >{ > font-size:x-large; > line-height:130%; > text-indent:0px; > display:inline; >} >span.size7 >{ > font-size:xx-large; > line-height:130%; > text-indent:0px; > display:inline; >} > >/* html.php/catbody() */ >strong.word0 >{ > background-color:#FFFF66; > color:black; >} >strong.word1 >{ > background-color:#A0FFFF; > color:black; >} >strong.word2 >{ > background-color:#99FF99; > color:black; >} >strong.word3 >{ > background-color:#FF9999; > color:black; >} >strong.word4 >{ > background-color:#FF66FF; > color:black; >} >strong.word5 >{ > background-color:#880000; > color:white; >} >strong.word6 >{ > background-color:#00AA00; > color:white; >} >strong.word7 >{ > background-color:#886800; > color:white; >} >strong.word8 >{ > background-color:#004699; > color:white; >} >strong.word9 >{ > background-color:#990099; > color:white; >} > >/* html.php/edit_form() */ >.edit_form >{ > clear:both; >} > >/* pukiwiki.skin.*.php */ >div#header >{ > padding:0px; > margin:0px; >} > >div#navigator >{ > clear:both; > padding:4px 0px 0px 0px; > margin:0px; >} > >td.menubar >{ > width:9em; > vertical-align:top; >} > >div#menubar >{ > width:9em; > padding:0px; > margin:4px; > word-break:break-all; > font-size:90%; > overflow:hidden; >} > >div#menubar ul >{ > margin:0px 0px 0px .5em; > padding:0px 0px 0px .5em; >} > >div#menubar ul li >{ > line-height:110%; >} > >div#menubar h4 >{ > font-size:110%; >} > >div#body >{ > padding:0px; > margin:0px 0px 0px .5em; >} > >div#note >{ > clear:both; > padding:0px; > margin:0px; >} > >div#attach >{ > clear:both; > padding:0px; > margin:0px; >} > >div#toolbar >{ > clear:both; > padding:0px; > margin:0px; > text-align:right; >} > >div#lastmodified >{ > font-size:80%; > padding:0px; > margin:0px; >} > >div#related >{ > font-size:80%; > padding:0px; > margin:16px 0px 0px 0px; >} > >div#footer >{ > font-size:70%; > padding:0px; > margin:16px 0px 0px 0px; >} > >div#preview >{ > color:inherit; > background-color:#F5F8FF; >} > >img#logo >{ > float:left; > margin-right:20px; >} > >/* aname.inc.php */ >.anchor >{ >} >.anchor_super >{ > font-size:xx-small; > vertical-align:super; >} > >/* br.inc.php */ >br.spacer >{ >} > >/* calendar*.inc.php */ >.style_calendar >{ > padding:0px; > border:0px; > margin:3px; > color:inherit; > background-color:#CCD5DD; > text-align:center; >} > >.style_td_caltop >{ > padding:5px; > margin:1px; > color:inherit; > background-color:#EEF5FF; > font-size:80%; > text-align:center; >} > >.style_td_today >{ > padding:5px; > margin:1px; > color:inherit; > background-color:#FFFFDD; > text-align:center; >} > >.style_td_sat >{ > padding:5px; > margin:1px; > color:inherit; > background-color:#DDE5FF; > text-align:center; >} > >.style_td_sun >{ > padding:5px; > margin:1px; > color:inherit; > background-color:#FFEEEE; > text-align:center; >} > >.style_td_blank >{ > padding:5px; > margin:1px; > color:inherit; > background-color:#EEF5FF; > text-align:center; >} > >.style_td_day >{ > padding:5px; > margin:1px; > color:inherit; > background-color:#EEF5FF; > text-align:center; >} > >.style_td_week >{ > padding:5px; > margin:1px; > color:inherit; > background-color:#DDE5EE; > font-size:80%; > font-weight:bold; > text-align:center; >} > >/* clear.inc.php */ >.clear{ > margin:0px; > clear:both; >} > >/* counter.inc.php */ >div.counter >{ > font-size:70%; >} > >/* diff.inc.php */ >span.diff_added >{ > color:blue; > background-color:inherit; >} > >span.diff_removed >{ > color:red; > background-color:inherit; >} > >/* hr.inc.php */ >hr.short_line >{ > text-align:center; > width:80%; > border-style:solid; > border-color:#333333; > border-width:1px 0px; >} > >/* include.inc.php */ >h5.side_label >{ > text-align:center; >} > >/* navi.inc.php */ >ul.navi >{ > margin:0px; > padding:0px; > text-align:center; >} > >li.navi_none >{ > display:inline; > float:none; >} > >li.navi_left >{ > display:inline; > float:left; > text-align:left; >} > >li.navi_right >{ > display:inline; > float:right; > text-align:right; >} > >/* new.inc.php */ >span.comment_date >{ > font-size:x-small; >} >span.new1 >{ > color:red; > background-color:transparent; > font-size:x-small; >} >span.new5 >{ > color:green; > background-color:transparent; > font-size:xx-small; >} > >/* popular.inc.php */ >span.counter >{ > font-size:70%; >} >ul.popular_list >{ >/* > padding:0px; > border:0px; > margin:0px 0px 0px 1em; > word-wrap:break-word; > word-break:break-all; >*/ >} > >/* recent.inc.php,showrss.inc.php */ >ul.recent_list >{ >/* > padding:0px; > border:0px; > margin:0px 0px 0px 1em; > word-wrap:break-word; > word-break:break-all; >*/ >} > >/* ref.inc.php */ >div.img_margin >{ > margin-left:32px; > margin-right:32px; >} > >/* vote.inc.php */ >td.vote_label >{ > color:inherit; > background-color:#FFCCCC; >} >td.vote_td1 >{ > color:inherit; > background-color:#DDE5FF; >} >td.vote_td2 >{ > color:inherit; > background-color:#EEF5FF; >} @charset "EUC-JP"; /* this @charset is for mozilla's bug */ /* ///////////////////////////////////////////////// // PukiWiki - Yet another WikiWikiWeb clone. // // $Id: default.ja.css,v 1.32 2004/07/31 03:09:20 henoheno Exp $ // */ pre, dl, ol, p, blockquote { line-height:130%; } blockquote { margin-left:32px; } body,td { color:black; background-color:white; margin-left:2%; margin-right:2%; font-size:90%; font-family:verdana, arial, helvetica, Sans-Serif; } a:link { color:#215dc6; background-color:inherit; text-decoration:none; } a:active { color:#215dc6; background-color:#CCDDEE; text-decoration:none; } a:visited { color:#a63d21; background-color:inherit; text-decoration:none; } a:hover { color:#215dc6; background-color:#CCDDEE; text-decoration:underline; } h1, h2, h3, h4, h5, h6 { font-family:verdana, arial, helvetica, Sans-Serif; color:inherit; background-color:#DDEEFF; padding:.3em; border:0px; margin:0px 0px .5em 0px; } h1.title { font-size: 30px; font-weight:bold; background-color:transparent; padding: 12px 0px 0px 0px; border: 0px; margin: 12px 0px 0px 0px; } dt { font-weight:bold; margin-top:1em; margin-left:1em; } pre { border-top:#DDDDEE 1px solid; border-bottom:#888899 1px solid; border-left:#DDDDEE 1px solid; border-right:#888899 1px solid; padding:.5em; margin-left:1em; margin-right:2em; white-space:pre; color:black; background-color:#F0F8FF; } img { border:none; vertical-align:middle; } ul { margin-top:.5em; margin-bottom:.5em; line-height:130%; } em { font-style:italic; } strong { font-weight:bold; } thead td.style_td, tfoot td.style_td { color:inherit; background-color:#D0D8E0; } thead th.style_th, tfoot th.style_th { color:inherit; background-color:#E0E8F0; } .style_table { padding:0px; border:0px; margin:auto; text-align:left; color:inherit; background-color:#ccd5dd; } .style_th { padding:5px; margin:1px; text-align:center; color:inherit; background-color:#EEEEEE; } .style_td { padding:5px; margin:1px; color:inherit; background-color:#EEF5FF; } ul.list1 { list-style-type:disc; } ul.list2 { list-style-type:circle; } ul.list3 { list-style-type:square; } ol.list1 { list-style-type:decimal; } ol.list2 { list-style-type:lower-roman; } ol.list3 { list-style-type:lower-alpha; } div.ie5 { text-align:center; } span.noexists { color:inherit; background-color:#FFFACC; } .small { font-size:80%; } .super_index { color:#DD3333; background-color:inherit; font-weight:bold; font-size:60%; vertical-align:super; } a.note_super { color:#DD3333; background-color:inherit; font-weight:bold; font-size:60%; vertical-align:super; } div.jumpmenu { font-size:60%; text-align:right; } hr.full_hr { border-style:ridge; border-color:#333333; border-width:1px 0px; } hr.note_hr { width:90%; border-style:ridge; border-color:#333333; border-width:1px 0px; text-align:center; margin:1em auto 0em auto; } span.size1 { font-size:xx-small; line-height:130%; text-indent:0px; display:inline; } span.size2 { font-size:x-small; line-height:130%; text-indent:0px; display:inline; } span.size3 { font-size:small; line-height:130%; text-indent:0px; display:inline; } span.size4 { font-size:medium; line-height:130%; text-indent:0px; display:inline; } span.size5 { font-size:large; line-height:130%; text-indent:0px; display:inline; } span.size6 { font-size:x-large; line-height:130%; text-indent:0px; display:inline; } span.size7 { font-size:xx-large; line-height:130%; text-indent:0px; display:inline; } /* html.php/catbody() */ strong.word0 { background-color:#FFFF66; color:black; } strong.word1 { background-color:#A0FFFF; color:black; } strong.word2 { background-color:#99FF99; color:black; } strong.word3 { background-color:#FF9999; color:black; } strong.word4 { background-color:#FF66FF; color:black; } strong.word5 { background-color:#880000; color:white; } strong.word6 { background-color:#00AA00; color:white; } strong.word7 { background-color:#886800; color:white; } strong.word8 { background-color:#004699; color:white; } strong.word9 { background-color:#990099; color:white; } /* html.php/edit_form() */ .edit_form { clear:both; } /* pukiwiki.skin.*.php */ div#header { padding:0px; margin:0px; } div#navigator { clear:both; padding:4px 0px 0px 0px; margin:0px; } td.menubar { width:9em; vertical-align:top; } div#menubar { width:9em; padding:0px; margin:4px; word-break:break-all; font-size:90%; overflow:hidden; } div#menubar ul { margin:0px 0px 0px .5em; padding:0px 0px 0px .5em; } div#menubar ul li { line-height:110%; } div#menubar h4 { font-size:110%; } div#body { padding:0px; margin:0px 0px 0px .5em; } div#note { clear:both; padding:0px; margin:0px; } div#attach { clear:both; padding:0px; margin:0px; } div#toolbar { clear:both; padding:0px; margin:0px; text-align:right; } div#lastmodified { font-size:80%; padding:0px; margin:0px; } div#related { font-size:80%; padding:0px; margin:16px 0px 0px 0px; } div#footer { font-size:70%; padding:0px; margin:16px 0px 0px 0px; } div#preview { color:inherit; background-color:#F5F8FF; } img#logo { float:left; margin-right:20px; } /* aname.inc.php */ .anchor { } .anchor_super { font-size:xx-small; vertical-align:super; } /* br.inc.php */ br.spacer { } /* calendar*.inc.php */ .style_calendar { padding:0px; border:0px; margin:3px; color:inherit; background-color:#CCD5DD; text-align:center; } .style_td_caltop { padding:5px; margin:1px; color:inherit; background-color:#EEF5FF; font-size:80%; text-align:center; } .style_td_today { padding:5px; margin:1px; color:inherit; background-color:#FFFFDD; text-align:center; } .style_td_sat { padding:5px; margin:1px; color:inherit; background-color:#DDE5FF; text-align:center; } .style_td_sun { padding:5px; margin:1px; color:inherit; background-color:#FFEEEE; text-align:center; } .style_td_blank { padding:5px; margin:1px; color:inherit; background-color:#EEF5FF; text-align:center; } .style_td_day { padding:5px; margin:1px; color:inherit; background-color:#EEF5FF; text-align:center; } .style_td_week { padding:5px; margin:1px; color:inherit; background-color:#DDE5EE; font-size:80%; font-weight:bold; text-align:center; } /* clear.inc.php */ .clear{ margin:0px; clear:both; } /* counter.inc.php */ div.counter { font-size:70%; } /* diff.inc.php */ span.diff_added { color:blue; background-color:inherit; } span.diff_removed { color:red; background-color:inherit; } /* hr.inc.php */ hr.short_line { text-align:center; width:80%; border-style:solid; border-color:#333333; border-width:1px 0px; } /* include.inc.php */ h5.side_label { text-align:center; } /* navi.inc.php */ ul.navi { margin:0px; padding:0px; text-align:center; } li.navi_none { display:inline; float:none; } li.navi_left { display:inline; float:left; text-align:left; } li.navi_right { display:inline; float:right; text-align:right; } /* new.inc.php */ span.comment_date { font-size:x-small; } span.new1 { color:red; background-color:transparent; font-size:x-small; } span.new5 { color:green; background-color:transparent; font-size:xx-small; } /* popular.inc.php */ span.counter { font-size:70%; } ul.popular_list { /* padding:0px; border:0px; margin:0px 0px 0px 1em; word-wrap:break-word; word-break:break-all; */ } /* recent.inc.php,showrss.inc.php */ ul.recent_list { /* padding:0px; border:0px; margin:0px 0px 0px 1em; word-wrap:break-word; word-break:break-all; */ } /* ref.inc.php */ div.img_margin { margin-left:32px; margin-right:32px; } /* vote.inc.php */ td.vote_label { color:inherit; background-color:#FFCCCC; } td.vote_td1 { color:inherit; background-color:#DDE5FF; } td.vote_td2 { color:inherit; background-color:#EEF5FF; } オリジナルソースが見づらいから 変更してみた・・・~ 行頭の">"(引用符)が意図的（置換しやすいように）であったらゴメン~ でも、行頭に" "にしたから置換しにくくはなっていないと思うよ。
