ペリドットを探して

information

小説用テンプレート「宝石の美味しい食べ方」のTOP・子ページverになります。すー様リクエストありがとうございました。

・TOPページ：こちら
・子ページ（info）：このページ
・mainページ（分岐用）：こちら
・拍手：こちら（左のハートからも）

宝石イラストは11種類あるので選んで使ってください。TOP画像、見出し横、拍手、長編小説タイトル横の4箇所設定できます。 小説の分岐ページも用意していますが、「宝石の美味しい食べ方」の方でも、お好きな方をお使いください。

メニュー以外のリンクはこんなふう、強調文はこんなふう。

about

サイト名：◯◯◯
管理人：◯◯◯（ memo | bkm )
URL：https://◯◯◯

contact

ご用の方や感想などはこちらからどうぞ。など

source code

ソースコードを下記からコピペして使ってください。自動改行しないで作成しています。

（1）TOPページ画像、拍手お礼画面の画像：


（2）見出し横の小さい宝石画像、長編タイトル横の画像：こちらのページより保存してください。

（!注意事項）
・イラスト素材は全て自作で、再配布は禁止です。他サイト様のテンプレートに組み込む場合や、イラスト単体で使う場合はリンク必須でお願いします。（例：Material by mellow.）
・画像をはめ込む箇所が少し多いです。TOPページの大きな画像（＋PC表示時の左側メニューの画像）と、見出し横の小さな宝石画像は「HEAD内」にて画像URLを入力してください。それ以外の拍手お礼画面、長編タイトル横の画像は「全体レイアウト」「ありがとう画面」にて画像URLを入力してください。

（？）使い方のヒントはこちら


