／ペチカと孤独

▼ 0123 - ○○+1

123456
http://nanos.jp/xxxxx/

information

１ページ完結のトップデザインです。メニューリンクをクリックすると指定の場所にスクロールします。メニューは右側固定です。メニュー以外のリンクはこんな感じ、強調はこうなります。

サイト名 - ペチカと孤独
URL - http://nanos.jp/xxxxx/
管理人 - ○○ note mail

bookmark

title title title

説明や注意書きなど。なんでも。

long story

▼title

あらすじや説明文など

▼タイトル

あらすじや説明文など

short story

title title ／名前
title　／名前

source code

自動改行しないで作成しています。
画像はパブリックドメインのものを加工していますので、下記よりお持ち帰りください。バナーサイズであれば色々差し替えてもいいかもです。
タイトルはユリ柩さまより。
アイデアありがとうございました。

HEAD

@charset "UTF-8";

@font-face
{
font-family: はんなり明朝;
src: url('https://cdn.leafscape.be/hannari/hannari_web.woff')
     format("woff");
}

@media screen and (max-width: 500px) {

.wrp {
        margin: 50px auto 10px;
    }

.menu {
        right: 0;
        top: 35vh;
        position: absolute;
        position:fixed;
    }

.top {
        margin: 20px 50px 20px 20px;
    }
}

@media screen and (min-width: 501px) {

.wrp {
        margin: 0 auto;
        display: -webkit-flex;
        display: flex;
    }

.menu{
        position: -webkit-sticky;
        position: sticky;
        top:30vh;
        width: 30px;
        height: 300px;
    }

.top{
        margin: 70px 10px 20px 20px;
        padding: 0;
        width: 430px;
        height:auto;
    }
}

body {
    background: #fff;
    color: #333;
    font-size: 12px;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ 明朝",'STHeitiSC-Light', 'Microsoft YaHei', gulim, メイリオ, sans-serif; 
    line-height: 180%;
    letter-spacing: 2px;
    margin: 0;
}

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

a:hover, active {
    background: none;
    position: relative;
    top: 0;
}

h1 {
    font-family:はんなり明朝;
    font-size: 16px;
    margin: 0 0 -10px;
    position: relative;
    bottom: 25px;
    font-weight: 200;
}

h2 {
    letter-spacing: 2px;
    color: #867ba9;
    text-align: center;
    margin: 80px 0 30px;
}

h3 {
    letter-spacing: 2px;
    color: #867ba9;
    margin: 10px 0 5px;
}

hr {
    border-top: #f3f3f2;
    border-left: none;
}

.wrp {
    max-width: 500px;
}

.menu {
    margin: 0;
    padding: 0;
    writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        -webkit-writing-mode:vertical-rl;
}

.menu a {
    background: none;
    padding: 10px;
}

.menu a:hover, active {
    color: transparent;
    text-shadow: 0px 0px 3px #333,0px 0px 3px #333,0px 0px 3px #333,0px 0px 5px #333,0px 0px 5px #333,0px 0px 10px #333,0px 0px 10px #333;

}

.box {
    margin: 10px;
    padding: 10px;
    font-size: 10px;
    border: solid 2px #eee;
}

input[type], textarea {
    height: 80px;
    width: 95%;
    font-size: 12px;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ 明朝",'STHeitiSC-Light', 'Microsoft YaHei', gulim, メイリオ, sans-serif; 
    line-height: 180%;
    letter-spacing: 2px;
    color: #333;
    background: #f3f3f2;
    border: solid 1px #fff;
        -webkit-appearance: none;
    border-radius: 3px;
    box-shadow: none;
    margin: 3px 0;
    padding: 3px;
}

input[type=text ]{
    height: auto;
    width: 200px;
}

input[type=submit]{
    height: auto;
    width: 100px;
    cursor: pointer;
    text-shadow: none;
    background: #867ba9;
    font-weight: 200;
}

</style>

全体レイアウト

<img width="200px" src="#画像url#">
<h1>／ペチカと孤独</h1>

▼ <a href="">0123</a> - ○○+1<br>
<br>
123456<br>
http://nanos.jp/xxxxx/

<h2>information</h2>

１ページ完結のトップデザインです。メニューリンクをクリックすると指定の場所にスクロールします。メニューは右側固定です。メニュー以外のリンクは<a href="">こんな感じ</a>、強調は<b>こうなります。</b><br>

<div class="box">
サイト名 - ペチカと孤独<br>
URL - http://nanos.jp/xxxxx/<br>
管理人 - ○○ <a href="">note</a> <a href="">mail</a><br>
<hr>
<h3>bookmark</h3>
<a href="">title</a> 
<a href="">title</a>
<a href="">title</a>
</div>

<h2>contents</h2>
説明や注意書きなど。なんでも。<br>
<br>
<h3>long story</h3>

▼<a href="">title</a>
<div class="box">
あらすじや説明文など<br>
</div>

▼<a href="">タイトル</a>
<div class="box">
あらすじや説明文など<br>
</div>
<br>
<h3>short story</h3>

<a href="">title</a> <a href="">title</a> ／ 名前<br>
<a href="">title</a>　／ 名前

</div>

<div class="menu">
<p>
<a href="#top">top</a> -
<a href="#info">information</a> -
<a href="#con">contents</a>
</p>
</div>

</div>