CURE | ナノ

ABOUTまずはじめに

当サイトは△△をメインとした創作サイトです。良識の範囲内でお楽しみください。…などなどサイトの説明書きをしてみてはいかがでしょうか。

リンクは同ジャンルに限りフリーとなっています。貼り剥がしご自由にどうぞ。

管理人名：msz [twitter - bkm]
〇〇が大好きです。熱しやすくて冷めやすい性格。

MAINよみもの

[name change]

LONG STORY

深夜、蒲公英を探して連載中
ひとつまみの夏完結済み

SERIES

溶けた氷が海になる
 いくつかの青を通りすぎて
 鉱石の呼吸
 夜をくるむ温度
 やさしいこころはここにあります

INFORMATION使用にあたって

REQUEST

ももさん
白黒基調の背景が白、文字が黒、メニューは画面をスクロールするとくっついてくるもの、もしくは文字を押すとメニューが開閉するもののどちらか

MATERIAL

写真：旅と暮らしのおしゃれな無料写真サイト
タイトル：enamel

TEMPLATE

LESSと合わせて使用するとセットのように見せることができます。

游明朝体を使用しているためWindows環境の場合、文字が薄く感じる場合があります。

モノクロで作成しているため、色の改変や素材の配置等の改変はご自由にどうぞ。ヘッダーにほんの少しだけ透明度をかけています。

メニュー部分はスクロールすると上部に固定するCSSを設定しています。ただし、IEは動作しませんのでご注意ください。

SOUCE CODEソースコード

HTML

<header>
<h1>
    CURE
    <span>The face of the moon was in shadow.</span>
</h1>
</header>
<ul class="menu">
<li><a href="#about">ABOUT</a></li>
<li><a href="#main">MAIN</a></li>
<li><a href="">BLOG</a></li>
<li><a href="">CONTACT</a></li>
</ul>
<img src="#画像#" class="thumb">
<article>
<h2 id="about">ABOUT<span>まずはじめに</span></h2>
<p>当サイトは△△をメインとした創作サイトです。良識の範囲内でお楽しみください。…などなどサイトの説明書きをしてみてはいかがでしょうか。</p>
<p>リンクは同ジャンルに限りフリーとなっています。貼り剥がしご自由にどうぞ。</p>
<p>管理人名：<strong>msz </strong>[<a href="">twitter</a> - <a href="">bkm</a>]<br>
〇〇が大好きです。熱しやすくて冷めやすい性格。</p>
<hr>
<h2 id="main">MAIN<span>よみもの</span></h2>
<p align="right">[<a href="">name change</a>]</p>
<div class="list">
    <h3><span class="lnr lnr-chevron-down"></span>LONG STORY</h3>
    <p>
        <a href="">深夜、蒲公英を探して</a><span>連載中</span><br>
        <a href="">ひとつまみの夏</a><span>完結済み</span>
    </p>
    <h3><span class="lnr lnr-chevron-down"></span>SERIES</h3>
    <p>
        <a href="">溶けた氷が海になる</a><br>
        <a href="">いくつかの青を通りすぎて</a><br>
        <a href="">鉱石の呼吸</a><br>
        <a href="">夜をくるむ温度</a><br>
        <a href="">やさしいこころはここにあります</a>
    </p>
</div>

CSS

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    font-weight: normal;
    font-size: 100%;
    list-style-type: none;
    box-sizing: border-box;
    transition: .3s;
}

body {
    position: relative;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ 明朝", serif;
    font-size: 13px;
    line-height: 1.6;
    text-align: justify;
}

strong {
    font-weight: bold;
}

a {
    text-decoration: none;
    color: #333;
}

a:hover {
    color: #bfbfbf;
}

header {
    max-width: 600px;
    width: 85%;
    margin: 20px auto 0;
    text-align: center;
}

.menu {
    display: flex;
    justify-content: center;
    margin: 20px 0 0;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 3px rgba(0,0,0,.2);
    padding: 8px 10px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.menu li {
    margin: 0 6px;
    font-size: 12px;
}

h1 {
    font-size: 20px;
    font-weight: bold;
}

h1 span,
h2 span {
    display: block;
    color: #bfbfbf;
    letter-spacing: 2px;
    font-size: 10px;
}

h1 span {
    letter-spacing: 1px;
}

h2 {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    padding-bottom: 5px;
    border-bottom: 1px solid #efefef;
    margin-bottom: 30px;
}

h2 span {
    font-size: 12px;
}

h3 {
    margin: 30px 0 5px;
}

h3 .lnr {
    font-size: 10px;
    margin-right: 5px;
    color: #bfbfbf;
}

.thumb {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

article {
    max-width: 460px;
    width: 75%;
    margin: 40px auto;
}

article p {
    margin-bottom: 15px;
    font-size: 12px;
    line-height: 1.7;
}

article a {
    color: #888;
    border-bottom: 1px solid #efefef;
    padding: 0 2px;
}

article hr {
    border: none;
    margin: 100px 0 0;
}

.list p {
    line-height: 2;
}

.list p span {
    font-size: 11px;
    margin-left: 8px;
    color: #bfbfbf;
}

@media all and (-ms-high-contrast:none){
    .thumb {
        display: block;
        height: 100%;
        max-height: 480px;
        max-width: 800px;
        margin: 0 auto;
    }
}
</style>

人気急上昇中のBL小説
BL小説 BLove

- ナノ -