TOP
First
About
TCgΜΰΎ
Rule
TCgΜKρ
«
Contents
Contents-01
Contents-02
«
Author
Profile
©ΘΠξ
SNS
Mail
«
Code
head
<![CDATA[<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Arvo:wght@400;700&display=swap">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
CSS
</style>]]>
CSS
<![CDATA[/*
Template T-11 Under Threads
By Jumble Fun
Site URL https://alicex.jp/kenz/
*/
* {
font-size:13px;
font-family:"Arvo",Sans-Serif;
box-sizing:border-box;
margin:0;
padding:0;
}
body {
scroll-behavior:smooth;
}
a {
color:black;
text-decoration:none;
}
ul {
list-style-type:none;
}
header {
background-image:
url('../header-back.image.jpeg');
background-repeat:no-repeat;
background-position:50% 50%;
background-size:cover;
height:200px;
padding:20px;
}
header h1 {
font-size:30px;
font-weight:600;
color:white;
text-align:right;
margin-bottom:90px;
}
header ul {
display:flex;
justify-content:center;
}
header ul li {
background-color:black;
margin:5px;
padding:10px 15px;
}
header ul li a {
color:white;
}
header ul li:hover {
background-color:gray;
transition:0.2s;
}
a.top,
a.down {
border:solid 1px black;
color:white;
background-color:black;
position:fixed;
bottom:20px;
right:20px;
width:40px;
height:40px;
line-height:40px;
text-align:center;
z-index:10;
}
a.down {
position:absolute;
bottom:70px;
}
section {
position:relative;
height:550px;
padding:20px;
}
section.main {
height:350px;
}
section:nth-of-type(even) {
background-color:silver;
}
section h2 {
font-size:30px;
font-weight:600;
margin-bottom:20px;
padding:10px 20px;
}
section h3 {
color:white;
background-color:black;
padding:10px 20px;
display:inline-block;
}
div.container {
line-height:180%;
margin-bottom:20px;
padding:0 10px;
white-space:pre-line;
}
div.container a:hover {
color:orange;
transition:0.2s;
}
footer {
text-align:center;
padding:20px;
}]]>
JS
<![CDATA[$(window).on('load', function(){
$('a[href^="#"]').click(function () {
var speed = 50;
var href = $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({
scrollTop: position
}, speed, "swing");
return false;
});
var topBtn = $('.top');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
});]]>
body
<![CDATA[<div class="contain">
<header id="top">
<h1>Under Threads</h1>
<ul>
<li><a href="#first">First</a></li>
<li><a href="#contents">Contents</a></li>
<li><a href="#author">Author</a></li>
<li><a href="#code">Code</a></li>
</ul>
</header>
<a href="#top" class="top">TOP</a>
<main>
<section class="main">
<h3>Log</h3>
<div class="container">
<a href="/ID/note/1/">XVπ</a>
<a href="/kenz/note/1/13/">ev[g</a>
</div>
<h3>Note</h3>
<div class="container">
<a href="/ID/note/2/">ϊL</a>
<a href="/kenz/note/2/11/">G^</a>
</div>
<a href="#first" class="down">«</a>
</section>
<section id="first">
<h2>First</h2>
<h3>About</h3>
<div class="container">
TCgΜΰΎ
</div>
<h3>Rule</h3>
<div class="container">
TCgΜKρ
</div>
<a href="#contents" class="down">«</a>
</section>
<section id="contents">
<h2>Contents</h2>
<h3>Contents-01</h3>
<div class="container">
<a href="">Contents-01-1</a>
<a href="">Contents-01-2</a>
</div>
<h3>Contents-02</h3>
<div class="container">
<a href="">Contents-02-1</a>
<a href="">Contents-02-2</a>
</div>
<a href="#author" class="down">«</a>
</section>
<section id="author">
<h2>Author</h2>
<h3>Profile</h3>
<div class="container">
©ΘΠξ
</div>
<h3>SNS</h3>
<div class="container">
<a href="fb://">Facebook</a>
<a href="instagram://">Instagram</a>
<a href="twitter://">Twitter</a>
</div>
<h3>Mail</h3>
<div class="container">
<a href="/ID/mailbox.php">Mail</a>
</div>
</section>
</main>
<script>
±±ΙJSπ\ι
</script>]]>
