novel viewer

デザインの設定
ビューアの設定

デザインの設定

このパーツでは、「novel-viewer.css」のカスタムプロパティを変更することである程度のデザイン変更が可能です。

開閉ボタンの設定

アイコンの色はSVGファイル内のカラーコードを変更してください。

カスタムプロパティ	概要	初期値
`--env-button-open-text`	テキスト（開く）	設定
`--env-button-close-text`	テキスト（閉じる）	閉じる
`--env-button-text-color`	文字色	`#ffffff`
`--env-button-bg-color`	背景色	`#333333`
`--env-button-border-color`	線色	`#333333`
`--env-button-width`	幅	`40px`
`--env-button-height`	高さ	`40px`
`--env-button-rounded`	角丸サイズ	`5px 0 0 5px`
`--env-button-position-top`	上からの位置	`100px`
`--env-button-position-bottom`	下からの位置	`auto`
`--env-button-position-left`	左からの位置	`auto`
`--env-button-position-right`	右からの位置	`0`

設定画面の設定

カスタムプロパティ	概要	初期値
`--env-menu-title-text`	タイトルテキスト	ビューア設定
`--env-menu-reset-text`	リセットボタンテキスト	リセット
`--env-menu-title-border-color`	タイトル下線色	`#333333`
`--env-menu-color`	文字色	`#333333`
`--env-menu-bg-color`	背景色	`#ffffff`
`--env-menu-rounded`	角丸サイズ	`5px`
`--env-menu-overlay-color`	外側の背景色	`rgba(0, 0, 0, 0.3)`
`--env-menu-input-rounded`	`input`関連要素の角丸サイズ	`0`
`--env-menu-input-main-color`	`input`の色（メイン）	`#333333`
`--env-menu-input-sub-color`	`input`の色（サブ）	`#ffffff`
`--env-menu-input-bar-color`	`input[type="range"]`のバー色	`#eeeeee`

ベーシックモードのビジュアル設定

ベーシックモード時のビジュアルを設定します。
各種、sm~xlまでの4段階で設定可能です。

カスタムプロパティ	概要	初期値
`--env-color-type-default-bg-color`	カラータイプデフォルトの背景色	`#f1f6fa`
`--env-color-type-default-color`	カラータイプデフォルトの文字色	`#333333`
`--env-vertical-height-{pc, sp}`	縦書き時の高さ	`pc`(パソコン)…`80vh` `sp`(スマホ)…`80vh`
`--env-font-size-{sm, md, lg, xl}`	フォントサイズ設定	`sm`…`14px` `md`…`16px` `lg`…`20px` `xl`…`24px`
`--env-line-height-{sm, md, lg, xl}`	`行間設定`	`sm…120% md…160% lg…200% xl…240%`
`--env-letter-spacing-{sm, md, lg, xl}`	`文字間隔設定`	`sm…0 md…5px lg…10px xl…15px`

その他の設定

カスタムプロパティ	概要	初期値
`--env-animation`	各種アニメーションの時間	`0.5s`

縦書きデザインの設定

縦書き表示の場合、デザインによっては余白や装飾が崩れることがあります。

その場合、サイトデザインのCSSファイルにて「.env-writing-mode-vertical」クラス以下の各要素に対し、縦書き時のデザインを調整してください。

以下、「縦書き表示時の<p>タグ」のレイアウト設定例を記載します。

.env-writing-mode-vertical p {
    margin: 0 25px;
}

ページによってデザインを変更する

カスタムプロパティで設定している項目は、簡単にページ毎の設定が可能です。

手順

新しいCSSファイル「novel-viewer-color1.css」を作成する（他の名前でもOK）
「novel-viewer.css」の上部にある:root部分をすべてコピーし、「novel-viewer-color1.css」に張り付ける
「novel-viewer.css」と共通の値にしたいカスタムプロパティを削除する（以下は、色設定のみ切り分けて設定する場合の例）

