site name
http://nanos.jp/yourID/
アバウト
メインコンテンツ
リアルタイム
ブックマーク
rank
rank
rank
material
タイトル、素材は
誤爆
様よりお借りしました。(→大正ロマンティック)
screen shot
対応機種から見るとこんな感じです。
HEAD
<link href='http://fonts.googleapis.com/css?family=Unkempt' rel='stylesheet' type='text/css'> <style type="text/css"><!-- * { margin: 0 auto; padding: 0 auto;} /*-------------------------------------- レイアウト ---------------------------------------*/ body{ font-size:82%; font-family: 'Unkempt',DotumChe,serif; background-color:#fff; /*背景色*/ color: #6b3f31; /*文字色*/ } /* 余白、行間、幅 */ .yohaku { text-align:left; max-width : 300px; letter-spacing:1px; line-height:1.9; /* 背景画像 */ background-image:url(ここに素材URL); background-repeat:no-repeat; background-position:85% 10%; padding:3%;} /* サイトタイトルの装飾、白い縁取り */ span{ font-family: Small Fonts; text-shadow: 0 0 5px #fff, 0 0 2px #fff, 0 0 0.4px #fff;} /*-------------------------------------- リンクの設定 ---------------------------------------*/ a { color: #fff; /*リンク色*/ background-color:#b7282e; /*背景色*/ border: 1px solid #000; /*枠*/ /*リンクをゆっくり表示するエフェクト*/ text-decoration: none; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; padding:2px; margin:2px 0 2px 2px;} /* オンマウス時のリンク色 */ a:hover { color: #fff; background:#4d5aaf;} /*-------------------------------------- フォームの設定 ---------------------------------------*/ select,input,input[type="text"] { width:auto; margin-top:2px; padding:1px; /* 文字色 */ color:#0d0015; /* 背景色 */ background-color:#fff; /* 枠の色 */ border: 2px solid #000; /* 背景を透過する設定 */ opacity: 0.9;} /* 送信ボタンの設定 */ input[type="number"],input[type="password"],input[type="submit"]{ width:auto; padding-right:5px; padding-left:5px; margin:1%; text-align:center; font-family: 'Unkempt',DotumChe,serif; font-size:13px; /* 文字色 */ color:#fff; /* 背景色 */ background-color:#0d0015; /* 枠の色 */ border: 2px solid #000;} /* 送信ボタン (オンマウス時の設定) */ input[type="submit"]:hover,input[type="reset"]:hover{ background:#a22041; color:#999;} /* コピーボックスなど、テキストエリアの設定 */ textarea { width:auto; font-family: 'Unkempt',DotumChe,serif; font-size:13px; /* 文字色 */ color:#000; /* 背景色 */ background-color:#fff; /* 枠の色 */ border: 2px solid #000;} /* テキストエリア (オンマウス時の設定) */ textarea:focus,select:focus,input[type]:focus{ border: 2px solid #b7282e;} --></style>
全体レイアウト
<div class="yohaku"> <span><h2>site name</h2>http://nanos.jp/yourID/</span> <a href="">アバウト</a> <a href="">メインコンテンツ</a> <a href="">リアルタイム</a> <a href="">ブックマーク</a> ★ここに拍手 rank<a href="">rank</a> </div>
カラーコード
背景色、文字色、リンク色はHEAD内に指定してあるので変更される場合はHEADを書き換えてください。
アクティブリンク色#706caa
by
kusaka
人気急上昇中のBL小説
BL小説 BLove
- ナノ -