蔦蔓 - vaidurya

Information

注意事項

動作確認はWindows, iOSでのみ行っております。使用ブラウザはMicrosoft Edge, Google Chrome, Safariです。素人が趣味で作成しているものであり、環境によってはレイアウト崩れや不具合など起こる可能性がございますので、あらかじめご了承ください。またテンプレートの内容は予告なく修正される場合が御座います。再配布・自作発言はご遠慮いただいておりますが、各環境に応じての改変は自由ですので、お好きなように中身を書き換えてご利用ください。改変のサポートやコードの仕様に関するご質問にはお答えいたしかねます。リンクや配布元明記、使用報告などは強制しておりませんが、していただけると大変嬉しいです。

Main

テキストサンプル

その人にまた逢ふまでは、とても重苦しくて気骨の折れる人、もう滅多には逢ふまいと思ひます。さう思へばさば／＼して別の事もなく普通の月日に戻り、毎日三時のお茶うけも待遠しいくらゐ待兼ねて頂きます。人間の寿命に相応はしい、嫁入り、子育て、老先の段取りなぞ地道に考へてもそれを別に年寄り染みた老け込みやうとは自分でも覚えません。縫針の針孔に糸はたやすく通ります。畳ざはりが素足の裏にさら／＼と気持よく触れます。黄菊などを買つて来て花器に活けます。その人にまた逢ふときには、何だか予感といふやうなものがございます。ふと、たゞこれだけの月日、たゞこれだけの自分ではといふやうな不満が覚えられて莫迦々々しい気持になりかけます。けれども思へばその気持もまた莫迦らしく、かうして互ひ違ひに胸に浮ぶことを打ち消すさまは、ちやうど闇の夜空のネオンでせうか。見るうちに「赤の小粒」と出たり、見るうちに「仁丹」と出たり、せはしないことです。するうち屹度その人に逢ふ機会が出て来るのでございます。(岡本かの子著『愛』より／引用元）

リストサンプル

フォームサンプル

SourceCode

コピーボックス

背景画像は[NO-IMAGE]様よりお借りしております。こちらのリンクより飛んでいただき、直接素材のダウンロードをお願いいたします。素材の使用方法等については先方のサイト様の規約に従ってください。基本的に自動改行はしない前提で作成しています。また注意事項にも記載の通り、フッターのリンクについては記載必須という訳ではございませんので、適宜修正してご使用ください。
HEAD内

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Zen+Old+Mincho&display=swap" rel="stylesheet">

/* ナビゲーション */
nav {
	margin: 10px 10px 20px;
}
nav ul {
	display: flex; 
	justify-content: center;
}
nav ul li {
	list-style-type: none;
	padding: 0 10px;
	margin: 0 10px;
	background-image: linear-gradient(.25turn, #D3E173, 90%, #606634);
	background-repeat: no-repeat;
	background-size: 100% 1px;
	background-position: bottom;
}
nav ul li a {  
	color: #1b3333;
	font-size: 15px;
	border-bottom: none;
}
nav ul li a:hover {
	font-color: #606634;
}

/* リスト */
section ul {
	text-align: center;
}
section ul li {
	list-style-type: none;
}
section ul li::before {
	content: "[";
	padding-right: 2px;
	font-weight: 300;
	color: #606634;
}
section ul li::after {
	content: "]";
	padding-left: 2px;
	font-weight: 300;
	color: #606634;
}

/* 大見出し */
h1 {
	font-size: 25px;
	/* サイト名が入りきらない場合はここのフォントサイズを調整 */
	letter-spacing: 5px;
	margin: 20px 0;
	text-align: center;
}
h1::before {
	content: "[";
	padding-right: 5px;
	font-weight: 700;
	color: #606634;
}
h1::after {
	content: "]";
	padding-left: 5px;
	font-weight: 700;
	color: #606634;
}

/* 中見出し */
h2 {
	font-size: 18px;
	line-height: 250%;
	letter-spacing: 3px;
	text-align: center;
	margin: 0 auto;
	background-image: linear-gradient(.25turn, #D3E173, 80%, #606634);
	background-repeat: no-repeat;
	background-size: 100% 1px;
	background-position: bottom;
}

/* 小見出し */
h3 {
	margin: 18px auto 5px;
	font-size: 13px;
	text-align: center;
}

/* リンク */
a {
	color: #1b3333;
	text-decoration: none;
	border-bottom: 1px dotted #606634;
}
a:hover {
	background: #606634;
	color: #fff;
}

/* フォーム */
input[type="text"],textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	-webkit-box-shadow: none;
	display: block;
	appearance: none;
	padding: 5px 5px;
	margin: 10px auto;
	box-shadow: none;
	background: #f9ffcc;
	color: #1b3333;
	border: 1px solid #000;
	border-radius: 0;
	font-size: 10px;
	width: 400px;
	max-width: 90%;
	height: 100px;
}
input[type="submit"]{
	display: block;
	width: 100px;
	max-width: 30%;
	padding: 2px 5px;
	margin: 0 auto;
	background: #f9ffcc;
	color: #1b3333;
	border: 1px solid #000;
	border-radius: 0;
	font-size: 10px;
	font-weight: 150;
	letter-spacing: 3px;
	line-height: 250%;
}

/* フッター */
footer {
	text-align: center;
	color: #1b3333;
	margin-top: 20px;
	font-size: 11px;
	opacity: 0.6;
}

</style>

HTML内

<section id="main">
	<div class="wrap">
		<h2>Main</h2>
			<div class="small-wrap">
			<h3>テキストサンプル</h3>
その人にまた逢ふまでは、とても重苦しくて気骨の折れる人、もう滅多には逢ふまいと思ひます。さう思へばさば／＼して別の事もなく普通の月日に戻り、毎日三時のお茶うけも待遠しいくらゐ待兼ねて頂きます。人間の寿命に相応はしい、嫁入り、子育て、老先の段取りなぞ地道に考へてもそれを別に年寄り染みた老け込みやうとは自分でも覚えません。縫針の針孔に糸はたやすく通ります。畳ざはりが素足の裏にさら／＼と気持よく触れます。黄菊などを買つて来て花器に活けます。その人にまた逢ふときには、何だか予感といふやうなものがございます。ふと、たゞこれだけの月日、たゞこれだけの自分ではといふやうな不満が覚えられて莫迦々々しい気持になりかけます。けれども思へばその気持もまた莫迦らしく、かうして互ひ違ひに胸に浮ぶことを打ち消すさまは、ちやうど闇の夜空のネオンでせうか。見るうちに「赤の小粒」と出たり、見るうちに「仁丹」と出たり、せはしないことです。するうち屹度その人に逢ふ機会が出て来るのでございます。(岡本かの子著『愛』より／<a href= "https://www.aozora.gr.jp/cards/000076/card4996.html">引用元</a>）
			<h3>リストサンプル</h3>
				<ul>
					<li><a href="#">リンク</a></li>
					<li><a href="#">リンク</a></li>
					<li><a href="#">リンク</a></li>
				</ul>
			<h3>フォームサンプル</h3>
				<form action="機能のURL" method="post">
					<textarea id="message" name="message"></textarea>
					<input type="submit" value="送信">
				</form>
			</div>
	</div>
</section>

<footer>
Template by <a href="https://alicex.jp/vaidurya/">毘瑠璃.</a>
</footer>