HEAD内（共通）
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> /* フォントの読み込み */ @import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@400;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Charmonman&display=swap'); /* 全体設定 */ *{ font-family: 'Zen Kaku Gothic Antique', sans-serif; color: #262626;/* ★全体の文字色 */ font-size: 12px; font-weight: 400; letter-spacing: 0.1em; line-height: 2.0em; box-sizing: border-box; padding: 0; margin: 0; list-style-type: none; text-decoration:none; -webkit-appearance: none; } body{ width: 100vw; overflow-x: hidden; background-color: #F5F5F5; } .wrap{ max-width: 100vw; min-height: 100vh; position: relative; margin: 0 auto; display: flex; background: #FFF;/* ★全体の背景色 */ } /* リンク文字 */ a{ transition: 0.2s; border-bottom: 1px solid #B5B5B5;/* ★リンク文字の下線の色 */ } a:hover{ color: #B59C36;/* ★リンクをホバーした時の文字色 */ border-bottom: none; } /* 強調文 */ strong{ font-weight: 700; color: #D82B4C;/* ★強調文の文字色 */ } /* 見出し */ h1{ font-size: 20px; letter-spacing: 0.15em; font-weight: 400; } h2{ font-family: 'Charmonman', 'Zen Kaku Gothic Antique', cursive; font-size: 20px; padding-bottom: 5px; margin-top: 10px; } h2:before{ content: ''; display: inline-block; width: 20px; height: 20px; background-image: url(#mtr■_url#);/* ★見出しの横の小さい宝石画像 */ background-size: contain; margin-right: 5px; margin-bottom: -4px; } h3{ font-family: 'Charmonman', 'Zen Kaku Gothic Antique', cursive; font-size: 14px; border-bottom: 4px double #262626;/* ★h3見出しの二重下線の色 */ width: fit-content; margin: 20px 0 5px; } /* 2カラムの構成 */ header{ width: 30%; height: 100vh; text-align: center; position: sticky; top: 0; padding: 80px 30px 0; background-color: #F5F5F5;/* ★左側メニューの背景色 */ z-index: 99; } main{ width: 70%; padding: 40px 15% 0 5%; } /* ヘッダーメニュー */ header .mv{ width: 130px; height: 90px; margin-bottom: 10px; } header a{ border-bottom: none; } header h1{ font-size: 14px; } .nav{ width: 100%; margin-top: 50px; } .nav li{ padding-bottom: 20px; } .nav li a{ font-family: 'Charmonman', 'Zen Kaku Gothic Antique', cursive; font-size: 16px; } .dotted{ width: 25px; height: 1px; border-top: 1px dotted #262626; margin: 20px auto 30px; } .typcn-heart-full-outline{ font-size: 20px; color: #D82B4C;/* ★左側メニューの拍手ハートの色 */ transition: 0.2s; padding-left: 3px; } .typcn-heart-full-outline:hover{ font-size: 23px; color: #262626;/* ★左側メニューの拍手ハートをホバーした時の色 */ } /* セクション（見出し＋本文のセット） */ .section+.section{ margin-top: 70px; } /* TOPページ メインコンテンツ */ .top{ text-align: center; } .mv{ width: 350px; height: 260px; margin: 0 auto; background-image: url(#mtr■_url#);/* ★TOPページの大きな宝石画像（＋PC表示時は左メニューの上部の画像） */ background-size: contain; background-repeat: no-repeat; } .en{ font-family: 'Charmonman', 'Zen Kaku Gothic Antique', cursive; font-size: 14px; } .en-ttl{ font-size: 18px; } .sub{ width: fit-content; padding: 20px; border: 1px dotted #262626;/* ★TOPページの更新履歴とランク情報を囲む線の色 */ margin: 50px auto 0; } /* 入力フォームと送信ボタン */ input[type="text"],input[type="radio"],input[type="button"],input[type="reset"],input[type="submit"],select,textarea{ -webkit-appearance: none; -moz-appearance: none; -webkit-box-shadow: none; appearance: none; box-shadow: none; background: #FFF;/* ★入力フォームの背景色 */ border-radius: 0; color: #262626;/* ★入力フォームの文字色 */ border:1px solid #262626;/* ★入力フォームの枠線の色 */ padding: 0 5px; width: 30em; height:8.0em; } textarea{ margin-bottom: 10px; } input:focus, textarea:focus{ background-color: #F8F8F8;/* ★入力フォームをフォーカス時の背景色 */ outline: none; width: 30em; height:8.0em; } input[type="submit"]{ width: auto; font-size: 11px; height: 28px; background-color: #262626;/* ★送信ボタンの背景色 */ border: none; color: #FFF;/* ★送信ボタンの文字色 */ padding: 0 10px; cursor: pointer; transition: 0.2s; } input[type="submit"]:hover{ background-color: #B59C36;/* ★送信ボタンをホバーした時の背景色 */ color: #FFF;/* ★送信ボタンをホバーした時の文字色 */ } /* 名前変換フォーム */ .dream{ display: flex; } .dream input{ width: 7em; height: 30px; margin-right: 10px; padding: 2px 5px 1px; } .dream input[type="submit"]{ width: auto; height: 30px; padding: 0px 10px; } /* 小説一覧 */ .long{ width: 100%; display: flex; gap: 15px; } .long a{ border-bottom: none; font-weight: 700; } .long{ margin-top: 20px; } .novel-img{ width: 50px;/* ★長編タイトル横の画像のサイズ（幅） */ height: 50px;/* ★長編タイトル横の画像のサイズ（高さ） */ object-fit: cover; } /* 拍手 */ .clap{ width: 100vw; height: 100vh; text-align: center; padding-top: 30px; background-color: #F5F5F5;/* ★拍手ページの全体の背景色 */ } .clap .inner{ width: 330px; margin: 0 auto; padding: 50px 20px 70px; border: 1px solid #D5C584;/* ★拍手ページのコンテンツ部分の枠線の色 */ background-color: #FFF;/* ★拍手ページのコンテンツ部分の背景色 */ } .clap img{ width: 200px; } .message{ display: flex; gap: 5px; justify-content: center; padding-top: 20px; } .message input[type="text"]{ width: 14em; height: 30px; } .message input[type="submit"]{ padding: 0 10px; height: 30px; } .message input[type="submit"]:hover{ background-color: #D82B4C;/* ★拍手ページの送信ボタンホバー時の背景色 */ } /* フッター */ .footer{ text-align: center; margin: 90px auto 60px; font-size: 11px; } /* 820px以下のデバイスでの見え方 */ @media screen and (max-width: 820px) { header{ width: 10%; padding: 0; } main{ width: 90%; padding: 40px 7% 0; } .mv{ width: 200px; height: 150px; } h1{ font-size: 16px; } .en-ttl{ font-size: 13px; } header h1,header .mv{ display: none; } ul{ margin-top: 0; } ul li a{ writing-mode: vertical-rl; } .dotted{ transform: rotate(90deg); } header .outer{ width: 100%; height: 100vh; position: relative; } header .inner{ position: absolute; left: 50%; top: 40px; transform: translate(-50%, -40px); } textarea{ width: 100%; margin-bottom: 0; } } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typicons/2.1.2/typicons.min.css" integrity="sha512-/O0SXmd3R7+Q2CXC7uBau6Fucw4cTteiQZvSwg/XofEu/92w6zv5RBOdySvPOQwRsZB+SFVd/t9T5B/eg0X09g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

