ウチズミ

小説用ツール配布

注意事項用ダイアログ

注意事項（年齢確認など）をダイアログで表示します。
「OK」にあたるボタンを押下した場合のみ、指定のページへジャンプします。
「NG」にあたるボタンを押下した場合は、現在のページに留まります。
テストページ

ソース

<head>内に記述
<link rel= "stylesheet" href= "https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css" > <style> HTML SCSSResult Skip Results Iframe EDIT ON .R18-dialog { width: unset; max-width: unset; height: unset; max-height: unset; padding: unset; color: unset; background-color: unset; border: unset; overflow: unset; } .R18-dialog::backdrop{ position: unset; inset: unset; background:unset; } .modal-close { font-size: 80%; position: absolute; right: 0; text-align: center; top: 0; text-decoration: none; border: none; background-color: #fff; color: #222; &:hover { color: #222; } } .R18-dialog { max-width: unset; max-height: unset; inset-block-start: unset; inset-block-end: 0px; user-select: unset; visibility: unset; overflow: unset; box-shadow: 0px 20px 36px 0px rgba(59, 59, 59, 0.6); height: 17em; width: 80dvw; max-width: 400px; border: none; position: fixed; inset: 0; margin: auto; } .R18-dialog::backdrop { background: rgba(0 0 0 0.4); } #R18-dialog-container{ padding: 1em; } .R18 { background-color: #f60c86; /* ボタン背景色 */ color: #fff; /* ボタン文字色 */ padding: 0.2rem; -webkit-appearance: none; font-size: 1.05em; border : 0; } </style>
<body>タグの直後に記述

 <dialog id="R18-Dialog" class="R18-dialog"> <div id="R18-dialog-container"> <button id="closeButton" type="button" class="modal-close"> <p>×</p> </button> <div><i class="las la-exclamation-circle" style=" color:#f60c86; font-size:4em;"></i><br>  この先、性的表現を含みます。高校生を含む１８歳未満の閲覧は固くお断りしています。<br> あなたは１８歳以上ですか？<br><br></div>  <form method="R18-dialog"> <button type="button" id="YES" value="YES" class="R18">  はい、１８歳以上です。  </button> <button type="button" id="NO" value="NO" class="R18">  いいえ  </button> </form> </div> </dialog>
<⁄body>直前に記述
<script> function r18(i) { function step(i){ //要素を取得する const OKButton = document.getElementById('YES'); OKButton.addEventListener('click', () => { Dialog.close(); // モーダルを解除すると、スクロール可能になる document.documentElement.style.overflow = "auto"; // ページ変遷 switch (i) { // ※※※※ジャンプ先のURLはここに記載※※※※ case 1 : // 【./〇〇.html】の部分を任意のジャンプ先へ変更してください。 window.location.href = './01.html'; console.log(location.href) break; // 一つのページ内(小説のメニューページなど)から複数のジャンプ先が存在する場合は、分岐を増やします。 // case 【番号】の【番号】部分を+1ずつ増やしてください。 // 分岐を増やす場合、ここから case 2 : window.location.href = './02.html'; console.log(location.href) break; // 分岐を増やす場合、ここまで } }); } var result = null const Dialog = document.getElementById('R18-Dialog'); // モーダルを開く Dialog.showModal(); // モーダルダイアログを表示する際に背景部分がスクロールしないようにする document.documentElement.style.overflow = "hidden"; // モーダルを閉じる const closeButton = document.getElementById('closeButton'); closeButton.addEventListener('click', () => { Dialog.close(); // モーダルを解除すると、スクロール可能になる document.documentElement.style.overflow = "auto"; }); const NGButton = document.getElementById('NO'); NGButton.addEventListener('click', () => { Dialog.close(); // モーダルを解除すると、スクロール可能になる document.documentElement.style.overflow = "auto"; }); step(i)} </script>
注意文を出したいリンク部分の記述
  <a href="javascript:void(0)" onclick="r18(1)">テストページ</a>
ページ内しおり機能

前回終了した位置をブラウザに記憶し、次回ページを開いた際にその位置までジャンプします。
ジャンプするかどうかはボタンで選ぶことができ、ボタン選択をせずにスクロールをした場合は、選択ダイアログを非表示にします。
またページ最上部、ページ最下部でページを終了した場合は前回終了した位置に戻るかの確認はしません。
※終了時の位置の記憶保存にはブラウザのローカルストレージを使用しています。保存期間は、基本は一週間ほどです。
テストページ

ソース

<head>内に記述

<style> HTML SCSSResult Skip Results Iframe EDIT ON .dialog { width: unset; max-width: unset; height: unset; max-height: unset; padding: unset; color: unset; background-color: unset; border: unset; overflow: unset; } .dialog::backdrop{ position: unset; inset: unset; background:unset; } .modal-close { font-size: 80%; position: absolute; right: 0; text-align: center; top: 0; text-decoration: none; border: none; background-color: #fff; color: #222; &:hover { color: #222; } } .dialog { max-width: unset; max-height: unset; inset-block-start: unset; inset-block-end: 0px; user-select: unset; visibility: unset; overflow: unset; box-shadow: 0px 20px 36px 0px rgba(59, 59, 59, 0.6); height: 3.5rem; width: 100dvw; border: none; position: fixed; bottom: 0; } button { background-color: #ccc; /* ボタン背景色 */ color: #222; /* ボタン文字色 */ padding: 0.2rem; -webkit-appearance: none; font-size: 1.05em; border : 0; } </style>
<body>タグの直後に記述
 <dialog id="modalDialog" class="dialog"> <div id="dialog-container"> <button id="closeButton" type="button" class="modal-close"> <p>×</p> </button> <div>前回読んだ位置に戻りますか？</div> <form method="dialog"> <button type="submit" id="OK" value="OK">はい</button> <button type="submit" id="NG" value="CANCEL">いいえ</button> </form> </div> </dialog>
<⁄body>直前に記述
<script> // 小説ページを保存しているフォルダ名(ディレクトリ名) // ローカルストレージには【scrollY【フォルダ名以下の階層から下の】参照パス/ファイル名】というKEYで保存されます。 const con ='【フォルダ名】/'; //末尾の「/」は消さないでください。 //　phpファイルでページを作成している方はここを【.php】へ変更してください。 const extension = '.html'; var fnm = location.pathname; var fnm2 = fnm.substring(fnm.indexOf(con)+ con.length); var fnm3 = fnm2.substring(0, fnm2.length - (extension.length + 1) ); var num_scrollPosition; var str_scrollPosition; var STORAGE_KEY = "scrollY"+ fnm3; //終了時のイベントをセット window.addEventListener("pagehide", function() { saveScrollPosition(con, extension); }, false); //ロード時のイベントをセット window.addEventListener("load", function(){ str_scrollPosition = localStorage.getItem(STORAGE_KEY); num_scrollPosition = Number(str_scrollPosition); if (isNaN(num_scrollPosition)) num_scrollPosition = 0; if(num_scrollPosition > 100 ){ const modalDialog = document.getElementById('modalDialog'); // モーダルを開く modalDialog.showModal(); const closeButton = document.getElementById('closeButton'); // モーダルを閉じる closeButton.addEventListener('click', () => { modalDialog.close(); }); //要素を取得する const OKButton = document.getElementById('OK'); OKButton.addEventListener('click', () => { console.log(num_scrollPosition); scrollTo(0, num_scrollPosition); modalDialog.close(); }); const NGButton = document.getElementById('NG'); NGButton.addEventListener('click', () => { window.addEventListener("scroll", saveScrollPosition, false); modalDialog.close(); }); } }); /* 現在位置をローカルストレージへ保存 */ function saveScrollPosition(con,extension){ /*　変数宣言　*/ var fnm = location.pathname; var fnm2 = fnm.substring(fnm.indexOf(con)+ con.length); var fnm3 = fnm2.substring(0, fnm2.length - (extension.length + 1) ); var num_scrollPosition; var str_scrollPosition; var STORAGE_KEY = "scrollY"+ fnm3; /* ストレージへセット */ num_scrollPosition = window.scrollY; str_scrollPosition = String(num_scrollPosition); window.localStorage.setItem(STORAGE_KEY, str_scrollPosition); } //スクロール時のイベントを追加 window.addEventListener('scroll', function(){ //画面のスクロール量 > 現在位置 if(num_scrollPosition > 100 || window.scrollY > num_scrollPosition){ //モーダル非表示 const modalDialog = document.getElementById('modalDialog'); modalDialog.close(); } }); </script>
特定文字の表示切替ボタン

♡の表示非表示を切り替えます。
詳しくはテストページをご覧ください。
テストページ

ソース

<head>内に記述
<link rel= "stylesheet" href= "https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css" > <style> /* トグルボタン */ /*common*/ *, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; } /*main parts css*/ .input.checkbox { position: relative; width: 52px; height: 29px; border-radius: 50px; overflow: hidden; cursor: pointer; } .input.checkbox input[type=checkbox] { display: none; } .input.checkbox:before, .input.checkbox:after { font-size:14px; } .input.checkbox:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; background: #ccc; transition: 0.2s ease-out; } .input.checkbox:after { content: "\f00d"; /* ×アイコン */ font-weight: 900; font-family: "Line Awesome Free"; position: absolute; top: 3px; left: 3px; width: 23px; height: 23px; display: block; border-radius: 50px; background: #fff; box-shadow: 0 9px 28px -6px rgba(0, 0, 0, 0.3); transition: 0.2s ease-out; text-align: center; padding: 5px 0 0; line-height: 1; font-weight: bold; color: #ccc; letter-spacing: .5px; box-sizing: border-box; } .input.checkbox.checked:before { background: #f60c86; /* オン時の背景色　ハートの色と揃えた方がかわいい */ } .input.checkbox.checked:after { content: "\f004"; /* ハートアイコン */ font-weight: 900; font-family: "Line Awesome Free"; left: 26px; box-shadow: 0 9px 28px -6px rgba(0, 0, 0, 0.5); color: #f60c86; /* ハートの色　オン時の背景色と揃えた方がかわいい*/ padding: 5px 0 0 1px; } tgl div { margin: 1em 0em 0em 0em; } tgl p { color: #222; /* 説明書きの文字色 */ margin: 0.5em 1em 3em 0em; text-align: justify; word-break: break-word; line-break: strict; } </style>
ボタンの表示をしたい位置に記述
<div class="input checkbox checked"> <label> <input type="checkbox" name="xxx" value="yes"> </label> </div>  <p>♡喘ぎ表示をオンオフできます。お好みに応じてご利用ください。</p>
<⁄body>直前に記述
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> function on_off(flg){ const cls = document.getElementsByClassName('heart'); Array.prototype.forEach.call(cls, function(target) { if (flg) { target.style.display = "inline"; } else { target.style.display = "none"; } }); } $(function() { // ページロード時にチェックボックスの状態を強制的にチェックする $(".input.checkbox").each(function() { var $input = $(this).children("label").children("input"); // 初期化としてチェック状態にする $input.prop("checked", true); // チェックされた状態に強制設定 $(this).addClass("checked"); // checked クラスも追加 }); // チェックボックスをクリックしたら発火 $(".input.checkbox").on("click", function() { var $input = $(this).children("label").children("input"); // チェック状態を反転 $input.prop("checked", !$input.prop("checked")); // 状態に応じてクラスをトグル if ($input.prop("checked")) { $(this).addClass("checked"); on_off(true); } else { $(this).removeClass("checked"); on_off(false); } }); }); </script>
表示非表示切り替え文字の記述
<span class="heart" >♡</span>
ウチズミ

当サイトの配布物を使用し発生した損害やトラブルには責任を負いかねます。
サイト内コンテンツは予告なく削除・変更をする場合がございます。

ネット海の片隅で小説書いています。
自分が使いたくて作ったツールですが、どなたかの創作活動の一助になれば幸いです。

リンク
<a href="https://tyr.lsv.jp/uchizumi/">ウチズミ</a>
管理者
炭(すみ)
連絡

メッセージは文字まで、同一IPアドレスからの送信は一日回まで

メッセージありがとうございます！　お返事が必要な場合、少々お時間をいただきます。

もしくは、【liana_p9★yahoo.co.jp】まで
感謝
Koibumi by do
Template by NINA - ニーナ

小説用ツール配布

注意事項用ダイアログ

ページ内しおり機能

特定文字の表示切替ボタン