ツバメとツバキ

－設定・名前変換－
文章レイアウト

01 君に逢いに行く

01. ひなたぼっこ
02. 坂道の上にあるのは
03. おいしいヒント
04. 着地成功
05. レンズの奥に宿る

02 花びらひとひら

06. ノヲトのはし切れ
07. 突然のチャイム
08. からっぽな箱
09. あやしい雲行き
10. そう、言った

03 揺れて触れて

11. プラスチック紅色
12. 手摘みされたもの

…

リクエスト内容

No.34 鳥谷さん
シンプルで少し物悲しい雰囲気の見やすい小説ページ

使用素材

背景素材：NO-IMAGE - ivy
フレーム素材：Frame Design - 文学ラムネフレーム

背景素材は透明度を変更しております。お持ち帰りはこちらからお願い致します。

04 レイアウト

※- ナノ -リンクまで要素を包んでいるため、全体レイアウトの閉じタグは省略しています。

HTML

CSS

* {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-weight: normal;
}

.clearfix:after { 
    visibility: hidden;
    display: block;
    content: " ";
    clear: both;
    height: 0;
}

html,
body {
    height: 100%;
}

body {
    font-size: 13px;
    font-family: 'Bentham', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "ＭＳ 明朝", serif;
    background: url(#背景素材#);
    background-size: 467px;
    color: #666;
    letter-spacing: 1px;
    line-height: 24px;
}

a {
    text-decoration: none;
    border-bottom: 1px solid #EFEFEF;
    color: #66a2cc;
}

article {
    box-sizing: border-box;
    max-width: 400px;
    min-height: 100%;
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    background: rgba(255,255,255,0.9);
}

h1, h2 {
    font-family: "Hannari", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "ＭＳ 明朝", serif;
}

h1 {
    background: url(#フレーム素材#) no-repeat center top;
    background-size: 87px 256px;
    width: 87px;
    height: 256px;
    line-height: 85px;
    font-size: 22px;
    margin: 30px auto 20px;
    text-align: center;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}

h2 {
    text-align: center;
    font-size: 18px;
    margin: 40px 0 15px;
}

h2 span {
    display: block;
    font-size: 22px;
    color: #73b6e6;
    margin-bottom: 10px;
}

h3 {
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    margin: 30px 0 15px;
    position: relative;
    padding: 3px 10px;
	border-left: 6px solid #E8E8E8;
    border-bottom: 1px solid #EFEFEF;
}

h3::before {
	position: absolute;
	left: -6px;
	bottom: 0;
	content: '';
	width: 6px;
	height: 50%;
	background-color: #66a2cc;
}

h3::after {
	position: absolute;
	left: 0;
	bottom: 0;
	content: '';
	width: 100%;
	height: 0;
}

.list {
    max-width: 240px;
    width: 90%;
    margin: 0 auto;
    color: #CFCFCF;
    font-size: 20px;
}

.list a {
    margin-left: 5px;
    font-size: 13px;
}

.name {
    text-align: center;
}

.period {
    margin: 20px auto;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}

.book h2 {
    margin: 10px 0 30px;
}

.book p {
    text-align: justify;
    margin-bottom: 20px;
    color: #333;
}

form {
    text-align: center;
    margin: 0 0 40px;
}

form input[type=text] {
    width: 70px;
    margin-right: 10px;
}

form input[name="clear"] {
    display: none;
}

form input {
    border: none;
    background: #E8E8E8;
    border-radius: 3px;
    padding: 5px 10px;
    font-family: 'Bentham', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "ＭＳ 明朝", serif;
}

form input[type=submit] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #333;
    color: #FFF;
    padding: 2px 10px;
    margin-top: 10px;
    width: 100px;
}

form br {
    display: none;
}
</style>

「#学園」のBL小説を読む
BL小説 BLove

- ナノ -