site name
http://nanos.jp/your_id/
top
info
main
memo
mail
res
last up
イラストに１枚up
clap
広告
|
広告
|
広告
- ナノ -
--------------------------
キリトリ
--------------------------
ブルー
もあります。
素材
素材は自作です。こちらからダウンロードして、ご自分のサーバーにアップしてご使用下さい。
配色
文字色:#000000 背景色:#ffc9d2 リンク:#000000 訪問済:#999999 ｱｸﾃｨﾌﾞ:#ffc9d2
CSS
<style type="text/css"> /* 余白の初期化 */ * { margin:0; padding:0; } /* サイト全体 */ body { font-family:serif; text-align:center; margin:0 auto; } #all { text-align:left; line-height:1.2; font-size:80%; letter-spacing:1px; margin:15px auto 10px auto; background-color:#fff; <pc_only>width:600px;</pc_only> } /* 見出し */ h1 {font-size:20px; letter-spacing:3px; } h2 { background-image:url(▼素材URL); background-repeat:no-repeat; background-position:center left; padding-left:15px; font-size:16px; } /* リンク */ a { text-decoration:none; } a:hover { border-bottom:none; } /* フォーム */ input,textarea { <pc_only>width:300px;</pc_only> <mobile>width:auto;</mobile> background-color:#ffc9d2; border:2px dashed #fff; } <pc_only> input[type="submit"] { width:auto; padding:0 10px; } </pc_only>
/* ヘッダー */ #header { background-image:url(▼画像URL); background-repeat:repeat-x; background-position:top left; padding:20px 15px 10px 15px; font-size:80%; } /* メニュー */ #menu { background-image:url(♯sozai32_b_url♯); background-repeat:repeat; background-color:#ffc9d2; text-align:center; margin:0 auto; padding:5px 0; font-size:120%; clear:both; } <pc_only> #menu ul { overflow:hidden; } #menu ul li { list-style:none; float:left; width:100px; } #menu ul li a { display:block; text-align:center; margin:0 auto; width:100px; } #menu ul li a:hover { font-weight:bold; } </pc_only> /* メイン */ #main { margin:10px 15px; } /* 文字の行間調整 */ .box { margin-bottom:5px; } /* フッター */ #footer { background-image:url(▲画像URL); background-repeat:repeat-x; background-position:bottom left; text-align:right; padding:0 15px 15px 15px; } </style>
HTML
<div id="all"> <div id="header"> <h1>site name</h1> <address> http://nanos.jp/your_id/ </address> </div><!-- header --> <div id="menu"> <!-- PCのみ --> <pc_only><ul> <li><a href="○">top</a></li> <li><a href="○">info</a></li> <li><a href="○">main</a></li> <li><a href="○">memo</a></li> <li><a href="○">mail</a></li> <li><a href="○">res</a></li> </ul></pc_only> <!-- PCのみ --> <!-- 携帯とスマホ --> <mobile> <a href="○">info</a> <a href="○">main</a> <a href="○">memo</a> <a href="○">mail</a> <a href="○">res</a> </mobile> <!-- 携帯とスマホ --> </div><!-- menu --> <div id="main"> <div class="box"> <h2>last up</h2> <p><a href="○">イラストに１枚up</a></p> </div><!-- box --> <div class="box"> <h2>clap</h2> <form action="." method="."><input type="text" size="16" value="拍手ダミー" /><input type="submit" value="▼" /></form> </div><!-- box --> </div><!-- main --> <div id="footer"> <p>total12345</p> <p>since 2012/03/16</p> </div><!-- footer --> </div><!-- all -->
人気急上昇中のBL小説
BL小説 BLove
- ナノ -
