Code
Template Explanation
トップページ用。
動作確認はiPhone ／Safari。
おかしな所があれば、自分で直してください。
直し方がわからない方は、
こちら。
可能な範囲で対応します。
Template Userge
自動改行なし。
使用言語はHTMLとCSS。
サブコンテンツをナビゲーションリンクで表示します。
初心者の方でも使いやすいようシンプルなコードで作りました。
Template Images
Header Image
ヘッダの背景画。
使用する場合は、保存して自分のサイトにアップロードして下さい。
Template Color-Code
文字色
header h1
header p
header li
nav h2
nav h3
a.back i
aliceblue
a
steelblue
背景色
body
white
nav
aliceblue
header
header li
nav h2
nav h3
steelblue
head
<![CDATA[<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap">
<style>
CSS
</style>]]>
CSS
<![CDATA[/*
Template T-01 DRAG CONTROL
By Jumble Fun
Site URL https://alicex.jp/kenz/
*/
* {
font-size:13px;
font-family:"Montserrat",Sans-Serif;
box-sizing:border-box;
margin:0;
padding:0;
}
body {
background:white;
scroll-behavior:smooth;
}
a {
color:steelblue;
text-decoration:none;
}
ul {
list-style-type:none;
}
/* ヘッダ */
header {
background-color:steelblue;
background-image:
url('../image.jpg');
background-repeat:no-repeat;
background-position:50% 50%;
background-size:cover;
background-blend-mode:color-burn;
height:200px;
padding:20px;
}
header h1 {
font-size:20px;
font-weight:600;
color:aliceblue;
margin-bottom:20px;
}
header p {
color:aliceblue;
text-align:right;
margin-bottom:70px;
}
header ul {
width:100%;
display:flex;
justify-content:center;
}
header ul li {
border-radius:3px 0 0 0;
color:aliceblue;
background-color:steelblue;
box-shadow:3px 3px 0 0 darkslateblue;
margin:5px 6px;
padding:3px 8px;
}
header ul li a {
color:aliceblue;
}
/* ナビゲーション */
nav {
background-color:aliceblue;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
display:block;
overflow-y:scroll;
}
nav:not(:target) {
z-index:-1;
opacity:0;
transform:translate(0,-100%);
transition:0.4s;
}
nav:target {
z-index:5;
opacity:1;
transform:translate(0,0);
transition:0.4s;
}
nav h2 {
font-size:18px;
font-weight:600;
color:aliceblue;
background-color:steelblue;
width:100%;
height:100px;
margin-bottom:20px;
padding:10px 20px;
}
nav h2 i {
color:#acf;
margin-top:15px;
display:block;
}
a.back {
position:absolute;
top:20px;
right:10px;
width:26px;
height:26px;
line-height:26px;
text-align:center;
display:block;
}
a.back i {
font-size:28px;
color:aliceblue;
}
nav h3 {
font-size:14px;
font-weight:600;
color:aliceblue;
background-color:steelblue;
box-shadow:3px 3px 0 0 gray;
margin:0 10px;
padding:5px 20px;
display:inline-block;
}
nav h3:first-letter {
font-size:18px;
color:blue;
margin-right:3px;
}
nav div,
nav ul {
color:steelblue;
line-height:180%;
margin-bottom:20px;
padding:10px 20px;
}
nav div {
white-space:pre-line;
}
nav ul.author {
padding:20px 10px;
}
nav ul.author img {
width:100px;
height:100px;
margin-right:10px;
float:left;
object-fit:cover;
object-position:50% 50%;
}
nav div.mailbox input,
nav div.mailbox textarea {
color:steelblue;
height:30px;
margin-bottom:10px;
padding:5px;
}
nav div.mailbox textarea {
width:100%;
height:100px;
margin-bottom:20px;
}
nav div.mailbox input[type="submit"] {
color:aliceblue;
background-color:steelblue;
padding:5px 20px;
}
/* メイン */
main {
padding:20px;
}
div.counter {
color:steelblue;
text-align:right;
margin-bottom:10px;
}
div.announce {
margin-bottom:20px;
white-space:pre-line;
}
div.announce a {
margin-bottom:10px;
}
div.announce i {
color:red;
}]]>
body
<![CDATA[<div class="contain">
<header>
<h1>Site Name</h1>
<p>https://alicex.jp/ID</p>
<ul>
<li><a href="#about-nav">About</a></li>
<li><a href="#rule-nav">Rule</a></li>
<li><a href="#link-nav">Link</a></li>
<li><a href="#contact-nav">Contact</a></li>
<li><a href="/ID/clap/1/">Clap</a></li>
</ul>
</header>
<nav id="about-nav">
<h2>About<i>About this site.</i></h2>
<a href="#" onclick="javascript:window.history.back(-1);return false;" class="back"><i class="fas fa-times-circle"></i></a>
<h3>First</h3>
<div>
このサイトの説明。
※このスペースは、編集での改行を反映します。
</div>
</nav>
<nav id="rule-nav">
<h2>Rule<i>This site's rule.</i></h2>
<a href="#" onclick="javascript:window.history.back(-1);return false;" class="back"><i class="fas fa-times-circle"></i></a>
<h3>Attention</h3>
<div>
注意事項。
</div>
<h3>Ban</h3>
<div>
禁止事項。
</div>
</nav>
<nav id="link-nav">
<h2>Link<i>Main contents.</i></h2>
<a href="#" onclick="javascript:window.history.back(-1);return false;" class="back"><i class="fas fa-times-circle"></i></a>
<h3>Main</h3>
<div>
<a href="">サブページ</a>
<a href="">サブページ</a>
<a href="">サブページ</a>
</div>
<h3>Ranking</h3>
<div>
<a href="">ランク</a>
<a href="">ランク</a>
<a href="">ランク</a>
</div>
</nav>
<nav id="contact-nav">
<h2>Contact<i>Contact me.</i></h2>
<a href="#" onclick="javascript:window.history.back(-1);return false;" class="back"><i class="fas fa-times-circle"></i></a>
<h3>Author</h3>
<ul class="author">
<img src="../author.image.jpg" alt="author">
<li>名前：名前
<li>紹介：自己紹介文。<br>
性格、趣味、好きなものなど。
</ul>
<br clear="all">
<h3>SNS</h3>
<div>
<a href="">Facebook</a>
<a href="">Instagram</a>
<a href="">Twitter</a>
</div>
<h3>Mail Box</h3>
<div class="mailbox">
<form method="post" action="mailbox.php">
名前：
<input type="text" name="name">
本文：
<textarea name="message"></textarea>
<input type="submit" name="send" value="送信">
<input type="hidden" name="cid" value="ID">
<input type="hidden" name="id" value="ID">
/* IDは自分のサイトのID */
</form>
</div>
</nav>
<main>
<div class="counter">
Access：♯♯total♯♯
</div>
<div class="announce">
<a href="">更新履歴</a>
<i>！</i> ♯note_pagelist1♯
<br>
<a href="">日記など</a>
<i>！</i> ♯note_pagelist2♯
</div>
</main>
</div>]]>
