advance | ナノ

firstまずはじめに

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

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

桐生[bkm|mail]
〇〇が大好きです。熱しやすくて冷めやすい性格。

mainメインコンテンツ

[名前変換｜設定]

タイトル名（キャラ名）
タイトル名（長編）
タイトル名（完結済み）

cautionテンプレート情報

ハンバーガーボタンはページ左上部に固定しています。煩わしい場合はheader #hbg span { position: fixed; }をabsoluteに変更し、適宜整えてください。

Request

七緒さん
ハンバーガーメニューを使用したカスタムが出来るシンプルなトップページ

Source

<nav id="menu">
    <ul>
        <li><a href="#first">FIRST</a></li>
        <li><a href="#main">MAIN</a></li>
        <li><a href="">NOTEBOOK</a></li>
        <li><a href="">CLAP</a></li>
    </ul>
</nav>
<header>
    <p id="hbg"><span class="lnr lnr-menu"></span></p>
    <h1>advance</h1>
    <p class="url">site description.</p>
    <span class="lnr lnr-heart-pulse"></span>
</header>
<hr class="line" />
<div class="main" id="first">
    <h2>first<span style="margin-top: 20px;">まずはじめに</span></h2>
    <p>当サイトは△△をメインとした創作サイトです。良識の範囲内でお楽しみください。…などなどサイトの説明書きをしてみてはいかがでしょうか。</p>
    <p>リンクは同ジャンルに限りフリーとなっています。貼り剥がしご自由にどうぞ。</p>
    <p>
        <strong>桐生</strong>[<a href="">bkm</a>|<a href="">mail</a>]<br />
        〇〇が大好きです。熱しやすくて冷めやすい性格。
    </p>
</div>
<hr class="line" />
<div class="main" id="main">
    <h2>main<span>メインコンテンツ</span></h2>
    <p align="right">
        [<a href="">名前変換</a>｜<a href="">設定</a>]
    </p>
    <p>
        <a href="">タイトル名</a>（キャラ名）<br>
        <a href="">タイトル名</a>（長編）<br>
        <a href="">タイトル名</a>（完結済み）
    </p>
</div>
</div>

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

body,
html {
    height: 100%;
}

body {
    color: #444;
    font-size: 12px;
}

strong {
    font-weight: bold;
}

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

header {
    text-align: center;
    padding: 60px 0 10px;
    position: relative;
    max-width: 400px;
    width: 80%;
    margin: 0 auto;
}

header span.lnr {
    display: block;
    font-size: 40px;
    margin: 25px 0;
}

header #hbg span {
    position: fixed;
    top: -10px;
    left: 25px;
    font-size: 24px;
    padding: 5px;
    background: #fff;
    border: 1px solid #666;
    transition: all .3s;
    cursor: pointer;
    z-index: 10;
}

header h1 {
    font-family: 'Sacramento', cursive;
    font-size: 80px;
    margin-bottom: -30px;
}

header .url {
    font-family: 'Sacramento', cursive;
    font-size: 20px;
    color: #333;
    letter-spacing: 1px;
    opacity: .5;
}

nav {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(20,20,20,0.8);
    transition: all .8s;
    opacity: 0;
    z-index: -1;
}

nav ul {
    position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

nav ul li {
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    list-style-type: none;
    letter-spacing: 5px;
    line-height: 60px;
}

nav ul li a {
    display: inline-block;
    width: 200px;
    border-bottom: 1px solid #656565;
    padding: 0 10px;
    color: #efefef;
    transition: all .3s;
}

nav ul li a:hover {
    color: #fff;
    border-bottom: 1px solid #999;
}

.line {
    border: none;
}

.line::after {
    content: '●\A●\A●';
    display: block;
    width: 10px;
    margin: -20px auto 0;
    line-height: 2;
    font-size: 10px;
    color: #333;
    opacity: .1;
}

div.main {
    max-width: 400px;
    width: 80%;
    margin: 60px auto;
}

div.main h2 {
    text-align: center;
    padding: 0 10px;
    margin-bottom: 20px;
    font-family: 'Sacramento', cursive;
    line-height: 25px;
    font-size: 45px;
}

div.main h2 span {
    display: block;
    font-size: 10px;
    margin-top: 5px;
    letter-spacing: 3px;
    color: rgba(30,30,30,0.5);
}

div.main p {
    letter-spacing: 0.5px;
    line-height: 1.9;
    margin-bottom: 20px;
}

div.main p a {
    border-bottom: 1px solid rgba(30,30,30,0.1);
    padding: 0 5px;
}

div.main h3 {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 5px 10px;
    margin-bottom: 10px;
    border-bottom: 1px dashed rgba(90,90,90,0.1);
}

div.main h3 span {
    margin: 0 5px 5px -10px;
    color: #FF5200;
}
</style>
<script type="text/javascript">
    $(function () {
        var flg = false;
        $('#hbg').click(function(){
            if(!flg){
                flg = true;
                $('#menu').css({
                    'opacity' : '1'
                    ,'z-index' : '1'
                });
                $('#hbg span').replaceWith('<span class="lnr lnr-cross"></span>');
                $('#hbg span').css({
                    'background' : '#434343'
                    ,'border' : '1px solid #fff'
                    ,'color' : '#fff'
                });
            }else{
                flg = false;
                $('#menu').css({
                    'opacity' : '0'
                    ,'z-index' : '-1'
                });
                $('#hbg span').replaceWith('<span class="lnr lnr-menu"></span>');
                $('#hbg span').css({
                    'border' : '1px solid #666'
                    ,'color' : '#666'
                });
            }
        });
        
        $('a[href^=#]').click(function() {
            var speed = 400;
            var href= $(this).attr("href");
            var target = $(href == "#" || href == "" ? 'html' : href);
            var position = target.offset().top - 40;
            $('body,html').animate({scrollTop:position}, speed, 'swing');
            return false;
        });
    });
</script>