SIMPLE WHITE

LAST UP 0101 ○○○up

12345hits - rank / rank / rank
since 20xx.xx.xx

INFOMATION

about this site

ここは×××を扱う◯◯サイトです。当サイトのコンテンツには□□□表現を含みます。苦手な方、意味のわからない方はブラウザバックでお願いします。同業者様のみリンクフリー。オンラインブックマークはご遠慮ください。

about link

SITENAME : サイト名
MASTER : 管理人名
URL : http://nanos.jp/○○○○○/
GENRES :サイトコンテンツ、取り扱い作品、推しCPなど

about master

管理人名 ( memo / twitter / mail )
プロフィールとかとか。

works

long story

タイトル注意書きetc
カップリングorジャンル
ストーリーの詳細などなど。

short story

タイトル ○○×○○ 説明
タイトル ○○×○○ 説明
タイトル ○○×○○ 説明
タイトル ○○×○○ 説明

log

企画ものその1 企画ものその2 企画ものその3

NOTEBOOK

20xx/xx/xx

更新履歴や日記など。テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト

20xx/xx/xx

テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト

20xx/xx/xx

テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト

HOW TO USE

モノトーンのシンプルなデザインです。一応WEBセーフカラーのみ使用しています。お好きな配色にアレンジしてください。サンプル素材はデコヤ様よりお借りしました。バナー等の画像に入れ換えてご利用ください。Google Fonts、Font Awesome使用。改変はご自由に。良心の範囲内でご利用ください。ナノの共有テンプレにて配布してます。順次ソースコードを公開していきます。

sample

長文テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト

headline1

headline2

headline3

※h2はインラインブロック要素なので必要に応じて改行してください
※見出しのフォントは英字のみ対応、日本語を使用する際はご自身で設定してください。

リンク
赤字
装飾文字1
装飾文字2

中央寄せ

右寄せ

ボックス

見出し

見出し付きボックス

form design

SOURCE CODE

head(共通)

@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Bowlby+One&family=Kosugi+Maru&display=swap');

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');

body{
    color: #000;
    background: #fff;
    text-align: center;
    font-size: 12px;
    font-family: 'Kosugi Maru', sans-serif;
    letter-spacing: .1rem;
    line-height: 1.3rem;
    margin: 0 auto;
    padding: 0;  
}

a { 
    color: #fff;
    background: #000;
    font-weight: normal;
    text-decoration: none;
    padding: 2px;
}

a:hover, a:active {
    position:relative;
    top: 2px;
    left: 2px;
}

.layout {
    width: 95%;
    max-width: 600px;
    height: auto;
    text-align: left;
    margin: 5% auto auto;
    padding: 0;
}

.form {
    width: 100%;
    text-align: left;
    margin: 1rem auto 0;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

h1 { 
    color: #000;
    font-size: 32px;
    font-family: 'Bowlby One', cursive;
    font-weight: 400;
    display: block;
    margin: 2rem auto;
    text-transform: uppercase;
    font-style: italic;
}

h2 {
    color: #000;
    font-size: 26px;
    font-family: 'Bowlby One', cursive;
    font-weight: 400;
    position: relative;
    display: inline-block;
    margin-bottom: 1.5rem;
    padding: 0 25px;
    text-transform: uppercase;
    font-style: italic;
}

h2:before, h2:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 26px;
    height: 2px;
    background-color: #000;
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
}

h2:before {
    left:0;
}

h2:after {
    right: 0;
}

h3 {
    color: #000;
    font-size: 16px;
    font-family: 'Bowlby One', cursive;
    font-weight: 400;
    display : block;
    margin: 1rem auto 0.5rem;
    padding: 0;
}

h3:before{
    color: #cccccc;  
    font-family: "FontAwesome";
    content: "\f054";
    margin-right:2px;  
}

.menu {
    font-size: 14px;
    font-family: 'Bowlby One', cursive;
    font-weight: 400;
    margin: 2rem auto;
    padding: 0;
}

.menu a{
    color: #000;
    background: none;
    text-decoration: none;
    transition: color 0.3s;
}

.menu a:hover{
    color : #cccccc;
}

.banner{
    width: 200px;
    height: 40px;
    margin: 5px 0;
}

.banner a{
    background: none;
    text-decoration: none;
}

.banner a:hover, a:active {
    position:relative;
    top: 0;
    left: 0;
}

nav{
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin: 2rem auto;
    padding: 0;
}

nav a{
    color: #000;
    background: none;
    text-decoration: none;
}

.attn {
    color: #ff6666;
    font-weight: bold;
}

.font1 {
    color: #000000;
    background:linear-gradient(transparent 50%, #cccccc 50%);
    display: inline;
    font-weight: normal;
    padding-bottom: 2px;
}

.font2{
    color: #cccccc;
    display: inline;
    font-weight: normal;
}

.box {
    position: relative;
    margin: 1.5rem 0 2rem;
    padding: 0.5rem 1rem;
    border: solid 2px #000000;
}
.box .box-title {
    position: absolute;
    display: inline-block;
    top: -24px;
    left: -2px;
    padding: 0 9px;
    height: 24px;
    line-height: 24px;
    font-size: 14px;
    background: #000000;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}

.box p {
    margin: 0; 
    padding: 0;
}

input[type="text"],textarea {
    display: inline-block;
    color: #000 ;
    background: #fff;
    width: 300px;
    height: auto;
    margin-bottom: 1rem;
    padding: .4rem;
    border: 2px #000 solid;
    border-radius: 0;
}

textarea {
    width: 300px;
    height: 70px;
    border-radius: 0;
}

input[type="submit"] {
    color: #000;
    background: #fff;
    box-shadow: none;
    width: 70px;
    height: 30px;
    border: 2px #000 solid;
    border-radius: 0;
    transition: .5s;
}

input[type="submit"]:hover {
    color: #000;
    background: #cccccc;
}

</style>

トップページ

インフォメーション

メインページ

<h2>WORKS</h2>
 
<h3>long  story</h3>

<div class="box">
<p>
<div class="banner">
<a href=""><img src="バナー画像のurl"></a>
</div>
<a href="">タイトル</a> <span class="attn">注意書きetc</span><br>
<span class="font1">カップリングorジャンル</span><br>
<span class="font2">ストーリーの詳細などなど。</span><br>
</p>
</div>

<br>

<h3>short story</h3>
<a href="">タイトル</a> <span class="font1">○○×○○</span> <span class="font2">説明</span><br>
<a href="">タイトル</a> <span class="font1">○○×○○</span> <span class="font2">説明</span><br>
<a href="">タイトル</a> <span class="font1">○○×○○</span> <span class="font2">説明</span><br>
<a href="">タイトル</a> <span class="font1">○○×○○</span> <span class="font2">説明</span><br>
<br>
<div class="box">
<span class="box-title">log</span>
<p>
<a href="">企画ものその1</a> <a href="">企画ものその2</a> <a href="">企画ものその3</a>
</p>
</div>

</div>

ブログ

全体レイアウト

上部表示テキスト

一覧部分

下部表示テキスト

追記画面レイアウト

SIMPLE WHITE

INFOMATION

about this site

about master

works

long story

short story

NOTEBOOK

HOW TO USE

sample

headline1

headline2

headline3

form design

SOURCE CODE

head(共通)

トップページ

インフォメーション

メインページ

ブログ

装飾一覧