ホームページのデザインを崩さず、ほぼコピー&ペーストでノベルビューア設定機能を実装するJavaScriptパーツ。
設置方法
<head>~</head>の間で「novel-viewer.css」を読み込みんでください
（href内のパスは環境に合わせて変更してください 不安な場合は、http://から始まる絶対パスで指定してください）
<link rel="stylesheet" href="novel-viewer/novel-viewer.css">- body閉じタグ
</body>の直前で「novel-viewer/novel-viewer.js」を読み込んでください。
（src内のパスは環境に合わせて変更してください 不安な場合は、http://から始まる絶対パスで指定してください）
<script src="novel-viewer/novel-viewer.js"></script>- ビューアの設定を反映したいブロックのクラスに「
env-base」を設定してください。
複数設定可能です。
（デモの場合は<article>~</article>に設定しています）
<article class="env-base">
<!-- コンテンツ省略 -->
</article >- その他の細かな設定はドキュメント（2ページ目にあります）に沿って行ってください。
ローカル環境下でのテスト
このパーツでは、cookieを使用してビューア設定を保存しています。
ほとんどのWebブラウザではローカルファイルに対してcookieの利用ができませんが、Firefoxを使用するとローカル環境下でcookie関連のテストが可能です。
史上最速の Firefox をダウンロード
より高速なページ読み込み、メモリ使用量削減、機能満載の最新版 Firefox が登場しました。
www.mozilla.org
Firefoxでcookie関連のテストを行う場合は、以下の設定を変更してください。
設定手順
- Firefoxを起動
- アドレスバーに「
about:config」と入力してEnterキーを押す - 検索欄に「
security.fileuri.strict_origin_policy」と入力 - 「
security.fileuri.strict_origin_policy」の設定をtrueからfalseに変更
※ずっと「false」のままにするのは非推奨です。テスト後は設定を戻してください。
更新履歴
- 2022.12.19公開・配布開始
- 2022.12.20コード修正・ドキュメント更新
- 他のCSSファイルで「*」にfont-familyが設定されている場合、フォント設定が反映されない問題の修正
- SSLが導入されていないサイトでCookieが保存されない問題の修正
- 「明朝体」がインストールされていない端末への対策を追加
- ページによってデザインを変更する方法をドキュメントに追加
ドキュメント
次のページにドキュメントをご用意しています。