TOPページ：全体レイアウト（5/31修正）
<div class="wrap"> <!-- ↓ここからヘッダーメニュー↓ --> <!-- ↓拍手タグの■には拍手機能番号の数字が入ります：（例）clap1_...↓ --> <header><div class="outer"><div class="inner"> <div class="mv"></div> <h1>サイトタイトル</h1> <ul class="nav"> <li><a href="■">top</a></li> <li><a href="■">information</a></li> <li><a href="■">main</a></li> </ul> <div class="dotted"></div> <div class="icon"> #clap■_<span class="typcn typcn-heart-full-outline"></span># </div> </div></div> </header> <!-- ↓ここからメインコンテンツ↓ --> <main> <div class="top"> <div class="mv"></div> <h1>サイトタイトル</h1> <p class="en en-ttl">Site title</p> <div class="sub"> <p class="en">last up...</p> 2023.05.01　◯◯◯◯+1 <br><br> <p class="en">rank and search...</p> <a href="■">xxx</a> / <a href="■">yyy</a> / <a href="■">zzz</a> </div> <!-- ↓ここからフッター↓ --> </div> <div class="footer"> Template by <a href="https://nanos.jp/mellow100/">mellow.</a> </div> </main> </div>

子ページ（info & main）：全体レイアウト
<div class="wrap"> <!-- ↓ここからヘッダーメニュー↓ --> <!-- ↓拍手タグの■には拍手機能番号の数字が入ります：（例）clap1_...↓ --> <header><div class="outer"><div class="inner"> <div class="mv"></div> <h1>サイトタイトル</h1> <ul class="nav"> <li><a href="■">top</a></li> <li><a href="■">information</a></li> <li><a href="■">main</a></li> </ul> <div class="dotted"></div> <div class="icon"> #clap■_<span class="typcn typcn-heart-full-outline"></span># </div> </div></div> </header> <!-- ↓ここからメインコンテンツ↓ --> <main> <div class="section"> <h2>information</h2> ここに本文を入れてください。<br> メニュー以外のリンクは<a href="■">こんなふう</a>、<strong>強調文はこんなふう。</strong> <h3>about</h3> サイト名：◯◯◯<br> 管理人：◯◯◯（ <a href="■">memo</a> | <a href="■">bkm</a> )<br> URL：https://◯◯◯<br> <br> ご用の方や感想などはこちらからどうぞ。など<br> <form action="/■サイトID/form/■メール機能番号/posted" method="post"><textarea cols="30" rows="6" name="Item[2]"></textarea> <br> <input type="submit" value="send" accesskey="1" /></form> </div> <div class="section"> <h2>main</h2> 長編、中編は別ページへのリンクを貼るのをおすすめします。短編などでこのページに直接小説を載せる場合は、リストタグを使っていませんので、お手数ですが一話ずつURLを貼り付けてください。<br><br> <form class="dream" action="/■サイトID/novel/■小説機能番号/dream" method="post"> <input type="text" name="DreamID[■名前変換登録番号（最初に登録したなら1）]" value="#■名前変換タグ(あなたが決めた#で始まるタグ)#"><br> <input type="text" name="DreamID[■名前変換登録番号（２番目に登録したなら2）]" value="#■名前変換タグ(あなたが決めた#で始まるタグ)#"><br> <input type="submit" name="set" value="OK"></form> <br><br> <h3>long</h3> <div class="long"><img src="#mtr■長編用画像番号_url#" class="novel-img"><div class="text"><a href="■">長編タイトル</a><br> <p class="caption">- ここに説明などを入れるとよさそう</p></div></div> <div class="long"><img src="#mtr■長編用画像番号_url#" class="novel-img"><div class="text"><a href="■">長編タイトル</a><br> <p class="caption">- ここに説明などを入れるとよさそう</p></div></div> </div> <br><br> <h3>short</h3> <a href="■">短編タイトル</a>（◯△□）<br> <a href="■">短編タイトル</a>（◯△□）<br> <!-- ↓ここからフッター↓ --> <div class="footer"> Template by <a href="https://nanos.jp/mellow100/">mellow.</a> </div> </main> </div>

拍手：全体レイアウト
<div class="clap"> #clap# </div>

拍手：ありがとう画面（本文）
<div class="inner"> <img src="#mtr■画像番号_url#"><br> ありがとうございます！<br> 何かございましたら下記よりどうぞ。<br> テキストテキストテキスト。 <form class="message" action="/■サイトID/clap/■拍手機能番号/?ResultOrder=1" method="POST"> <input type="text" name="Message" size="30" value=""><br> <input type="submit" value="clap!"> </form> </div> <div class="footer"><a href="■">back？</a></div>

おまけのバナーは下記から：