novel viewer

parts

デザインの設定

このパーツでは、「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-width40px
--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-roundedinput関連要素の角丸サイズ0
--env-menu-input-main-colorinputの色(メイン)#333333
--env-menu-input-sub-colorinputの色(サブ)#ffffff
--env-menu-input-bar-colorinput[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}フォントサイズ設定sm14px
md16px
lg20px
xl24px
--env-line-height-{sm, md, lg, xl}行間設定sm120%
md160%
lg200%
xl240%
--env-letter-spacing-{sm, md, lg, xl}文字間隔設定sm0
md5px
lg10px
xl15px

その他の設定

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

縦書きデザインの設定

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

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

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

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

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

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

手順
  1. 新しいCSSファイル「novel-viewer-color1.css」を作成する(他の名前でもOK)
  2. novel-viewer.css」の上部にある:root部分をすべてコピーし、「novel-viewer-color1.css」に張り付ける
  3. 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;
}
  1. 各設定を変更する
  2. 変更を反映したいページのHTMLファイルを開く
  3. 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
fontSizeMinmode="detail"】の場合の最小フォントサイズ数値(px基準)
初期値…10
fontSizeMaxmode="detail"】の場合の最大フォントサイズ数値(px基準)
初期値…30
lineHeightMinmode="detail"】の場合の最小行間数値
初期値…1.0
lineHeightMaxmode="detail"】の場合の最大行間数値
初期値…5.0
letterSpacingMinmode="detail"】の場合の最小文字間隔数値(px基準)
初期値…0
letterSpacingMaxmode="detail"】の場合の最大文字間隔数値(px基準)
初期値…30
タイトルとURLをコピーしました