カスタムCSSで独自スタイルにする(上級者向け)

有料プランなら、CSSでビューアの見た目を細かく調整できます。

テンプレートや配色では届かない細かな調整をしたいときは、カスタムCSSが使えます。ブック設定「高度な設定」の「カスタムCSS」欄にCSSを書くと、公開ビューアに反映されます。

ℹ️ カスタムCSSの反映は、透かしなし(有料)の本(買い切り/サブスク)でのみ有効です。
  1. 1ブック設定(設定)を開き、「高度な設定」→「カスタムCSS」を開きます。
  2. 2要素の目印になるクラス(下の表)を使ってCSSを書きます。
  3. 3保存する を押すと、公開ビューアに反映されます。

使える主なクラス(要素の目印)

クラス要素
.mk-header上部ヘッダー帯
.mk-title / .mk-logoタイトル文字 / ロゴ画像
.mk-toolbar右上の操作ボタン群
.mk-stage本の表示エリア(周囲の余白・背景)
.mk-book / .page本そのもの / 各ページ
.mk-nav-prev / .mk-nav-next左右のめくり矢印
.mk-bottombar / .mk-pagelabel下部バー / ページ番号
.mk-search / .mk-thumbs / .mk-toc検索 / サムネ / 目次パネル

記述例

  • .mk-nav-prev, .mk-nav-next { box-shadow: 0 8px 24px rgba(0,0,0,.35); } — 左右の矢印に影をつける
  • .mk-header { backdrop-filter: blur(6px); } — ヘッダーをすりガラス風に
  • .page { border-radius: 8px; } — 各ページの角を丸くする
⚠️ 安全のため、外部の読み込み(@import・外部URL)、固定配置(position: fixed)、スクリプト等は自動で無効化されます。書いたCSSは、ビューア内だけに適用されるよう自動で範囲が限定されます。
💡 ここで入力したカスタムCSSは、ZIP書き出しにもそのまま含まれます(index.html の <style> に焼き込み済み・同じ mk-* クラスで有効)。さらに細かく編集したいときは、index.html 内の <style> を直接書き換えてください。