CR
ここから下をコピペする↓
<!-- loader ここはいじらなくてOK-->
<div class="page-loader">
<div class="intersecting-circles-spinner">
<div class="spinnerBlock">
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
</div>
</div>
</div>
<!-- header ここはいじってOK-->
<div class="corner corner-1"></div>
<div class="corner corner-2"></div>
<nav>CR</nav>
<header>
<!-- ここが最初のメニューの画像アドレス↓ -->
<img src="https://alicex.jp/data/crxcr/img/crxcr_upld_1.jpg">
<h1>CR</h1>
<!-- 左側メニュー一覧、増減OK -->
<div class="menu">
<ul>
<li><a href="#info" class="s-scroll">info</a></li>
<li><a href="main.html">main</a></li>
<li><a href="note.html">note</a></li>
</ul>
</div>
<div class="hr"></div>
</header>
<!-- main -->
<main>
<!-- information のとこの画像 -->
<h2 id="info"><img src="https://alicex.jp/data/crxcr/img/crxcr_upld_3.png"><br>information</h2>
<div>
<section>
<h3>about site</h3>
<div class="pd-l">
<p>こちらは✕✕を扱う○○サイトです。サイト内の作品の著作権はすべて管理人＄＄にあります。荒らし・晒し・転載はご遠慮ください。改行したいときは文末に＜ｂｒ＞（半角で）</p>
<aside>
<dl class="dltype2">
<dt><mark>site name</mark></dt>
<dd>CR</dd><br>
<dt><mark>url</mark></dt>
<dd>xxx.xxx.jp</dd>
</dl>
<p>当サイトは検索避け済みのサイト様に限りアン・リンクフリーです</p>
</aside>
</div>
<h3>my profile</h3>
<div class="pd-l">
<!-- プロフィール画像↓ -->
<img src="https://alicex.jp/data/crxcr/img/crxcr_upld_2.jpg" class="pro-img">
<div class="name"><mark>My Name</mark><br>>>
<!-- Twitter とか外部サイトへのリンクはあってもなくてもコピペして増減OK -->
<a href="">twitter <i class="lni lni-twitter-original"></i></a></div>
<p>Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.</p>
</div>
</section>
<section>
<h3>update</h3>
<div class="pd-l">
<div class="scroll">
<p><i class="lni lni-chevron-down"></i>scroll</p>
<!-- 更新履歴とかに使える、どれだけ行数が多くなっても4-5行までしか表示されない（5行目以降はスクロールで見れる） -->
<dl class="dltype2">
<dt><mark>20/09/17</mark></dt><dd class="new">xxxxx</dd><br>
<dt><mark>20/09/13</mark></dt><dd>xxxxx</dd><br>
<dt><mark>20/09/10</mark></dt><dd>xxxxx</dd><br>
<dt><mark>20/09/05</mark></dt><dd>xxxxx</dd><br>
<dt><mark>20/09/01</mark></dt><dd>xxxxx</dd><br>
<dt><mark>20/08/27</mark></dt><dd>xxxxx</dd><br>
<dt><mark>20/08/24</mark></dt><dd>xxxxx</dd><br>
<dt><mark>20/09/21</mark></dt><dd>xxxxx</dd><br>
</dl>
</div>
</div>
<h3>bookmark</h3>
<div class="pd-l">
<dl class="dltype2">
<dt><mark>Rank</mark></dt>
<dd><a href="">link</a> <a href="">link</a> <a href="">link</a></dd><br>
<dt><mark>Thanks</mark></dt>
<dd><a href="">link</a> <a href="">link</a> <a href="">link</a></dd><br>
<dt><mark>Respect</mark></dt>
<dd><a href="">link</a> <a href="">link</a> <a href="">link</a></dd><br>
</dl>
</div>
</section>
</div>
<!-- メールフォームは外部サイトのものを使用したほうがよさそうなので必要に応じて相談してください -->
<div class="hr"></div>
</div>
<br>
</main>
<!-- footer ここはテンプレート配布元のリンクなので削除しない-->
<footer>
Template by <a href="http://kerry.php.xdomain.jp/" target="_blank">KERRY</a>
</footer>
<!-- pagetop button スクロールすると画面右下に現れるボタン-->
<div id="page-top"><a href="#all"><img src="https://alicex.jp/data/crxcr/img/crxcr_upld_5.png"></a></div>
<!--script-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
// page loader
(function(){
$(window).on('load', function() {
$('.intersecting-circles-spinner').fadeOut();
$('.page-loader').delay(350).fadeOut('slow');
});
})(jQuery);
// nav
$(function() {
var nav = $('nav');
nav.hide();
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
nav.fadeIn();
} else {
nav.fadeOut();
}
});
});
// pagetop button
$(function() {
var topBtn = $('#page-top');
topBtn.hide();
$(window).scroll(function() {
if ($(this).scrollTop() > 300) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
topBtn.click(function() {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
// smooth scroll
$(function(){
$('.s-scroll').click(function() {
var speed = 500;
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;
});
});
</script>