▽ Novel
田中
初恋は晴れた日に
熱病と共に
山田
夜のにおいはもうしない
無知な青にさらわれた
狼はいくじなし
鈴木
パンをかじるように
すべての花はきみのもの
加藤
ハートにはスパンコールと情熱を
気まぐれなフリル
常温の鼓動
thanks title
サンタナインの街角で
▽ Attention
段落ごとにリンク背景色が変わるテンプレートです。
<div class="menu"></div>で囲むと
赤
<div class="menu2">は
青
<div class="menu3">は
黄色
<div class="menu4">は
緑
になります。
screenshot
対応機種から見るとこんな感じです。
HEAD
<style type="text/css"><!-- *{ margin: 0 auto; padding: 0;} /*ページ全体の設定(ここを編集すると色変更できます)*/ body{ font-size:12px; font-family:メイリオ, Comic Sans MS, sans-serif; /*背景色*/ background-color:#ffffff; /*文字色*/ color: #707070; } /*リンク色*/ a{ color: #404040; /*リンクをゆっくり表示する設定*/ text-decoration: none; -webkit-transition: 0.2s; -moz-transition: 0.2s; -o-transition: 0.2s; -ms-transition: 0.2s; transition: 0.2s; /*角を丸くする設定*/ border-radius: 3px;} /*オンマウス時の動作(現在の設定 跳ねる)*/ a:hover{ position: relative; top: 1px;} /*リンク色が変わる段落(現在の設定 左寄せ)*/ .menu { text-align:left;} .menu2 { text-align:left;} .menu3 { text-align:left;} .menu4 { text-align:left;} /*段落ごとのリンク色指定*/ .menu a { background: linear-gradient(transparent 60%, #F0A8A8 0%);} /*赤*/ .menu2 a { background: linear-gradient(transparent 60%, #A8CCF0 0%);} /*青*/ .menu3 a { background: linear-gradient(transparent 60%, #F0F0A8 0%);} /*黄色*/ .menu4 a { background: linear-gradient(transparent 60%, #BAF0A8 0%);} /*緑*/ /*ページの幅、行間の設定*/ .yohaku { max-width: 500px ; line-height:1.5; letter-spacing:1px; padding: 4%;} /*見出し*/ span.midashi { font-size:18px; font-family:Comic Sans MS; letter-spacing:3px; border-bottom:dashed #999999 1px;} --></style>
全体レイアウト
<div class="yohaku"> <span class="midashi">▽ Novel</span> <div class="menu"> ここにリンク(赤) </div> <div class="menu2"> ここにリンク(青) </div> <div class="menu3"> ここにリンク(黄色) </div> <div class="menu4"> ここにリンク(緑) </div></div>
リンク色を変更・追加したい場合はHEADの中にこちらのタグを追加してください。
【例】menu5、menu6…など
.menu番号 { text-align:left;} .menu番号 a { background: linear-gradient(transparent 60%, #カラーコード 0%);} 二つの番号は同じ数字にしてください
by
kusaka
「#エロ」のBL小説を読む
BL小説 BLove
- ナノ -