:root {
    /** 開閉ボタン **/
    /* テキスト色 */
    --env-button-text-color: #ffffff;
    /* 背景色 */
    --env-button-bg-color: #333333;
    /* 線色 */
    --env-button-border-color: #333333;
    /** 設定画面 **/
    /* タイトル下線色 */
    --env-menu-title-border-color: #333333;
    /* 文字色 */
    --env-menu-color: #333333;
    /* 背景色 */
    --env-menu-bg-color: #ffffff;
    /* 外側の背景色 */
    --env-menu-overlay-color: rgba(0, 0, 0, 0.3);
    /* inputの色（メイン） */
    --env-menu-input-main-color: #333333;
    /* inputの色（サブ） */
    --env-menu-input-sub-color: #ffffff;
    /* input[type="range"]のバー色 */
    --env-menu-input-bar-color: #eeeeee;
    /** ベーシックモードのビジュアル設定 **/
    /* デフォルトカラータイプ設定 */
    --env-color-type-default-bg-color: #f1f6fa;
    --env-color-type-default-color: #333333;
}

各設定を変更する
変更を反映したいページのHTMLファイルを開く
「novel-viewer.css」の呼び出しタグの下で「novel-viewer-color1.css」を呼び出す

<link rel="stylesheet" href="novel-viewer.css" type="text/css">
<link rel="stylesheet" href="novel-viewer-color1.css" type="text/css">

ビューアの設定

このパーツでは、「novel-viewer.js」の上部にある設定項目を使用することでビューアの設定が可能です。

ダウンロードファイルは、ユーザ設定をコメントアウトしています。
設定する場合は、「novel-viewer.js」の10行目～26行目のコメントアウトを外し、以下の状態にして値を変更してください。

※不要なパラメータは削除して構いません。

/* ▼ ユーザ設定ここから ▼ */
const envUserSettings = {
    menuType: "basic",
    mode: "basic",
    colorType: "default",
    fontFamily: "default",
    writingMode: "horizontal",
    fontSize: "md",
    lineHeight: "md",
    letterSpacing: "sm",
    // 以下6項目はmode="detail"の場合にのみ影響
    fontSizeMin: 10,
    fontSizeMax: 30,
    lineHeightMin: 1.0,
    lineHeightMax: 5.0,
    letterSpacingMin: 0,
    letterSpacingMax: 30,
};
/* ▲ ユーザ設定ここまで ▲ */

(*)…初期値

パラメータ	概要	値
`menuType`	メニュー表示タイプ	`basic(*)` `top` `bottom` `right` `left`
`mode`	ビューアモード	`basic(*)` `detail`
`colorType`	デフォルトのカラータイプ（デフォルト以外を設定すると、「デフォルト」は非表示になります）	`default(*)` `light` `dark` `gray` `cream` `sky`
`fontFamily`	デフォルトのフォント（デフォルト以外を設定すると、「デフォルト」は非表示になります）	`default(*)` `gothic`…ゴシック体 `mincho`…明朝体 `udGothic`…UDP ゴシック体 `udMincho`…UDP 明朝体 `udKyokasho`…UD 教科書体
writingMode	デフォルトの文字方向	`horizontal(*)`…横書き `vertical`…縦書き
`fontSize`	デフォルトのフォントサイズ	【`mode="basic"`】の場合 `sm` `md()` `lg` `xl` 【`mode="detail"`】の場合* 数値（px基準）初期値…`16`
`lineHeight`	デフォルトの行間サイズ	【`mode="basic"`】の場合 `sm` `md()` `lg` `xl` 【`mode="detail"`】の場合* 数値（px基準）初期値…`16`
`letterSpacing`	デフォルトの文字間隔	【`mode="basic"`】の場合 `sm()` `md` `lg` `xl` 【`mode="detail"`】の場合* 数値（px基準）初期値…`0`
`fontSizeMin`	【`mode="detail"`】の場合の最小フォントサイズ	数値（px基準）初期値…`10`
`fontSizeMax`	【`mode="detail"`】の場合の最大フォントサイズ	数値（px基準）初期値…`30`
`lineHeightMin`	【`mode="detail"`】の場合の最小行間	数値初期値…`1.0`
`lineHeightMax`	【`mode="detail"`】の場合の最大行間	数値初期値…`5.0`
`letterSpacingMin`	【`mode="detail"`】の場合の最小文字間隔	数値（px基準）初期値…`0`
`letterSpacingMax`	【`mode="detail"`】の場合の最大文字間隔	数値（px基準）初期値…`30`